offsetParent-across-shadow-boundaries.html

<!DOCTYPE html>

<html>

<head>

<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">

<meta name="assert" content="offsetParent should only return nodes that are shadow including ancestor">

<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-htmlelement-offsetparent">

<link rel="help" href="https://dom.spec.whatwg.org/#concept-shadow-including-inclusive-ancestor">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="resources/event-path-test-helpers.js"></script>

</head>

<body>

<div id="log"></div>

<div id="container" style="position: relative"></div>

<script>

const container = document.getElementById('container');

function testOffsetParentInShadowTree(mode) {

    test(function () {

        const host = document.createElement('div');

        container.appendChild(host);

        this.add_cleanup(() => host.remove());

        const shadowRoot = host.attachShadow({mode});

        shadowRoot.innerHTML = '<div id="relativeParent" style="position: relative; padding-left: 100px; padding-top: 70px;"><div id="target"></div></div>';

        const relativeParent = shadowRoot.getElementById('relativeParent');

        assert_true(relativeParent instanceof HTMLDivElement);

        const target = shadowRoot.getElementById('target');

        assert_equals(target.offsetParent, relativeParent);

        assert_equals(target.offsetLeft, 100);

        assert_equals(target.offsetTop, 70);

    }, `offsetParent must return the offset parent in the same shadow tree of ${mode} mode`);

testOffsetParentInShadowTree('open');

testOffsetParentInShadowTree('closed');

function testOffsetParentInNestedShadowTrees(mode) {

    test(function () {

        const outerHost = document.createElement('section');

        container.appendChild(outerHost);

        this.add_cleanup(() => outerHost.remove());

        const outerShadow = outerHost.attachShadow({mode});

        outerShadow.innerHTML = '<section id="outerParent" style="position: absolute; top: 50px; left: 50px;"></section>';

        const innerHost = document.createElement('div');

        outerShadow.firstChild.appendChild(innerHost);

        const innerShadow = innerHost.attachShadow({mode});

        innerShadow.innerHTML = '<div id="innerParent" style="position: relative; padding-left: 60px; padding-top: 40px;"><div id="target"></div></div>';

        const innerParent = innerShadow.getElementById('innerParent');

        const target = innerShadow.getElementById('target');

        assert_true(innerParent instanceof HTMLDivElement);

        assert_equals(target.offsetParent, innerParent);

        assert_equals(target.offsetLeft, 60);

        assert_equals(target.offsetTop, 40);

        outerHost.remove();

    }, `offsetParent must return the offset parent in the same shadow tree of ${mode} mode even when nested`);

testOffsetParentInNestedShadowTrees('open');

testOffsetParentInNestedShadowTrees('closed');

function testOffsetParentOnElementAssignedToSlotInsideOffsetParent(mode) {

    test(function () {

        const host = document.createElement('div');

        host.innerHTML = '<div id="target"></div>'

        container.appendChild(host);

        this.add_cleanup(() => host.remove());

        const shadowRoot = host.attachShadow({mode});

        shadowRoot.innerHTML = '<div style="position: relative; padding-left: 85px; padding-top: 45px;"><slot></slot></div>';

        const target = host.querySelector('#target');

        assert_equals(target.offsetParent, container);

        assert_equals(target.offsetLeft, 85);

        assert_equals(target.offsetTop, 45);

    }, `offsetParent must skip offset parents of an element when the context object is assigned to a slot in a shadow tree of ${mode} mode`);

testOffsetParentOnElementAssignedToSlotInsideOffsetParent('open');

testOffsetParentOnElementAssignedToSlotInsideOffsetParent('closed');

function testOffsetParentOnElementAssignedToSlotInsideNestedOffsetParents(mode) {

    test(function () {

        const host = document.createElement('div');

        host.innerHTML = '<div id="target" style="border:solid 1px blue;">hi</div>';

        const previousBlock = document.createElement('div');

        previousBlock.style.height = '12px';

        container.append(previousBlock, host);

        this.add_cleanup(() => { container.innerHTML = ''; });

        const shadowRoot = host.attachShadow({mode});

        shadowRoot.innerHTML = '<section style="position: relative; margin-left: 20px; margin-top: 100px; background: #ccc"><div style="position: absolute; top: 10px; left: 10px;"><slot></slot></div></section>';

        const target = host.querySelector('#target');

        assert_equals(target.offsetParent, container);

        assert_equals(target.offsetLeft, 30);

        assert_equals(target.offsetTop, 122);

    }, `offsetParent must skip multiple offset parents of an element when the context object is assigned to a slot in a shadow tree of ${mode} mode`);

testOffsetParentOnElementAssignedToSlotInsideNestedOffsetParents('open');

testOffsetParentOnElementAssignedToSlotInsideNestedOffsetParents('closed');

function testOffsetParentOnElementAssignedToSlotInsideNestedShadowTrees(mode) {

    test(function () {

        const outerHost = document.createElement('section');

        outerHost.innerHTML = '<div id="target"></div>';

        container.appendChild(outerHost);

        this.add_cleanup(() => outerHost.remove());

        const outerShadow = outerHost.attachShadow({mode});

        outerShadow.innerHTML = '<section style="position: absolute; top: 40px; left: 50px;"><div id="innerHost"><slot></slot></div></section>';

        const innerShadow = outerShadow.getElementById('innerHost').attachShadow({mode});

        innerShadow.innerHTML = '<div style="position: absolute; top: 200px; margin-left: 100px;"><slot></slot></div>';

        const target = outerHost.querySelector('#target');

        assert_equals(target.offsetParent, container);

        assert_equals(target.offsetLeft, 150);

        assert_equals(target.offsetTop, 240);

        outerHost.remove();

    }, `offsetParent must skip offset parents of an element when the context object is assigned to a slot in nested shadow trees of ${mode} mode`);

testOffsetParentOnElementAssignedToSlotInsideNestedShadowTrees('open');

testOffsetParentOnElementAssignedToSlotInsideNestedShadowTrees('closed');

function testOffsetParentOnElementInsideShadowTreeWithoutOffsetParent(mode) {

    test(function () {

        const outerHost = document.createElement('section');

        container.appendChild(outerHost);

        this.add_cleanup(() => outerHost.remove());

        const outerShadow = outerHost.attachShadow({mode});

        outerShadow.innerHTML = '<div id="innerHost"><div id="target"></div></div>';

        const innerShadow = outerShadow.getElementById('innerHost').attachShadow({mode});

        innerShadow.innerHTML = '<div style="position: absolute; top: 23px; left: 24px;"><slot></slot></div>';

        const target = outerShadow.querySelector('#target');

        assert_equals(target.offsetParent, container);

        assert_equals(target.offsetLeft, 24);

        assert_equals(target.offsetTop, 23);

    }, `offsetParent must find the first offset parent which is a shadow-including ancestor of the context object even some shadow tree of ${mode} mode did not have any offset parent`);

testOffsetParentOnElementInsideShadowTreeWithoutOffsetParent('open');

testOffsetParentOnElementInsideShadowTreeWithoutOffsetParent('closed');

function testOffsetParentOnUnassignedChild(mode) {

    test(function () {

        const host = document.createElement('section');

        host.innerHTML = '<div id="target"></div>';

        this.add_cleanup(() => host.remove());

        container.appendChild(host);

        const shadowRoot = host.attachShadow({mode});

        shadowRoot.innerHTML = '<section style="position: absolute; top: 50px; left: 50px;">content</section>';

        const target = host.querySelector('#target');

        assert_equals(target.offsetParent, null);

        assert_equals(target.offsetLeft, 0);

        assert_equals(target.offsetTop, 0);

    }, `offsetParent must return null on a child element of a shadow host for the shadow tree in ${mode} mode which is not assigned to any slot`);

testOffsetParentOnUnassignedChild('open');

testOffsetParentOnUnassignedChild('closed');

function testOffsetParentOnAssignedChildNotInFlatTree(mode) {

    test(function () {

        const outerHost = document.createElement('section');

        outerHost.innerHTML = '<div id="target"></div>';

        container.appendChild(outerHost);

        this.add_cleanup(() => outerHost.remove());

        const outerShadow = outerHost.attachShadow({mode});

        outerShadow.innerHTML = '<div id="innerHost"><div style="position: absolute; top: 50px; left: 50px;"><slot></slot></div></div>';

        const innerShadow = outerShadow.getElementById('innerHost').attachShadow({mode});

        innerShadow.innerHTML = '<div>content</div>';

        const target = outerHost.querySelector('#target');

        assert_equals(target.offsetParent, null);

        assert_equals(target.offsetLeft, 0);

        assert_equals(target.offsetTop, 0);

    }, `offsetParent must return null on a child element of a shadow host for the shadow tree in ${mode} mode which is not in the flat tree`);

testOffsetParentOnAssignedChildNotInFlatTree('open');

testOffsetParentOnAssignedChildNotInFlatTree('closed');

</script>

</body>

</html>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: