elementsFromPoint.html (8136B)
1 <!DOCTYPE html> 2 <title>cssom-view - elementsFromPoint</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 <script> 51 setup({explicit_done:true}); 52 window.onload = function () { 53 test(function () { 54 assert_array_equals(document.elementsFromPoint(-1, -1), [], 55 "both co-ordinates passed in are negative so should have returned a []"); 56 assert_array_equals(document.elementsFromPoint(-1, -1), [], 57 "x co-ordinates passed in are negative so should have returned a []"); 58 assert_array_equals(document.elementsFromPoint(-1, -1), [], 59 "y co-ordinates passed in are negative so should have returned a []"); 60 }, "Negative co-ordinates"); 61 62 test(function () { 63 var viewportX = window.innerWidth; 64 var viewportY = window.innerHeight; 65 assert_array_equals(document.elementsFromPoint(viewportX + 100, 10), [], 66 "X co-ordinates larger than viewport so should have returned a []"); 67 assert_array_equals(document.elementsFromPoint(10, viewportY + 100), [], 68 "Y co-ordinates larger than viewport so should have returned a []"); 69 assert_array_equals(document.elementsFromPoint(viewportX + 100, viewportY + 100), [], 70 "X, Y co-ordinates larger than viewport so should have returned a []"); 71 }, "co-ordinates larger than the viewport"); 72 73 test(function () { 74 var viewportX = window.frames[1].innerWidth; 75 var viewportY = window.frames[1].innerHeight; 76 var iframeRect = document.getElementById('iframe-2').getBoundingClientRect(); 77 assert_array_equals([], window.frames[1].document.elementsFromPoint(iframeRect.right + viewportX + 100, 10), 78 "X co-ordinates larger than viewport so should have returned a []"); 79 assert_array_equals([], window.frames[1].document.elementsFromPoint(10, iframeRect.bottom + viewportY + 100), 80 "Y co-ordinates larger than viewport so should have returned a []"); 81 assert_array_equals([], window.frames[1].document.elementsFromPoint(iframeRect.right + viewportX + 100, 82 iframeRect.bottom + viewportY + 100), 83 "X, Y co-ordinates larger than viewport so should have returned a []"); 84 }, "co-ordinates larger than the viewport from in iframe"); 85 86 test(function () { 87 assert_array_equals(document.elementsFromPoint(10, 10), 88 [document.getElementById('purple'), document.body, document.querySelector('html')], 89 "Should have returned a sequence with `[purple element, document.body, html]`"); 90 }, "Return first element that is the target for hit testing"); 91 92 test(function () { 93 assert_array_equals(document.elementsFromPoint(10, 80), 94 [document.getElementById('yellow'), document.body, document.querySelector('html')], 95 "Should have returned a sequence with `[yellow element, document.body, html]`"); 96 }, "First element to get mouse events with pointer-events css"); 97 98 test(function () { 99 var svg = document.getElementById('squiggle'); 100 var svgRect = svg.getBoundingClientRect(); 101 assert_array_equals(document.elementsFromPoint(svgRect.left + Math.round(svgRect.width/2), 102 svgRect.top + Math.round(svgRect.height/2)), 103 [svg, document.body, document.querySelector('html')], 104 "Should have returned a sequence with [svg, body, html]"); 105 }, "SVG element at x,y"); 106 107 test(function () { 108 var svg = document.getElementById('svg-transform'); 109 var svgRect = svg.getBoundingClientRect(); 110 assert_array_equals(document.elementsFromPoint(svgRect.left + Math.round(svgRect.width/2), 111 svgRect.top + Math.round(svgRect.height/2)), 112 [svg.querySelector("rect"), svg, document.body, document.querySelector('html')], 113 "Should have returned [svg rect, svg, body, html]"); 114 115 var pink = document.getElementById('pink'); 116 var pinkRect = pink.getBoundingClientRect(); 117 assert_array_equals(document.elementsFromPoint(pinkRect.left + Math.round(pinkRect.width/2), 118 pinkRect.top + Math.round(pinkRect.height/2)), 119 [pink, document.body, document.querySelector('html')], 120 "Should have returned a sequence with [pink, body, html]"); 121 122 }, "transformed element at x,y"); 123 124 test(function () { 125 var anotherteal = document.getElementById('anotherteal'); 126 var anothertealRect = anotherteal.getBoundingClientRect(); 127 assert_array_equals(document.elementsFromPoint(anothertealRect.left + Math.round(anothertealRect.width/2), 128 anothertealRect.top + Math.round(anothertealRect.height/2)), 129 [document.body, document.querySelector('html')], 130 "Should have returned the sequence [body, html]"); 131 132 var doc = frames[1].document; 133 assert_array_equals([doc.querySelector('html')], doc.elementsFromPoint(0, 100), 134 "Should have returned the sequence [html]") 135 136 var doc = frames[2].document; 137 doc.removeChild(doc.documentElement); 138 assert_array_equals(doc.elementsFromPoint(0, 0), [], 139 "Should have returned [] as no root element"); 140 141 }, "no hit target at x,y"); 142 143 test(function () { 144 var doc = document.implementation.createHTMLDocument('foo'); 145 assert_array_equals(doc.elementsFromPoint(0, 0), [], 146 "Should have returned []") 147 }, "No viewport available"); 148 done(); 149 } 150 </script>