diff options
Diffstat (limited to 'testing/web-platform/tests/cssom-view/elementFromPoint.html')
| -rw-r--r-- | testing/web-platform/tests/cssom-view/elementFromPoint.html | 157 |
1 files changed, 0 insertions, 157 deletions
diff --git a/testing/web-platform/tests/cssom-view/elementFromPoint.html b/testing/web-platform/tests/cssom-view/elementFromPoint.html deleted file mode 100644 index 3ae4a9dbf..000000000 --- a/testing/web-platform/tests/cssom-view/elementFromPoint.html +++ /dev/null @@ -1,157 +0,0 @@ -<!DOCTYPE html> -<title>cssom-view - elementFromPoint</title> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<style> - .size { - width:100px; - height:100px; - } - .overlay { - position:absolute; - top:109px; - pointer-events:none; - } - .purple { - background-color: rebeccapurple; - } - .yellow { - background-color: yellow; - } - .teal { - background-color: teal; - } - .pink { - background-color: pink; - } -</style> -<body> - <div id='purple' class="size purple" > </div> - <div id='yellow' class="size yellow"> </div> - <div id='teal' class="size overlay teal"> </div> - <iframe id=iframe-1 src="iframe.html" style='display:none;position:absolute; left:300px;'></iframe> - <iframe id=iframe-2 src="iframe.html" width="" height=""></iframe> - <iframe id=iframe-3 width="" height=""></iframe> - <svg id=squiggle xmlns="http://www.w3.org/2000/svg" height="98" width="581" viewBox="0 0 581 98"> - <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"> - </path> - </svg> - <svg id=svg-transform width="180" height="200" - xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - - <!-- Now we add a text element and apply rotate and translate to both --> - <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect> - <text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello WPT! </text> - -</svg> - <div id='pink' class='size pink' style='transform: translate(10px)'> </div> - <div id='anotherteal' class='size teal' style='pointer-events:none'>Another teal</div> - <img id="dinos" src="/images/blue-area.png" usemap="#dinos_map" border="0" width="364" height="126"/> - <map id="dinos_map" name="dinos_map"> - <area id="rectG" shape="rect" coords="0,0,90,100" href="#" alt="area 1"/> - <area id="circleO" shape="circle" coords="120,60,30" href="#" alt="area 2"/> - <area id="polyLE" shape="poly" coords="280,0,310,0,360,30,360,90,280,90" href="#" alt="area 3"/> - <script> - setup({explicit_done:true}); - window.onload = function () { - test(function () { - assert_equals(document.elementFromPoint(-1, -1), null, - "both co-ordinates passed in are negative so should have returned a null"); - assert_equals(document.elementFromPoint(-1, -1), null, - "x co-ordinates passed in are negative so should have returned a null"); - assert_equals(document.elementFromPoint(-1, -1), null, - "y co-ordinates passed in are negative so should have returned a null"); - }, "Negative co-ordinates"); - - test(function () { - var viewportX = window.innerWidth; - var viewportY = window.innerHeight; - assert_equals(document.elementFromPoint(viewportX + 100, 10), null, - "X co-ordinates larger than viewport"); - assert_equals(document.elementFromPoint(10, viewportY + 100), null, - "Y co-ordinates larger than viewport"); - assert_equals(document.elementFromPoint(viewportX + 100, viewportY + 100), null, - "X, Y co-ordinates larger than viewport"); - }, "co-ordinates larger than the viewport"); - - test(function () { - var viewportX = window.frames[1].innerWidth; - var viewportY = window.frames[1].innerHeight; - var iframeRect = document.getElementById('iframe-2').getBoundingClientRect(); - assert_equals(null, window.frames[1].document.elementFromPoint(iframeRect.right + viewportX + 100, 10), - "X co-ordinates larger than viewport"); - assert_equals(null, window.frames[1].document.elementFromPoint(10, iframeRect.bottom + viewportY + 100), - "Y co-ordinates larger than viewport"); - assert_equals(null, window.frames[1].document.elementFromPoint(iframeRect.right + viewportX + 100, - iframeRect.bottom + viewportY + 100), - "X, Y co-ordinates larger than viewport"); - }, "co-ordinates larger than the viewport from in iframe"); - - test(function () { - assert_equals(document.elementFromPoint(10, 10), document.getElementById('purple'), - "Should have returned the element with id `purple`"); - }, "Return first element that is the target for hit testing"); - - test(function () { - assert_equals(document.elementFromPoint(10, 120), document.getElementById('yellow'), - "Should have returned the element with id `yellow` as element with `teal` has `pointer-events:none`"); - }, "First element to get mouse events with pointer-events css"); - - test(function () { - var svg = document.getElementById('squiggle'); - var svgRect = svg.getBoundingClientRect(); - assert_equals(document.elementFromPoint(svgRect.left + Math.round(svgRect.width/2), - svgRect.top + Math.round(svgRect.height/2)), - svg, - "Should have returned the line SVG"); - }, "SVG element at x,y"); - - test(function () { - var svg = document.getElementById('svg-transform'); - var svgRect = svg.getBoundingClientRect(); - assert_equals(document.elementFromPoint(svgRect.left + Math.round(svgRect.width/2), - svgRect.top + Math.round(svgRect.height/2)), - svg.querySelector("rect"), - "Should have returned SVG with Hello WPT! that has a transform"); - - var pink = document.getElementById('pink'); - var pinkRect = pink.getBoundingClientRect(); - assert_equals(document.elementFromPoint(pinkRect.left + Math.round(pinkRect.width/2), - pinkRect.top + Math.round(pinkRect.height/2)), - pink, - "Should have returned pink element that has a transform"); - - }, "transformed element at x,y"); - - test(function () { - var anotherteal = document.getElementById('anotherteal'); - var anothertealRect = anotherteal.getBoundingClientRect(); - assert_equals(document.elementFromPoint(anothertealRect.left + Math.round(anothertealRect.width/2), - anothertealRect.top + Math.round(anothertealRect.height/2)), - document.body, - "Should have returned the root"); - - var doc = frames[2].document; - doc.removeChild(doc.documentElement); - assert_equals(doc.elementFromPoint(0, 0), null, - "Should have returned null as no root element"); - }, "no hit target at x,y"); - - test(function () { - var doc = document.implementation.createHTMLDocument('foo'); - assert_equals(doc.elementFromPoint(0, 0), null, - "Should have returned the documentElement for the document") - }, "No viewport available"); - - test(function () { - var area = document.getElementById('rectG'); - var areaRect = area.getBoundingClientRect(); - assert_equals(document.elementFromPoint(areaRect.left + Math.round(areaRect.width/2), - areaRect.top + Math.round(areaRect.height/2)), - area, - "Should have returned the image element"); - }, "Image Maps"); - done(); - } - </script> |