wpt/custom-elements/registries/element-mutation.html at e0aabe6e4ac0564212c534b7f50111c0bb85af82 · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!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>

<template id="template">
    <div id="template-host-1">
        <template shadowrootmode="open" shadowrootclonable><x-foo></x-foo></template>
    </div>
    <div id="template-host-2">
        <template shadowrootmode="open" shadowrootclonable shadowrootcustomelementregistry><x-foo></x-foo></template>
    </div>
</template>

<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.")
};

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

test(() => {
    customElements.define('x-foo', class extends HTMLElement {});
    const template = document.getElementById('template');
    document.body.append(template.content.cloneNode(true));
    assert_equals(document.querySelector('#template-host-1').shadowRoot.querySelector('x-foo').customElementRegistry, customElements);
    assert_equals(document.querySelector('#template-host-2').shadowRoot.querySelector('x-foo').customElementRegistry, null);
}, "Declarative shadow DOM with shadowrootcustomelementregistry attribute without registry initialized should remain null registry after adoption.")

</script>
</body>