commit 32c704ad26f365712ad0d1e808da91fbea340b59
parent dfec8f68b17fb710acc53b43db057784d228008a
Author: Jayson Chen <jaysonchen1127@gmail.com>
Date: Tue, 21 Oct 2025 10:30:29 +0000
Bug 1994943 [wpt PR 55367] - Add tests to verify scoped registry immutability, a=testonly
Automatic update from web-platform-tests
Add tests to verify scoped registry immutability (#55367)
* Add tests to verify registry immutability
* Address comments
* Address lint errors
---------
Co-authored-by: Jayson Chen <jaysonchen@microsoft.com>
--
wpt-commits: cb70d186b49c896b3aebc6a86a42d31e00fb3ad7
wpt-pr: 55367
Diffstat:
2 files changed, 94 insertions(+), 19 deletions(-)
diff --git a/testing/web-platform/tests/custom-elements/registries/element-mutation.html b/testing/web-platform/tests/custom-elements/registries/element-mutation.html
@@ -0,0 +1,70 @@
+<!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>
+
+test(() => {
+ const registry = new CustomElementRegistry;
+
+ const element = document.createElement('new-element');
+ assert_equals(element.customElementRegistry, window.customElements);
+
+ document.body.appendChild(element);
+ const shadow = document.createElement('div').attachShadow({mode: 'open', customElementRegistry: registry})
+ shadow.appendChild(element)
+ assert_not_equals(element.customElementRegistry, registry);
+
+ document.body.appendChild(element)
+ assert_equals(element.customElementRegistry, window.customElements);
+}, "An element with global registry should not change its registry when moved 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);
+
+ document.querySelector('#host').appendChild(element);
+ assert_equals(element.customElementRegistry, registry1);
+}, "An element with scoped registry should not change its registry when moved 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);
+
+ shadowRoot2.appendChild(element);
+ assert_equals(element.customElementRegistry, registry1);
+}, "An element with scoped registry should not change its registry when moved into another shadow tree with different scoped registry.")
+
+</script>
+</body>
diff --git a/testing/web-platform/tests/custom-elements/registries/scoped-registry-define-upgrade-criteria.html b/testing/web-platform/tests/custom-elements/registries/scoped-registry-define-upgrade-criteria.html
@@ -32,13 +32,18 @@ function nextCustomElementName() {
return `test-element-${++definitionCount}`;
}
+function insertNewElementIntoShadow(shadow, name) {
+ shadow.innerHTML = `<${name}></${name}>`;
+ return shadow.querySelector(name);
+}
+
test(t => {
const name = nextCustomElementName();
document.body.appendChild(document.createElement(name));
const registry = new CustomElementRegistry;
const shadow = attachShadowForTest(t, registry);
- shadow.appendChild(document.createElement(name));
+ insertNewElementIntoShadow(shadow, name);
class TestElement extends HTMLElement {};
customElements.define(name, TestElement);
@@ -68,10 +73,10 @@ test(t => {
const registry = new CustomElementRegistry;
const shadow1 = attachShadowForTest(t, registry);
- shadow1.appendChild(document.createElement(name));
+ insertNewElementIntoShadow(shadow1, name);
const shadow2 = attachShadowForTest(t, registry);
- shadow2.appendChild(document.createElement(name));
+ insertNewElementIntoShadow(shadow2, name);
class TestElement extends HTMLElement {};
registry.define(name, TestElement);
@@ -86,7 +91,7 @@ test(t => {
const registry = new CustomElementRegistry;
const shadow = attachShadowForTest(t, registry);
- shadow.appendChild(document.createElement(name));
+ insertNewElementIntoShadow(shadow, name);
class TestElement extends HTMLElement {};
registry.define(name, TestElement);
@@ -100,13 +105,13 @@ test(t => {
const registry = new CustomElementRegistry;
const shadow1 = attachShadowForTest(t, registry);
- shadow1.appendChild(document.createElement(name));
+ insertNewElementIntoShadow(shadow1, name);
const shadow2 = attachShadowForTest(t, new CustomElementRegistry);
- shadow2.appendChild(document.createElement(name));
+ insertNewElementIntoShadow(shadow2, name);
const shadow3 = attachShadowForTest(t);
- shadow3.appendChild(document.createElement(name));
+ insertNewElementIntoShadow(shadow3, name);
class TestElement extends HTMLElement {};
registry.define(name, TestElement);
@@ -127,15 +132,15 @@ test(t => {
class TestElement extends HTMLElement {};
customElements.define(name, TestElement);
- assert_false(node instanceof TestElement);
-}, 'Adding definition to global registry should not upgrade nodes no longer using the registry');
+ assert_true(node instanceof TestElement);
+}, 'Adding definition to global registry should upgrade nodes even after the node is moved into a separate shadow tree.');
test(t => {
const name = nextCustomElementName();
const registry = new CustomElementRegistry;
const shadow1 = attachShadowForTest(t, registry);
- const node = shadow1.appendChild(document.createElement(name));
+ const node = insertNewElementIntoShadow(shadow1, name);
const shadow2 = attachShadowForTest(t, new CustomElementRegistry);
shadow2.appendChild(node);
@@ -143,20 +148,20 @@ test(t => {
class TestElement extends HTMLElement {};
registry.define(name, TestElement);
- assert_false(node instanceof TestElement);
-}, 'Adding definition to scoped registry should not upgrade nodes no longer using the registry');
+ assert_true(node instanceof TestElement);
+}, 'Adding definition to scoped registry should upgrade nodes even after the node is moved to a separate shadow tree using a different registry.');
test(t => {
const name = nextCustomElementName();
const registry = new CustomElementRegistry;
const shadow1 = attachShadowForTest(t, registry);
- const node1 = shadow1.appendChild(document.createElement(name));
+ const node1 = insertNewElementIntoShadow(shadow1, name);
const iframe = createIFrameForTest(t);
const host2 = iframe.contentDocument.createElement('div');
const shadow2 = host2.attachShadow({mode: 'open', customElementRegistry: registry});
- const node2 = shadow2.appendChild(iframe.contentDocument.createElement(name));
+ const node2 = insertNewElementIntoShadow(shadow2, name);
iframe.contentDocument.body.appendChild(host2);
class TestElement extends HTMLElement {};
@@ -176,7 +181,7 @@ test(t => {
const host = newWindow.document.createElement('div');
const shadow = host.attachShadow({mode: 'open', customElementRegistry: registry});
- const node = shadow.appendChild(newWindow.document.createElement(name));
+ const node = insertNewElementIntoShadow(shadow, name);
newWindow.document.body.appendChild(host);
class TestElement extends HTMLElement {};
@@ -190,7 +195,7 @@ test(t => {
const registry = new CustomElementRegistry;
const shadow = attachShadowForTest(t, registry);
- const node = shadow.appendChild(document.createElement(name));
+ const node = insertNewElementIntoShadow(shadow, name);
shadow.host.remove();
class TestElement extends HTMLElement {};
@@ -206,7 +211,7 @@ test(t => {
const doc = document.implementation.createHTMLDocument();
const host = doc.createElement('div');
const shadow = host.attachShadow({mode: 'open', registry});
- const node = shadow.appendChild(doc.createElement(name));
+ const node = insertNewElementIntoShadow(shadow, name);
doc.body.appendChild(host);
class TestElement extends HTMLElement {};
@@ -222,7 +227,7 @@ test(t => {
const registry = new CustomElementRegistry;
const host = iframe.contentDocument.createElement('div');
const shadow = host.attachShadow({mode: 'open', registry});
- const node = shadow.appendChild(iframe.contentDocument.createElement(name));
+ const node = insertNewElementIntoShadow(shadow, name);
iframe.contentDocument.body.appendChild(host);
iframe.remove();
@@ -241,7 +246,7 @@ promise_test(async t => {
const host = newWindow.document.createElement('div');
const shadow = host.attachShadow({mode: 'open', registry: window.customElements});
- const node = shadow.appendChild(newWindow.document.createElement(name));
+ const node = insertNewElementIntoShadow(shadow, name);
newWindow.document.body.appendChild(host);
newWindow.close();
