elementsFromPoint-simple.html | Explore in Territory

<!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();

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>
chromium/third_party/blink/web_tests/fast/dom/elementsFromPoint/elementsFromPoint-simple.html
