| OLD | NEW |
|---|
| (Empty) |
| 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" > </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; l
eft: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" vi
ewBox="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.12
4 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)'> </di
v> | |
| 49 <div id='anotherteal' class='size teal' style='pointer-events:none'>Another te
al</div> | |
| 50 <script> | |
| 51 setup({explicit_done:true}); | |
| 52 window.onload = function () { | |
| 53 test(function () { | |
| 54 assert_equals(document.elementFromPoint(-1, -1), null, | |
| 55 "both co-ordinates passed in are negative so should have returne
d a null"); | |
| 56 assert_equals(document.elementFromPoint(-1, -1), null, | |
| 57 "x co-ordinates passed in are negative so should have returned a
null"); | |
| 58 assert_equals(document.elementFromPoint(-1, -1), null, | |
| 59 "y co-ordinates passed in are negative so should have returned a
null"); | |
| 60 }, "Negative co-ordinates"); | |
| 61 | |
| 62 test(function () { | |
| 63 var viewportX = window.innerWidth; | |
| 64 var viewportY = window.innerHeight; | |
| 65 assert_equals(document.elementFromPoint(viewportX + 100, 10), null
, | |
| 66 "X co-ordinates larger than viewport"); | |
| 67 assert_equals(document.elementFromPoint(10, viewportY + 100), null
, | |
| 68 "Y co-ordinates larger than viewport"); | |
| 69 assert_equals(document.elementFromPoint(viewportX + 100, viewportY
+ 100), null, | |
| 70 "X, Y co-ordinates larger than viewport"); | |
| 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').getBoundingCl
ientRect(); | |
| 77 assert_equals(null, window.frames[1].document.elementFromPoint(ifr
ameRect.right + viewportX + 100, 10), | |
| 78 "X co-ordinates larger than viewport"); | |
| 79 assert_equals(null, window.frames[1].document.elementFromPoint(10,
iframeRect.bottom + viewportY + 100), | |
| 80 "Y co-ordinates larger than viewport"); | |
| 81 assert_equals(null, window.frames[1].document.elementFromPoint(ifr
ameRect.right + viewportX + 100, | |
| 82 ifr
ameRect.bottom + viewportY + 100), | |
| 83 "X, Y co-ordinates larger than viewport"); | |
| 84 }, "co-ordinates larger than the viewport from in iframe"); | |
| 85 | |
| 86 test(function () { | |
| 87 assert_equals(document.elementFromPoint(10, 10), document.getEleme
ntById('purple'), | |
| 88 "Should have returned the element with id `purple`"); | |
| 89 }, "Return first element that is the target for hit testing"); | |
| 90 | |
| 91 test(function () { | |
| 92 assert_equals(document.elementFromPoint(10, 120), document.getElem
entById('yellow'), | |
| 93 "Should have returned the element with id `yellow` as element wi
th `teal` has `pointer-events:none`"); | |
| 94 }, "First element to get mouse events with pointer-events css"); | |
| 95 | |
| 96 test(function () { | |
| 97 var svg = document.getElementById('squiggle'); | |
| 98 var svgRect = svg.getBoundingClientRect(); | |
| 99 assert_equals(document.elementFromPoint(svgRect.left + Math.round(s
vgRect.width/2), | |
| 100 svgRect.top + Math.round(sv
gRect.height/2)), | |
| 101 svg, | |
| 102 "Should have returned the line SVG"); | |
| 103 }, "SVG element at x,y"); | |
| 104 | |
| 105 test(function () { | |
| 106 var svg = document.getElementById('svg-transform'); | |
| 107 var svgRect = svg.getBoundingClientRect(); | |
| 108 assert_equals(document.elementFromPoint(svgRect.left + Math.round(
svgRect.width/2), | |
| 109 svgRect.top + Math.round(s
vgRect.height/2)), | |
| 110 svg.querySelector("rect"), | |
| 111 "Should have returned SVG with Hello WPT! that has a
transform"); | |
| 112 | |
| 113 var pink = document.getElementById('pink'); | |
| 114 var pinkRect = pink.getBoundingClientRect(); | |
| 115 assert_equals(document.elementFromPoint(pinkRect.left + Math.round
(pinkRect.width/2), | |
| 116 pinkRect.top + Math.round(
pinkRect.height/2)), | |
| 117 pink, | |
| 118 "Should have returned pink element that has a transf
orm"); | |
| 119 | |
| 120 }, "transformed element at x,y"); | |
| 121 | |
| 122 test(function () { | |
| 123 var anotherteal = document.getElementById('anotherteal'); | |
| 124 var anothertealRect = anotherteal.getBoundingClientRect(); | |
| 125 assert_equals(document.elementFromPoint(anothertealRect.left + Math.
round(anothertealRect.width/2), | |
| 126 anothertealRect.top + Math.r
ound(anothertealRect.height/2)), | |
| 127 document.body, | |
| 128 "Should have returned the root"); | |
| 129 | |
| 130 var doc = frames[2].document; | |
| 131 doc.removeChild(doc.documentElement); | |
| 132 assert_equals(doc.elementFromPoint(0, 0), null, | |
| 133 "Should have returned null as no root element"); | |
| 134 }, "no hit target at x,y"); | |
| 135 | |
| 136 test(function () { | |
| 137 var doc = document.implementation.createHTMLDocument('foo'); | |
| 138 assert_equals(doc.elementFromPoint(0, 0), null, | |
| 139 "Should have returned the documentElement for the docu
ment") | |
| 140 }, "No viewport available"); | |
| 141 done(); | |
| 142 } | |
| 143 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1461663004:
update-w3c-deps import using blink de465d949baa19843653ac320d1f2a7b608e35cd: (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master