| <!DOCTYPE HTML> |
| <script src="../../../resources/js-test.js"></script> |
| <script src="resources/elementsFromPoint.js"></script> |
| <style> |
| html, body { |
| margin: 0; |
| padding: 0; |
| } |
| body { |
| height: 500px; |
| } |
| #simpleDiv { |
| width: 200px; |
| height: 200px; |
| background-color: rgba(0,0,255,0.5); |
| } |
| #divWithPseudo { |
| position: absolute; |
| left: 50px; |
| top: 50px; |
| width: 100px; |
| height: 100px; |
| background-color: rgba(255,0,0,0.5); |
| } |
| #divWithPseudo::before { |
| position: absolute; |
| left: 20px; |
| top: 20px; |
| width: 100px; |
| height: 100px; |
| content: "::before"; |
| background-color: rgba(255,0,0,0.5); |
| z-index: 9999; |
| } |
| #divBetweenPseudo { |
| position: absolute; |
| left: 100px; |
| top: 100px; |
| width: 100px; |
| height: 100px; |
| background-color: rgba(0,255,0,0.5); |
| } |
| #withMargins { |
| margin-top: -15px; |
| width: 200px; |
| height: 200px; |
| background-color: rgba(0,0,0,0.5); |
| } |
| #inlineSpan { |
| float: right; |
| background-color: yellow; |
| width: 100px; |
| height: 1em; |
| } |
| #noPointerEvents { |
| position: absolute; |
| left: 50px; |
| top: 50px; |
| width: 100px; |
| height: 300px; |
| background-color: rgba(0,0,0,0.1); |
| pointer-events: none; |
| } |
| #threeD { |
| position: absolute; |
| transform: translate3d(-100px, -100px, 10px); |
| left: 140px; |
| top: 140px; |
| width: 200px; |
| height: 50px; |
| background-color: rgba(255,255,255,0.5); |
| } |
| </style> |
| <div id="simpleDiv"></div> |
| <div id="divWithPseudo"></div> |
| <div id="divBetweenPseudo"></div> |
| <div id="withMargins"><span id="inlineSpan"></span></div> |
| <div id="noPointerEvents"></div> |
| <div id="threeD"></div> |
| <div id="console"></div> |
| <script> |
| window.jsTestIsAsync = true; |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| if (window.internals) |
| internals.settings.setMockScrollbarsEnabled(true); |
| |
| onload = function() { |
| // Iterate through each of the elements and verify that they are present in |
| // elementsFromPoint(x, y) where (x, y) is any of the four corners. |
| ['simpleDiv', 'divWithPseudo', 'divBetweenPseudo', 'withMargins', 'inlineSpan', 'noPointerEvents', 'threeD'].forEach(function(id) { |
| checkElementsFromPointFourCorners('document', 'document.getElementById(\'' + id + '\')'); |
| }); |
| |
| // Check ordering of results. |
| var divWithPseudoRect = document.getElementById('divWithPseudo').getBoundingClientRect(); |
| assertElementsFromPoint( |
| 'document.elementsFromPoint(' + (divWithPseudoRect.left + 1) + ', ' + (divWithPseudoRect.top + 1) + ')', |
| [threeD, divWithPseudo, simpleDiv, document.body, document.documentElement]); |
| assertElementsFromPoint( |
| 'document.elementsFromPoint(' + (divWithPseudoRect.right - 1) + ', ' + (divWithPseudoRect.bottom - 1) + ')', |
| [divWithPseudo, divBetweenPseudo, divWithPseudo, simpleDiv, document.body, document.documentElement]); |
| |
| finishJSTest(); |
| } |
| </script> |
