sousa-gecko/testing/web-platform/tests/custom-elements/registries/element-mutation.html

<!DOCTYPE html>
<title>Tests the registry assignment during element mutation</title>
<meta name="author" title="Jayson Chen" href="mailto:jaysonchen@microsoft.com"></meta>
<link rel="help" href="https://wicg.github.io/webcomponents/proposals/Scoped-Custom-Element-Registries">
<link rel="help" href="https://github.com/WICG/webcomponents/issues/923">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<body>
<div id="host">
    <div id="shadow-host-1">
        <template shadowrootmode="open" shadowrootclonable="true" shadowrootcustomelementregistry>
            <div id="shadow-host-1-child"></div>
        </template>
    </div>
    <div id="shadow-host-2">
        <template shadowrootmode="open" shadowrootclonable="true" shadowrootcustomelementregistry>
            <div id="shadow-host-2-child"></div>
        </template>
    </div>
</div>

<script>

function runTests(mutation, mutationName) {
    test(() => {
        const registry = new CustomElementRegistry;

        const element = document.createElement('new-element');
        assert_equals(element.customElementRegistry, window.customElements);

        mutation(document.body, element);
        const shadow = document.createElement('div').attachShadow({mode: 'open', customElementRegistry: registry})
        mutation(shadow, element);
        assert_not_equals(element.customElementRegistry, registry);

        mutation(document.body, element);
        assert_equals(element.customElementRegistry, window.customElements);
    }, "An element with global registry should not change its registry when run " + mutationName + " into a shadow tree with scoped registry.")

    test(() => {
        const clone = host.cloneNode(true);
        const shadowRoot1 = clone.querySelector('#shadow-host-1').shadowRoot;
        const element = shadowRoot1.querySelector('#shadow-host-1-child');

        const registry1 = new CustomElementRegistry;
        registry1.initialize(shadowRoot1);
        assert_equals(element.customElementRegistry, registry1);

        mutation(document.querySelector('#host'), element);
        assert_equals(element.customElementRegistry, registry1);
    }, "An element with scoped registry should not change its registry when run " + mutationName + " out of the shadow tree.")

    test(() => {
        const clone = host.cloneNode(true);
        const shadowRoot1 = clone.querySelector('#shadow-host-1').shadowRoot;
        const shadowRoot2 = clone.querySelector('#shadow-host-2').shadowRoot;
        const element = shadowRoot1.querySelector('#shadow-host-1-child');

        const registry1 = new CustomElementRegistry;
        const registry2 = new CustomElementRegistry;
        registry1.initialize(shadowRoot1);
        registry2.initialize(shadowRoot2);
        assert_equals(element.customElementRegistry, registry1);

        mutation(shadowRoot2, element);
        assert_equals(element.customElementRegistry, registry1);
    }, "An element with scoped registry should not change its registry when run " + mutationName + " into another shadow tree with different scoped registry.")

    test(() => {
        const registry = new CustomElementRegistry;
        const host = document.createElement('div');
        host.attachShadow({mode: 'open', customElementRegistry: registry});
        const child = document.createElement('div');
        assert_equals(child.customElementRegistry, window.customElements,
            'Before insertion, child should have the global registry');
        mutation(host.shadowRoot, child);
        assert_equals(child.customElementRegistry, window.customElements,
            'After insertion into scoped shadow root, child should retain the global registry');
        child.remove();
        assert_equals(child.customElementRegistry, window.customElements,
            'After removal from scoped shadow root, child should still have the global registry');
    }, "A freshly created element should preserve global registry after " + mutationName + " into and removal from a scoped shadow root.")

    test(() => {
        const registryA = new CustomElementRegistry;
        const registryB = new CustomElementRegistry;
        const hostA = document.createElement('div');
        hostA.attachShadow({mode: 'open', customElementRegistry: registryA});
        const hostB = document.createElement('div');
        hostB.attachShadow({mode: 'open', customElementRegistry: registryB});
        const child = document.createElement('div');
        mutation(hostA.shadowRoot, child);
        assert_equals(child.customElementRegistry, window.customElements,
            'After insertion into shadow root A, child should retain the global registry');
        mutation(hostB.shadowRoot, child);
        assert_equals(child.customElementRegistry, window.customElements,
            'After moving to shadow root B, child should still retain the global registry');
    }, "A freshly created element should preserve global registry when run " + mutationName + " between scoped shadow roots.")
};

runTests(function (parent, child) { parent.append(child); }, "append");
runTests(function (parent, child) { parent.appendChild(child); }, "appendChild");
runTests(function (parent, child) { parent.prepend(child); }, "prepend");

</script>
</body>