wpt / css / cssom-view / elementsFromPoint-simple.html

Status: FAIL | Duration: 59ms | Subtests: 0/6 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (0/6)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
elementsFromPoint for each corner of a simple divFAILassert_equals: document.elementsFromPoint(1,199) expected "DIV#withMargin, DIV#simpleDiv, BODY, HTML" but got "DIV#withMargin, BODY, HTML"
elementsFromPoint for each corner of a div that has a pseudo-elementFAILassert_equals: document.elementsFromPoint(51,51) expected "DIV#threeD, DIV#divWithPseudo, DIV#simpleDiv, BODY, HTML" but got "DIV#divWithPseudo, BODY, HTML"
elementsFromPoint for each corner of a div that is between another div and its pseudo-elementFAILassert_equals: document.elementsFromPoint(101,101) expected "DIV#divWithPseudo, DIV#divBetweenPseudo, DIV#divWithPseudo, DIV#simpleDiv, BODY, HTML" but got "DIV#divWithPseudo, BODY, HTML"
elementsFromPoint for each corner of a div that has a marginFAILassert_equals: document.elementsFromPoint(1,186) expected "DIV#withMargin, DIV#simpleDiv, BODY, HTML" but got "DIV#withMargin, BODY, HTML"
elementsFromPoint for each corner of a div with pointer-events:noneFAILassert_equals: document.elementsFromPoint(51,51) expected "DIV#threeD, DIV#divWithPseudo, DIV#simpleDiv, BODY, HTML" but got "DIV#divWithPseudo, BODY, HTML"
elementsFromPoint for each corner of a div with a 3d transformFAILassert_equals: document.elementsFromPoint(141,141) expected "DIV#threeD, DIV#simpleDiv, BODY, HTML" but got "DIV#divWithPseudo, BODY, HTML"

/css/cssom-view/elementsFromPoint-simple.html

<!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>