| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <script src="../../resources/js-test.js"></script> |
| 3 <style> |
| 4 html, body { |
| 5 margin: 0; |
| 6 padding: 0; |
| 7 } |
| 8 body { |
| 9 height: 500px; |
| 10 } |
| 11 #simpleDiv { |
| 12 width: 200px; |
| 13 height: 200px; |
| 14 background-color: rgba(0,0,255,0.5); |
| 15 } |
| 16 #divWithPseudo { |
| 17 position: absolute; |
| 18 left: 50px; |
| 19 top: 50px; |
| 20 width: 100px; |
| 21 height: 100px; |
| 22 background-color: rgba(255,0,0,0.5); |
| 23 } |
| 24 #divWithPseudo::before { |
| 25 position: absolute; |
| 26 left: 20px; |
| 27 top: 20px; |
| 28 width: 100px; |
| 29 height: 100px; |
| 30 content: "::before"; |
| 31 background-color: rgba(255,0,0,0.5); |
| 32 z-index: 9999; |
| 33 } |
| 34 #divBetweenPseudo { |
| 35 position: absolute; |
| 36 left: 100px; |
| 37 top: 100px; |
| 38 width: 100px; |
| 39 height: 100px; |
| 40 background-color: rgba(0,255,0,0.5); |
| 41 } |
| 42 #withMargins { |
| 43 margin-top: -15px; |
| 44 width: 200px; |
| 45 height: 200px; |
| 46 background-color: rgba(0,0,0,0.5); |
| 47 } |
| 48 #inlineSpan { |
| 49 float: right; |
| 50 background-color: yellow; |
| 51 width: 100px; |
| 52 height: 1em; |
| 53 } |
| 54 #noPointerEvents { |
| 55 position: absolute; |
| 56 left: 50px; |
| 57 top: 50px; |
| 58 width: 100px; |
| 59 height: 300px; |
| 60 background-color: rgba(0,0,0,0.1); |
| 61 pointer-events: none; |
| 62 } |
| 63 #threeD { |
| 64 position: absolute; |
| 65 transform: translate3d(-100px, -100px, 10px); |
| 66 left: 140px; |
| 67 top: 140px; |
| 68 width: 200px; |
| 69 height: 50px; |
| 70 background-color: rgba(255,255,255,0.5); |
| 71 } |
| 72 </style> |
| 73 <div id="simpleDiv"></div> |
| 74 <div id="divWithPseudo"></div> |
| 75 <div id="divBetweenPseudo"></div> |
| 76 <div id="withMargins"><span id="inlineSpan"></span></div> |
| 77 <div id="noPointerEvents"></div> |
| 78 <div id="threeD"></div> |
| 79 <div id="console"></div> |
| 80 <script> |
| 81 if (window.testRunner) |
| 82 testRunner.dumpAsText(); |
| 83 |
| 84 function assertElementInSequence(sequence, value, expectedInSequence) { |
| 85 if (expectedInSequence) |
| 86 shouldBeGreaterThanOrEqual(sequence + '.indexOf(' + value + ')', '0'); |
| 87 else |
| 88 shouldBeEqualToNumber(sequence + '.indexOf(' + value + ')', -1); |
| 89 } |
| 90 |
| 91 // Iterate through each of the elements and verify that they are present in |
| 92 // elementsFromPoint(x, y) where (x, y) is any of the four corners. |
| 93 ["simpleDiv", "divWithPseudo", "divBetweenPseudo", "withMargins", "inlineSpan",
"noPointerEvents", "threeD"].forEach(function(id) { |
| 94 var element = document.getElementById(id); |
| 95 var shouldReceivePointerEvents = window.getComputedStyle(element).pointerEve
nts != "none"; |
| 96 var rect = element.getBoundingClientRect(); |
| 97 |
| 98 var topLeft = (rect.left + 1) + ', ' + (rect.top + 1); |
| 99 var topRight = (rect.right - 1) + ', ' + (rect.top + 1); |
| 100 var bottomLeft = (rect.left + 1) + ', ' + (rect.bottom - 1); |
| 101 var bottomRight = (rect.right - 1) + ', ' + (rect.bottom - 1); |
| 102 assertElementInSequence('document.elementsFromPoint(' + topLeft + ')', id, s
houldReceivePointerEvents); |
| 103 assertElementInSequence('document.elementsFromPoint(' + topRight + ')', id,
shouldReceivePointerEvents); |
| 104 assertElementInSequence('document.elementsFromPoint(' + bottomLeft + ')', id
, shouldReceivePointerEvents); |
| 105 assertElementInSequence('document.elementsFromPoint(' + bottomRight + ')', i
d, shouldReceivePointerEvents); |
| 106 }); |
| 107 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 869813003:
Implement elementsFromPoint (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master