elementFromPoint.html (10960B)
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:60px; 8 height:60px; 9 } 10 .overlay { 11 position:absolute; 12 top:69px; 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" > </div> 30 <div id='yellow' class="size yellow"> </div> 31 <div id='teal' class="size overlay teal"> </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="500" 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="140" 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="60" width="60" 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! </text> 46 47 </svg> 48 <div id='pink' class='size pink' style='transform: translate(10px)'> </div> 49 <div id='anotherteal' class='size teal' style='pointer-events:none'>Another teal</div> 50 <img id="dinos" src="/images/blue-area.png" usemap="#dinos_map" border="0" width="364" height="40"/> 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"/> 55 </map> 56 <!-- Test for fieldsets not doing weird things. Use a 200x200 div to hold 57 all the bits for this test. Also, place it top/right, so it is not below 58 the bottom edge of the viewport. --> 59 <div style="position: absolute; width: 200px; height: 200px; right: 0; top: 0"> 60 <div id="fieldset-div" 61 class="size" style="position: absolute; top: 0; left: 0"> 62 </div> 63 <fieldset id="fieldset" 64 class="size" 65 style="position: absolute; top: 100px; left: 100px; border-radius: 100px"> 66 <!-- Place the child span so the overflow area of the fieldset overlaps 67 the div --> 68 <span style="position: absolute; top: -100px; left: -100px; height: 1px; width: 1px"></span> 69 </fieldset> 70 </div> 71 <script> 72 setup({explicit_done:true}); 73 window.onload = function () { 74 test(function () { 75 assert_equals(document.elementFromPoint(-1, -1), null, 76 "both co-ordinates passed in are negative so should have returned a null"); 77 assert_equals(document.elementFromPoint(-1, -1), null, 78 "x co-ordinates passed in are negative so should have returned a null"); 79 assert_equals(document.elementFromPoint(-1, -1), null, 80 "y co-ordinates passed in are negative so should have returned a null"); 81 }, "Negative co-ordinates"); 82 83 test(function () { 84 var viewportX = window.innerWidth; 85 var viewportY = window.innerHeight; 86 assert_equals(document.elementFromPoint(viewportX + 100, 10), null, 87 "X co-ordinates larger than viewport"); 88 assert_equals(document.elementFromPoint(10, viewportY + 100), null, 89 "Y co-ordinates larger than viewport"); 90 assert_equals(document.elementFromPoint(viewportX + 100, viewportY + 100), null, 91 "X, Y co-ordinates larger than viewport"); 92 }, "co-ordinates larger than the viewport"); 93 94 test(function () { 95 var viewportX = window.frames[1].innerWidth; 96 var viewportY = window.frames[1].innerHeight; 97 var iframeRect = document.getElementById('iframe-2').getBoundingClientRect(); 98 assert_equals(null, window.frames[1].document.elementFromPoint(iframeRect.right + viewportX + 100, 10), 99 "X co-ordinates larger than viewport"); 100 assert_equals(null, window.frames[1].document.elementFromPoint(10, iframeRect.bottom + viewportY + 100), 101 "Y co-ordinates larger than viewport"); 102 assert_equals(null, window.frames[1].document.elementFromPoint(iframeRect.right + viewportX + 100, 103 iframeRect.bottom + viewportY + 100), 104 "X, Y co-ordinates larger than viewport"); 105 }, "co-ordinates larger than the viewport from in iframe"); 106 107 test(function () { 108 assert_equals(document.elementFromPoint(10, 10), document.getElementById('purple'), 109 "Should have returned the element with id `purple`"); 110 }, "Return first element that is the target for hit testing"); 111 112 test(function () { 113 assert_equals(document.elementFromPoint(10, 80), document.getElementById('yellow'), 114 "Should have returned the element with id `yellow` as element with `teal` has `pointer-events:none`"); 115 }, "First element to get mouse events with pointer-events css"); 116 117 test(function () { 118 var svg = document.getElementById('squiggle'); 119 svg.scrollIntoView(); 120 var svgRect = svg.getBoundingClientRect(); 121 assert_equals(document.elementFromPoint(svgRect.left + Math.round(svgRect.width/2), 122 svgRect.top + Math.round(svgRect.height/2)), 123 svg, 124 "Should have returned the line SVG"); 125 }, "SVG element at x,y"); 126 127 test(function () { 128 var svg = document.getElementById('svg-transform'); 129 svg.scrollIntoView(); 130 var svgRect = svg.getBoundingClientRect(); 131 assert_equals(document.elementFromPoint(svgRect.left + Math.round(svgRect.width/2), 132 svgRect.top + Math.round(svgRect.height/2)), 133 svg.querySelector("rect"), 134 "Should have returned SVG with Hello WPT! that has a transform"); 135 136 var pink = document.getElementById('pink'); 137 pink.scrollIntoView(); 138 var pinkRect = pink.getBoundingClientRect(); 139 assert_equals(document.elementFromPoint(pinkRect.left + Math.round(pinkRect.width/2), 140 pinkRect.top + Math.round(pinkRect.height/2)), 141 pink, 142 "Should have returned pink element that has a transform"); 143 144 }, "transformed element at x,y"); 145 146 test(function () { 147 var anotherteal = document.getElementById('anotherteal'); 148 anotherteal.scrollIntoView(); 149 var anothertealRect = anotherteal.getBoundingClientRect(); 150 assert_equals(document.elementFromPoint(anothertealRect.left + Math.round(anothertealRect.width/2), 151 anothertealRect.top + Math.round(anothertealRect.height/2)), 152 document.body, 153 "Should have returned the root as it has pointer-events:none"); 154 155 var doc = frames[2].document; 156 doc.removeChild(doc.documentElement); 157 assert_equals(doc.elementFromPoint(0, 0), null, 158 "Should have returned null as no root element"); 159 }, "no hit target at x,y"); 160 161 test(function () { 162 var doc = document.implementation.createHTMLDocument('foo'); 163 assert_equals(doc.elementFromPoint(0, 0), null, 164 "Should have returned the documentElement for the document") 165 }, "No viewport available"); 166 167 test(function () { 168 // HTML says: 169 // Pointing device interaction with an image associated with a set of layered shapes per 170 // the above algorithm must result in the relevant user interaction events being first 171 // fired to the top-most shape covering the point that the pointing device indicated, if 172 // any, or to the image element itself, if there is no shape covering that point. 173 // https://html.spec.whatwg.org/multipage/embedded-content.html#image-map-processing-model 174 var area = document.getElementById('rectG'); 175 var image = document.getElementById('dinos'); 176 area.scrollIntoView(); 177 var areaRect = image.getBoundingClientRect(); 178 areaRect.width = Math.min(areaRect.width, 90); 179 areaRect.height = Math.min(areaRect.height, 100); 180 assert_equals(document.elementFromPoint(areaRect.left + Math.round(areaRect.width/2), 181 areaRect.top + Math.round(areaRect.height/2)), 182 area, 183 "Should have returned the area element"); 184 assert_equals(document.elementFromPoint(areaRect.left + 92, 185 areaRect.top + 2), 186 image, 187 "Should have returned the image element"); 188 }, "Image Maps"); 189 190 test(function(){ 191 var fieldsetDiv = document.getElementById("fieldset-div"); 192 var divRect = fieldsetDiv.getBoundingClientRect(); 193 assert_equals(document.elementFromPoint(divRect.left + divRect.width/2, 194 divRect.top + divRect.height/2), 195 fieldsetDiv, 196 "The fieldset should not cover up the div it doesn't even overlap"); 197 198 var fieldset = document.getElementById("fieldset"); 199 var rect = fieldset.getBoundingClientRect(); 200 // A point 5px in from topleft will be outside the rounded border. 201 assert_not_equals(document.elementFromPoint(rect.left + 5, 202 rect.top + 5), 203 fieldset, 204 "The fieldset should not be hit by hit-tests outside its rounded border"); 205 }, "Fieldsets"); 206 done(); 207 } 208 </script>