Google Git
Sign in
chromium / external / w3c / web-platform-tests / 607f71c2a52546c3c67c2a43df0e1a2458fa2a60 / . / cssom-view / elementFromPoint.html
blob: 55a14072b6021e5531e1700ee3fb0b8da6b22af6 [file] [log] [blame]
AutomatedTester846c2a12015-11-17 20:47:30[diff] [blame]1<!DOCTYPE html>
2<title>cssom-view - elementFromPoint</title>
3<script src="/resources/testharness.js"></script>
4<script src="/resources/testharnessreport.js"></script>
5<style>
6 .size {
7 width:100px;
8 height:100px;
9 }
10 .overlay {
11 position:absolute;
12 top:109px;
13 pointer-events:none;
14 }
15 .purple {
16 background-color: rebeccapurple;
17 }
18 .yellow {
19 background-color: yellow;
20 }
21 .teal {
22 background-color: teal;
23 }
24 .pink {
25 background-color: pink;
26 }
27</style>
28<body>
29 <div id='purple' class="size purple" >&nbsp;</div>
30 <div id='yellow' class="size yellow">&nbsp;</div>
31 <div id='teal' class="size overlay teal">&nbsp;</div>
32 <iframe id=iframe-1 src="iframe.html" style='display:none;position:absolute; left:300px;'></iframe>
33 <iframe id=iframe-2 src="iframe.html" width="" height=""></iframe>
34 <iframe id=iframe-3 width="" height=""></iframe>
35 <svg id=squiggle xmlns="http://www.w3.org/2000/svg" height="98" width="581" viewBox="0 0 581 98">
36 <path stroke-dashoffset="0.00" stroke-dasharray="" d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1" stroke="#000" stroke-width="4.3" fill="none">
37 </path>
38 </svg>
39 <svg id=svg-transform width="180" height="200"
40 xmlns="http://www.w3.org/2000/svg"
41 xmlns:xlink="http://www.w3.org/1999/xlink">
42
43 <!-- Now we add a text element and apply rotate and translate to both -->
44 <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect>
45 <text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello WPT! </text>
46
47</svg>
48 <div id='pink' class='size pink' style='transform: translate(10px)'>&nbsp;</div>
49 <div id='anotherteal' class='size teal' style='pointer-events:none'>Another teal</div>
AutomatedTesterf5048b22015-11-24 11:04:12[diff] [blame]50 <img id="dinos" src="/images/blue-area.png" usemap="#dinos_map" border="0" width="364" height="126"/>
51 <map id="dinos_map" name="dinos_map">
52 <area id="rectG" shape="rect" coords="0,0,90,100" href="#" alt="area 1"/>
53 <area id="circleO" shape="circle" coords="120,60,30" href="#" alt="area 2"/>
54 <area id="polyLE" shape="poly" coords="280,0,310,0,360,30,360,90,280,90" href="#" alt="area 3"/>
Boris Zbarskyfcc40562017-01-03 14:45:42[diff] [blame]55 <!-- Test for fieldsets not doing weird things. Use a 200x200 div to hold
56 all the bits for this test. Also, place it top/right, so it is not below
57 the bottom edge of the viewport. -->
58 <div style="position: absolute; width: 200px; height: 200px; right: 0; top: 0">
59 <div id="fieldset-div"
60 class="size" style="position: absolute; top: 0; left: 0">
61 </div>
Boris Zbarskyfdb85cd2017-01-03 14:45:43[diff] [blame]62 <fieldset id="fieldset"
63 class="size"
64 style="position: absolute; top: 100px; left: 100px; border-radius: 100px">
Boris Zbarskyfcc40562017-01-03 14:45:42[diff] [blame]65 <!-- Place the child span so the overflow area of the fieldset overlaps
66 the div -->
67 <span style="position: absolute; top: -100px; left: -100px; height: 1px; width: 1px"></span>
68 </fieldset>
69 </div>
AutomatedTester846c2a12015-11-17 20:47:30[diff] [blame]70 <script>
71 setup({explicit_done:true});
72 window.onload = function () {
73 test(function () {
74 assert_equals(document.elementFromPoint(-1, -1), null,
75 "both co-ordinates passed in are negative so should have returned a null");
76 assert_equals(document.elementFromPoint(-1, -1), null,
77 "x co-ordinates passed in are negative so should have returned a null");
78 assert_equals(document.elementFromPoint(-1, -1), null,
79 "y co-ordinates passed in are negative so should have returned a null");
80 }, "Negative co-ordinates");
81
82 test(function () {
83 var viewportX = window.innerWidth;
84 var viewportY = window.innerHeight;
85 assert_equals(document.elementFromPoint(viewportX + 100, 10), null,
86 "X co-ordinates larger than viewport");
87 assert_equals(document.elementFromPoint(10, viewportY + 100), null,
88 "Y co-ordinates larger than viewport");
89 assert_equals(document.elementFromPoint(viewportX + 100, viewportY + 100), null,
90 "X, Y co-ordinates larger than viewport");
91 }, "co-ordinates larger than the viewport");
92
93 test(function () {
94 var viewportX = window.frames[1].innerWidth;
95 var viewportY = window.frames[1].innerHeight;
96 var iframeRect = document.getElementById('iframe-2').getBoundingClientRect();
97 assert_equals(null, window.frames[1].document.elementFromPoint(iframeRect.right + viewportX + 100, 10),
98 "X co-ordinates larger than viewport");
99 assert_equals(null, window.frames[1].document.elementFromPoint(10, iframeRect.bottom + viewportY + 100),
100 "Y co-ordinates larger than viewport");
101 assert_equals(null, window.frames[1].document.elementFromPoint(iframeRect.right + viewportX + 100,
102 iframeRect.bottom + viewportY + 100),
103 "X, Y co-ordinates larger than viewport");
104 }, "co-ordinates larger than the viewport from in iframe");
105
106 test(function () {
107 assert_equals(document.elementFromPoint(10, 10), document.getElementById('purple'),
108 "Should have returned the element with id `purple`");
109 }, "Return first element that is the target for hit testing");
110
111 test(function () {
112 assert_equals(document.elementFromPoint(10, 120), document.getElementById('yellow'),
113 "Should have returned the element with id `yellow` as element with `teal` has `pointer-events:none`");
114 }, "First element to get mouse events with pointer-events css");
115
116 test(function () {
117 var svg = document.getElementById('squiggle');
Rick Byers9cee7942016-11-22 08:46:15[diff] [blame]118 svg.scrollIntoView();
AutomatedTester846c2a12015-11-17 20:47:30[diff] [blame]119 var svgRect = svg.getBoundingClientRect();
120 assert_equals(document.elementFromPoint(svgRect.left + Math.round(svgRect.width/2),
121 svgRect.top + Math.round(svgRect.height/2)),
122 svg,
123 "Should have returned the line SVG");
124 }, "SVG element at x,y");
125
126 test(function () {
127 var svg = document.getElementById('svg-transform');
Rick Byers9cee7942016-11-22 08:46:15[diff] [blame]128 svg.scrollIntoView();
AutomatedTester846c2a12015-11-17 20:47:30[diff] [blame]129 var svgRect = svg.getBoundingClientRect();
130 assert_equals(document.elementFromPoint(svgRect.left + Math.round(svgRect.width/2),
131 svgRect.top + Math.round(svgRect.height/2)),
132 svg.querySelector("rect"),
133 "Should have returned SVG with Hello WPT! that has a transform");
134
135 var pink = document.getElementById('pink');
Rick Byers9cee7942016-11-22 08:46:15[diff] [blame]136 pink.scrollIntoView();
AutomatedTester846c2a12015-11-17 20:47:30[diff] [blame]137 var pinkRect = pink.getBoundingClientRect();
138 assert_equals(document.elementFromPoint(pinkRect.left + Math.round(pinkRect.width/2),
139 pinkRect.top + Math.round(pinkRect.height/2)),
140 pink,
141 "Should have returned pink element that has a transform");
142
143 }, "transformed element at x,y");
144
145 test(function () {
146 var anotherteal = document.getElementById('anotherteal');
Rick Byers9cee7942016-11-22 08:46:15[diff] [blame]147 anotherteal.scrollIntoView();
AutomatedTester846c2a12015-11-17 20:47:30[diff] [blame]148 var anothertealRect = anotherteal.getBoundingClientRect();
149 assert_equals(document.elementFromPoint(anothertealRect.left + Math.round(anothertealRect.width/2),
150 anothertealRect.top + Math.round(anothertealRect.height/2)),
151 document.body,
Rick Byers9cee7942016-11-22 08:46:15[diff] [blame]152 "Should have returned the root as it has pointer-events:none");
AutomatedTester846c2a12015-11-17 20:47:30[diff] [blame]153
154 var doc = frames[2].document;
155 doc.removeChild(doc.documentElement);
156 assert_equals(doc.elementFromPoint(0, 0), null,
157 "Should have returned null as no root element");
158 }, "no hit target at x,y");
159
160 test(function () {
161 var doc = document.implementation.createHTMLDocument('foo');
162 assert_equals(doc.elementFromPoint(0, 0), null,
163 "Should have returned the documentElement for the document")
164 }, "No viewport available");
AutomatedTesterf5048b22015-11-24 11:04:12[diff] [blame]165
166 test(function () {
Rick Byers9cee7942016-11-22 08:46:15[diff] [blame]167 // HTML says:
168 // Pointing device interaction with an image associated with a set of layered shapes per
169 // the above algorithm must result in the relevant user interaction events being first
170 // fired to the top-most shape covering the point that the pointing device indicated, if
171 // any, or to the image element itself, if there is no shape covering that point.
172 // https://html.spec.whatwg.org/multipage/embedded-content.html#image-map-processing-model
AutomatedTesterf5048b22015-11-24 11:04:12[diff] [blame]173 var area = document.getElementById('rectG');
Rick Byers9cee7942016-11-22 08:46:15[diff] [blame]174 var image = document.getElementById('dinos');
175 area.scrollIntoView();
AutomatedTesterf5048b22015-11-24 11:04:12[diff] [blame]176 var areaRect = area.getBoundingClientRect();
177 assert_equals(document.elementFromPoint(areaRect.left + Math.round(areaRect.width/2),
178 areaRect.top + Math.round(areaRect.height/2)),
179 area,
Rick Byers9cee7942016-11-22 08:46:15[diff] [blame]180 "Should have returned the area element");
181 assert_equals(document.elementFromPoint(areaRect.left + 92,
182 areaRect.top + 2),
183 image,
AutomatedTesterf5048b22015-11-24 11:04:12[diff] [blame]184 "Should have returned the image element");
185 }, "Image Maps");
Boris Zbarskyfcc40562017-01-03 14:45:42[diff] [blame]186
187 test(function(){
188 var fieldsetDiv = document.getElementById("fieldset-div");
189 var divRect = fieldsetDiv.getBoundingClientRect();
190 assert_equals(document.elementFromPoint(divRect.left + divRect.width/2,
191 divRect.top + divRect.height/2),
192 fieldsetDiv,
193 "The fieldset should not cover up the div it doesn't even overlap");
Boris Zbarskyfdb85cd2017-01-03 14:45:43[diff] [blame]194
195 var fieldset = document.getElementById("fieldset");
196 var rect = fieldset.getBoundingClientRect();
197 // A point 5px in from topleft will be outside the rounded border.
198 assert_not_equals(document.elementFromPoint(rect.left + 5,
199 rect.top + 5),
200 fieldset,
201 "The fieldset should not be hit by hit-tests outside its rounded border");
Boris Zbarskyfcc40562017-01-03 14:45:42[diff] [blame]202 }, "Fieldsets");
AutomatedTester846c2a12015-11-17 20:47:30[diff] [blame]203 done();
204 }
205 </script>