<!DOCTYPE HTML> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.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); } #withMargin { 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="withMargin"><span id="inlineSpan"></span></div> <div id="noPointerEvents"></div> <div id="threeD"></div> <script> var body = document.body; var html = document.documentElement; test(function() { checkElementsFromPointFourCorners('document', 'simpleDiv', [simpleDiv, body, html], [simpleDiv, body, html], [withMargin, simpleDiv, body, html], [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html]); }, "elementsFromPoint for each corner of a simple div"); test(function() { checkElementsFromPointFourCorners('document', 'divWithPseudo', [threeD, divWithPseudo, simpleDiv, body, html], [threeD, divWithPseudo, simpleDiv, body, html], [divWithPseudo, simpleDiv, body, html], [divWithPseudo, divBetweenPseudo, divWithPseudo, simpleDiv, body, html]); }, "elementsFromPoint for each corner of a div that has a pseudo-element"); test(function() { checkElementsFromPointFourCorners('document', 'divBetweenPseudo', [divWithPseudo, divBetweenPseudo, divWithPseudo, simpleDiv, body, html], [divBetweenPseudo, simpleDiv, body, html], [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html], [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html]); }, "elementsFromPoint for each corner of a div that is between another div and its pseudo-element"); test(function() { checkElementsFromPointFourCorners('document', 'withMargin', [withMargin, simpleDiv, body, html], [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html], [withMargin, body, html], [withMargin, body, html]); }, "elementsFromPoint for each corner of a div that has a margin"); test(function() { checkElementsFromPointFourCorners('document', 'noPointerEvents', [threeD, divWithPseudo, simpleDiv, body, html], [threeD, divWithPseudo, simpleDiv, body, html], [withMargin, body, html], [withMargin, body, html]); }, "elementsFromPoint for each corner of a div with pointer-events:none"); test(function() { checkElementsFromPointFourCorners('document', 'threeD', [threeD, simpleDiv, body, html], [threeD, body, html], [threeD, simpleDiv, body, html], [threeD, body, html]); }, "elementsFromPoint for each corner of a div with a 3d transform"); </script>