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

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

TestTest SourceSubtests (0/6)

Data from commit:
1884860 Copy-on-write style attribute blocks that are in the rule tree (#831) (2026-09-02)

SubtestStatusMessage
elementsFromPoint for a point inside two rectsFAILassert_equals: document.elementsFromPoint(125,125) expected "RECT#topLeftRect3, RECT#topLeftRect1, SVG#svg, DIV#sandbox, BODY, HTML" but got "SVG#svg, DIV#sandbox, BODY, HTML"
elementsFromPoint for a point inside two rects that are inside an svg element with pointer-events: bounding-boxFAILassert_equals: document.elementsFromPoint(325,125) expected "RECT#topRightRect2, RECT#topRightRect1, SVG#topRightSvg, SVG#svg, DIV#sandbox, BODY, HTML" but got "SVG#svg, DIV#sandbox, BODY, HTML"
elementsFromPoint for a point inside two rects that are inside a <g>FAILassert_equals: document.elementsFromPoint(225,225) expected "RECT#middleRect2, RECT#middleRect1, G#middleG2, G#middleG1, SVG#svg, DIV#sandbox, BODY, HTML" but got "SVG#svg, DIV#sandbox, BODY, HTML"
elementsFromPoint for a point inside two imagesFAILassert_equals: document.elementsFromPoint(125,325) expected "IMAGE#bottomLeftImage2, IMAGE#bottomLeftImage1, G#bottomLeftG, SVG#svg, DIV#sandbox, BODY, HTML" but got "SVG#svg, DIV#sandbox, BODY, HTML"
elementsFromPoint for a point inside transformed rects and <g>FAILassert_equals: document.elementsFromPoint(325,325) expected "RECT#bottomRightRect2, RECT#bottomRightRect1, G#bottomRightG2, G#bottomRightG1, SVG#svg, DIV#sandbox, BODY, HTML" but got "SVG#svg, DIV#sandbox, BODY, HTML"
elementsFromPoint for a point inside a foreignObjectFAILassert_equals: document.elementsFromPoint(350,250) expected "DIV#foDiv, FOREIGNOBJECT#fo, SVG#svg, DIV#sandbox, BODY, HTML" but got "SVG#svg, DIV#sandbox, BODY, HTML"

/css/cssom-view/elementsFromPoint-svg.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;
}
#svg {
    margin: 100px;
    background-color: rgba(0,180,0,0.2);
}
rect {
    fill: rgba(180,0,0,0.2);
}
#topRightSvg, #middleG1, #middleG2, #bottomLeftG, #bottomRightG1, #bottomRightG2 {
    pointer-events: bounding-box;
}
#topLeftRect2NoHitTest {
    pointer-events: none;
}
</style>
<div id='sandbox'>
    <svg id='svg' width='300' height='300'>
        <rect id='topLeftRect1' x='5' y='5' width='90' height='90'/>
        <rect id='topLeftRect2NoHitTest' x='10' y='10' width='80' height='80'/>
        <rect id='topLeftRect3' x='15' y='15' width='70' height='70'/>

        <foreignObject id="fo" x="210" y="110" width="80" height="80">
            <div id="foDiv" style="width: 80px; height: 80px; background-color: rgba(180,0,0,0.2)"></div>
        </foreignObject>

        <svg id='topRightSvg' x='205' y='5' width='90' height='90'>
            <rect id='topRightRect1' x='5' y='5' width='80' height='80'/>
            <rect id='topRightRect2' x='10' y='10' width='70' height='70'/>
        </svg>

        <g id='middleG1'>
            <g id='middleG2'>
                <rect id='middleRect1' x='105' y='105' width='90' height='90'/>
                <rect id='middleRect2' x='110' y='110' width='80' height='80'/>
            </g>
        </g>

        <g id='bottomLeftG'>
            <image id='bottomLeftImage1' x='5' y='205' width='90' height='90' xlink:href='data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="rgba(180,0,0,0.2)"/></svg>'/>
            <image id='bottomLeftImage2' x='10' y='210' width='80' height='80' xlink:href='data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><rect width="100%" height="100%" fill="rgba(180,0,0,0.2)"/></svg>'/>
        </g>

        <g id='bottomRightG1' transform='translate(300, 300)'>
            <g id='bottomRightG2' transform='translate(-100, -100)'>
                <rect id='bottomRightRect1' x='5' y='5' width='90' height='90'/>
                <rect id='bottomRightRect2' x='110' y='110' width='80' height='80' transform='translate(-100, -100)'/>
            </g>
        </g>
    </svg>
</div>
<script>
test(function() {
    assertElementsFromPoint('document', 125, 125,
        [topLeftRect3, topLeftRect1, svg, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for a point inside two rects');

test(function() {
    assertElementsFromPoint('document', 325, 125,
        [topRightRect2, topRightRect1, topRightSvg, svg, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for a point inside two rects that are inside an svg element with pointer-events: bounding-box');

test(function() {
    assertElementsFromPoint('document', 225, 225,
        [middleRect2, middleRect1, middleG2, middleG1, svg, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for a point inside two rects that are inside a <g>');

test(function() {
    assertElementsFromPoint('document', 125, 325,
        [bottomLeftImage2, bottomLeftImage1, bottomLeftG, svg, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for a point inside two images');

test(function() {
    assertElementsFromPoint('document', 325, 325,
        [bottomRightRect2, bottomRightRect1, bottomRightG2, bottomRightG1, svg, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for a point inside transformed rects and <g>');

test(function() {
    assertElementsFromPoint('document', 350, 250,
        [foDiv, fo, svg, sandbox, document.body, document.documentElement]);
}, 'elementsFromPoint for a point inside a foreignObject');
</script>