summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/custom-elements/scoped-registry
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 19:33:14 +0000
commit36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/custom-elements/scoped-registry
parentInitial commit. (diff)
downloadfirefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/custom-elements/scoped-registry')
-rw-r--r--testing/web-platform/tests/custom-elements/scoped-registry/CustomElementRegistry-constructor.tentative.html27
-rw-r--r--testing/web-platform/tests/custom-elements/scoped-registry/CustomElementRegistry-multi-register.tentative.html27
-rw-r--r--testing/web-platform/tests/custom-elements/scoped-registry/ShadowRoot-init-registry.tentative.html52
-rw-r--r--testing/web-platform/tests/custom-elements/scoped-registry/ShadowRoot-innerHTML-upgrade.tentative.html116
-rw-r--r--testing/web-platform/tests/custom-elements/scoped-registry/constructor-call.tentative.html42
-rw-r--r--testing/web-platform/tests/custom-elements/scoped-registry/constructor-reentry-with-different-definition.tentative.html137
6 files changed, 401 insertions, 0 deletions
diff --git a/testing/web-platform/tests/custom-elements/scoped-registry/CustomElementRegistry-constructor.tentative.html b/testing/web-platform/tests/custom-elements/scoped-registry/CustomElementRegistry-constructor.tentative.html
new file mode 100644
index 0000000000..d80a1fbe6c
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/scoped-registry/CustomElementRegistry-constructor.tentative.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta name="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
+<meta name="assert" content="User code can create non-global CustomElementRegistry instances and add definitions">
+<link rel="help" href="https://wicg.github.io/webcomponents/proposals/Scoped-Custom-Element-Registries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+test(() => {
+ let registry = new CustomElementRegistry();
+ assert_not_equals(registry, window.customElements);
+
+ // Define an autonomous element with the new registry. It should not become a
+ // global definition.
+ class MyAutonomous extends HTMLElement {};
+ registry.define('my-autonomous', MyAutonomous);
+ assert_equals(registry.get('my-autonomous'), MyAutonomous);
+ assert_equals(window.customElements.get('my-autonomous'), undefined);
+ assert_false(document.createElement('my-autonomous') instanceof MyAutonomous);
+
+ // Do the same for a customized built-in element.
+ class MyCustomizedBuiltIn extends HTMLParagraphElement {};
+ registry.define('my-customized-builtin', MyCustomizedBuiltIn, {extends: 'p'});
+ assert_equals(registry.get('my-customized-builtin'), MyCustomizedBuiltIn);
+ assert_equals(window.customElements.get('my-customized-builtin'), undefined);
+ assert_false(document.createElement('p', {is: 'my-customized-builtin'}) instanceof MyCustomizedBuiltIn);
+}, 'Create non-global CustomElementRegistry and add definitions');
+</script>
diff --git a/testing/web-platform/tests/custom-elements/scoped-registry/CustomElementRegistry-multi-register.tentative.html b/testing/web-platform/tests/custom-elements/scoped-registry/CustomElementRegistry-multi-register.tentative.html
new file mode 100644
index 0000000000..bd97017308
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/scoped-registry/CustomElementRegistry-multi-register.tentative.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta name="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
+<meta name="assert" content="The same constructor can be registered to multiple registries">
+<link rel="help" href="https://wicg.github.io/webcomponents/proposals/Scoped-Custom-Element-Registries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+class MyCustom extends HTMLElement {};
+
+test(() => {
+ let registry1 = new CustomElementRegistry();
+ let registry2 = new CustomElementRegistry();
+ window.customElements.define('my-custom', MyCustom);
+ registry1.define('my-custom', MyCustom);
+ registry2.define('my-custom', MyCustom);
+
+ assert_equals(window.customElements.get('my-custom'), MyCustom);
+ assert_equals(registry1.get('my-custom'), MyCustom);
+ assert_equals(registry2.get('my-custom'), MyCustom);
+}, 'Same constructor can be registered to different registries');
+
+test(() => {
+ let registry = new CustomElementRegistry();
+ registry.define('custom-a', MyCustom);
+ assert_throws_dom('NotSupportedError', () => registry.define('custom-b', MyCustom));
+}, 'Non-global registries still reject duplicate registrations of the same constructor');
+</script>
diff --git a/testing/web-platform/tests/custom-elements/scoped-registry/ShadowRoot-init-registry.tentative.html b/testing/web-platform/tests/custom-elements/scoped-registry/ShadowRoot-init-registry.tentative.html
new file mode 100644
index 0000000000..f9bc5b5b56
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/scoped-registry/ShadowRoot-init-registry.tentative.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta name="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
+<meta name="assert" content="User code can attach CustomElementRegistry to ShadowRoot">
+<link rel="help" href="https://wicg.github.io/webcomponents/proposals/Scoped-Custom-Element-Registries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script>
+function createShadowHost(testObject) {
+ let element = document.createElement('div');
+ testObject.add_cleanup(() => element.remove());
+ document.body.appendChild(element);
+ return element;
+}
+
+test(function() {
+ let host = createShadowHost(this);
+ let shadow = host.attachShadow({mode: 'open'});
+ assert_equals(shadow.registry, null);
+}, 'ShadowRoot.registry is null if not explicitly specified');
+
+test(function() {
+ let host = createShadowHost(this);
+ let shadow = host.attachShadow({mode: 'open', registry: window.customElements});
+ assert_equals(shadow.registry, window.customElements);
+}, 'Attach the global registry to a shadow root');
+
+test(function() {
+ let host = createShadowHost(this);
+ let registry = new CustomElementRegistry();
+ let shadow = host.attachShadow({mode: 'open', registry});
+ assert_equals(shadow.registry, registry);
+}, 'Attach a non-global registry to a shadow root');
+
+test(function() {
+ let registry = new CustomElementRegistry();
+ let host1 = createShadowHost(this);
+ let shadow1 = host1.attachShadow({mode: 'open', registry});
+ let host2 = createShadowHost(this);
+ let shadow2 = host2.attachShadow({mode: 'open', registry});
+ assert_equals(shadow1.registry, registry);
+ assert_equals(shadow2.registry, registry);
+}, 'Attach the same registry to multiple shadow roots');
+
+test(function() {
+ let host = createShadowHost(this);
+ let shadow = host.attachShadow({mode: 'open'});
+ shadow.registry = new CustomElementRegistry();
+ assert_equals(shadow.registry, null);
+}, 'Attaching registry to shadow root can only be done during initialization');
+</script>
+</body>
diff --git a/testing/web-platform/tests/custom-elements/scoped-registry/ShadowRoot-innerHTML-upgrade.tentative.html b/testing/web-platform/tests/custom-elements/scoped-registry/ShadowRoot-innerHTML-upgrade.tentative.html
new file mode 100644
index 0000000000..e21c9dd033
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/scoped-registry/ShadowRoot-innerHTML-upgrade.tentative.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<meta name="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
+<meta name="assert" content="Custom element constructors can re-enter with different definitions">
+<link rel="help" href="https://wicg.github.io/webcomponents/proposals/Scoped-Custom-Element-Registries">
+<link rel="help" href="https://github.com/WICG/webcomponents/issues/969">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="testdiv"></div>
+
+<script>
+class TestAutonomous extends HTMLElement {};
+class TestCustomizedBuiltIn extends HTMLParagraphElement {};
+
+function attachShadowForTest(t, registry) {
+ const host = document.createElement('div');
+ const shadow = host.attachShadow({mode: 'open', registry});
+ document.body.appendChild(host);
+ t.add_cleanup(() => host.remove());
+ return shadow;
+}
+
+test(t => {
+ const registry = new CustomElementRegistry;
+ registry.define('test-element', TestAutonomous);
+
+ const shadow = attachShadowForTest(t, registry);
+ shadow.innerHTML = '<test-element></test-element>';
+ assert_true(shadow.firstChild instanceof TestAutonomous, 'target tree scope');
+
+ // Verify that it doesn't pollute other tree scopes.
+ const shadow2 = attachShadowForTest(t);
+ shadow2.innerHTML = '<test-element></test-element>';
+ assert_false(shadow2.firstChild instanceof TestAutonomous, 'tree scope without registry');
+
+ const shadow3 = attachShadowForTest(t, new CustomElementRegistry);
+ shadow3.innerHTML = '<test-element></test-element>';
+ assert_false(shadow3.firstChild instanceof TestAutonomous, 'tree scope with different registry');
+
+ t.add_cleanup(() => testdiv.firstChild.remove());
+ testdiv.innerHTML = '<test-element></test-element>';
+ assert_false(testdiv.firstChild instanceof TestAutonomous, 'main document');
+}, 'Upgrade into autonomous custom element when inserted via innerHTML');
+
+test(t => {
+ const registry = new CustomElementRegistry;
+ const shadow = attachShadowForTest(t, registry);
+ shadow.innerHTML = '<test-element></test-element>';
+
+ const shadow2 = attachShadowForTest(t);
+ shadow2.innerHTML = '<test-element></test-element>';
+
+ const shadow3 = attachShadowForTest(t, new CustomElementRegistry);
+ shadow3.innerHTML = '<test-element></test-element>';
+
+ t.add_cleanup(() => testdiv.firstChild.remove());
+ testdiv.innerHTML = '<test-element></test-element>';
+
+ registry.define('test-element', TestAutonomous);
+
+ // Elements in the target tree scope should be upgraded.
+ assert_true(shadow.firstChild instanceof TestAutonomous, 'target tree scope');
+
+ // Verify that it doesn't pollute other tree scopes.
+ assert_false(shadow2.firstChild instanceof TestAutonomous, 'tree scope without registry');
+ assert_false(shadow3.firstChild instanceof TestAutonomous, 'tree scope with different registry');
+ assert_false(testdiv.firstChild instanceof TestAutonomous, 'main document');
+}, 'Upgrade into autonomous custom element when definition is added');
+
+test(t => {
+ const registry = new CustomElementRegistry;
+ registry.define('test-element', TestCustomizedBuiltIn, {extends: 'p'});
+
+ const shadow = attachShadowForTest(t, registry);
+ shadow.innerHTML = '<p is="test-element"></p>';
+ assert_true(shadow.firstChild instanceof TestCustomizedBuiltIn, 'target tree scope');
+
+ // Verify that it doesn't pollute other tree scopes.
+ const shadow2 = attachShadowForTest(t);
+ shadow2.innerHTML = '<p is="test-element"></p>';
+ assert_false(shadow2.firstChild instanceof TestCustomizedBuiltIn, 'tree scope without registry');
+
+ const shadow3 = attachShadowForTest(t, new CustomElementRegistry);
+ shadow3.innerHTML = '<p is="test-element"></p>';
+ assert_false(shadow3.firstChild instanceof TestCustomizedBuiltIn, 'tree scope with different registry');
+
+ t.add_cleanup(() => testdiv.firstChild.remove());
+ testdiv.innerHTML = '<p is="test-element"></p>';
+ assert_false(testdiv.firstChild instanceof TestCustomizedBuiltIn, 'main document');
+}, 'Upgrade into customized built-in element when inserted via innerHTML');
+
+test(t => {
+ const registry = new CustomElementRegistry;
+ const shadow = attachShadowForTest(t, registry);
+ shadow.innerHTML = '<p is="test-element"></p>';
+
+ const shadow2 = attachShadowForTest(t);
+ shadow2.innerHTML = '<p is="test-element"></p>';
+
+ const shadow3 = attachShadowForTest(t, new CustomElementRegistry);
+ shadow3.innerHTML = '<p is="test-element"></p>';
+
+ t.add_cleanup(() => testdiv.firstChild.remove());
+ testdiv.innerHTML = '<p is="test-element"></p>';
+
+ registry.define('test-element', TestCustomizedBuiltIn, {extends: 'p'});
+
+ // Elements in the target tree scope should be upgraded.
+ assert_true(shadow.firstChild instanceof TestCustomizedBuiltIn, 'target tree scope');
+
+ // Verify that it doesn't pollute other tree scopes.
+ assert_false(shadow2.firstChild instanceof TestCustomizedBuiltIn, 'tree scope without registry');
+ assert_false(shadow3.firstChild instanceof TestCustomizedBuiltIn, 'tree scope with different registry');
+ assert_false(testdiv.firstChild instanceof TestCustomizedBuiltIn, 'main document');
+}, 'Upgrade into customized built-in element when definition is added');
+</script>
diff --git a/testing/web-platform/tests/custom-elements/scoped-registry/constructor-call.tentative.html b/testing/web-platform/tests/custom-elements/scoped-registry/constructor-call.tentative.html
new file mode 100644
index 0000000000..19a8e3f4d8
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/scoped-registry/constructor-call.tentative.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta name="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
+<meta name="assert" content="Direct calls of custom element constructor use the global registry only">
+<link rel="help" href="https://wicg.github.io/webcomponents/proposals/Scoped-Custom-Element-Registries">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<body>
+<script>
+function attachShadowForTest(t, registry) {
+ const host = document.createElement('div');
+ const shadow = host.attachShadow({mode: 'open', registry});
+ document.body.appendChild(host);
+ t.add_cleanup(() => host.remove());
+ return shadow;
+}
+
+test(t => {
+ class TestElement extends HTMLElement {};
+ let registry = new CustomElementRegistry()
+ registry.define('test-element', TestElement);
+
+ let shadow = attachShadowForTest(t, registry);
+
+ assert_throws_js(TypeError, () => new TestElement);
+}, 'Calling custom element constructor directly without global registration should fail');
+
+test(t => {
+ class TestElement extends HTMLElement {};
+
+ window.customElements.define('global-test-element', TestElement);
+
+ let registry = new CustomElementRegistry()
+ registry.define('shadow-test-element', TestElement);
+ let shadow = attachShadowForTest(t, registry);
+
+ let element = new TestElement;
+ assert_equals(element.localName, 'global-test-element');
+}, 'Calling custom element constructor directly uses global registration only');
+
+</script>
+</body>
diff --git a/testing/web-platform/tests/custom-elements/scoped-registry/constructor-reentry-with-different-definition.tentative.html b/testing/web-platform/tests/custom-elements/scoped-registry/constructor-reentry-with-different-definition.tentative.html
new file mode 100644
index 0000000000..dc93e3c702
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/scoped-registry/constructor-reentry-with-different-definition.tentative.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<meta name="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org">
+<meta name="assert" content="Custom element constructors can re-enter with different definitions">
+<link rel="help" href="https://wicg.github.io/webcomponents/proposals/Scoped-Custom-Element-Registries">
+<link rel="help" href="https://github.com/WICG/webcomponents/issues/969">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='test-container-1'></div>
+<div id='test-container-2'></div>
+
+<script>
+setup({allow_uncaught_exception : true});
+
+function createShadowForTest(t, registry) {
+ const host = document.createElement('div');
+ const shadow = host.attachShadow({mode: 'open', registry});
+ document.body.appendChild(host);
+ t.add_cleanup(() => host.remove());
+ return shadow;
+}
+
+test(t => {
+ let needsTest = true;
+ class ReentryBeforeSuper extends HTMLElement {
+ constructor() {
+ if (needsTest) {
+ needsTest = false;
+ document.getElementById('test-container-1').innerHTML =
+ '<test-element-1></test-element-1>';
+ }
+ super();
+ }
+ };
+ window.customElements.define('test-element-1', ReentryBeforeSuper);
+
+ let registry = new CustomElementRegistry;
+ registry.define('shadow-test-element-1', ReentryBeforeSuper);
+
+ let shadow = createShadowForTest(t, registry);
+ shadow.innerHTML = '<shadow-test-element-1></shadow-test-element-1>';
+
+ let shadowElement = shadow.firstChild;
+ assert_true(shadowElement instanceof ReentryBeforeSuper);
+ assert_equals(shadowElement.localName, 'shadow-test-element-1');
+
+ let mainDocElement = document.getElementById('test-container-1').firstChild;
+ assert_true(mainDocElement instanceof ReentryBeforeSuper);
+ assert_equals(mainDocElement.localName, 'test-element-1');
+}, 'Re-entry via upgrade before calling super()');
+
+test(t => {
+ let needsTest = true;
+ class ReentryAfterSuper extends HTMLElement {
+ constructor() {
+ super();
+ if (needsTest) {
+ needsTest = false;
+ document.getElementById('test-container-2').innerHTML =
+ '<test-element-2></test-element-2>';
+ }
+ }
+ };
+ window.customElements.define('test-element-2', ReentryAfterSuper);
+
+ let registry = new CustomElementRegistry;
+ registry.define('shadow-test-element-2', ReentryAfterSuper);
+
+ let shadow = createShadowForTest(t, registry);
+ shadow.innerHTML = '<shadow-test-element-2></shadow-test-element-2>';
+
+ let shadowElement = shadow.firstChild;
+ assert_true(shadowElement instanceof ReentryAfterSuper);
+ assert_equals(shadowElement.localName, 'shadow-test-element-2');
+
+ let mainDocElement = document.getElementById('test-container-2').firstChild;
+ assert_true(mainDocElement instanceof ReentryAfterSuper);
+ assert_equals(mainDocElement.localName, 'test-element-2');
+}, 'Re-entry via upgrade after calling super()');
+
+test(t => {
+ let needsTest = true;
+ let elementByNestedCall;
+ class ReentryByDirectCall extends HTMLElement {
+ constructor() {
+ if (needsTest) {
+ needsTest = false;
+ elementByNestedCall = new ReentryByDirectCall;
+ }
+ super();
+ }
+ }
+ window.customElements.define('test-element-3', ReentryByDirectCall);
+
+ let registry = new CustomElementRegistry;
+ registry.define('shadow-test-element-3', ReentryByDirectCall);
+
+ let shadow = createShadowForTest(t, registry);
+ shadow.innerHTML = '<shadow-test-element-3></shadow-test-element-3>';
+
+ let shadowElement = shadow.firstChild;
+ assert_true(shadowElement instanceof ReentryByDirectCall);
+ assert_equals(shadowElement.localName, 'shadow-test-element-3');
+
+ // Nested constructor call makes the following `super()` fail, and we should
+ // end up creating only one element.
+ assert_equals(elementByNestedCall, shadowElement);
+}, 'Re-entry via direct constructor call before calling super()');
+
+test(t => {
+ let needsTest = true;
+ let elementByNestedCall;
+ class ReentryByDirectCall extends HTMLElement {
+ constructor() {
+ super();
+ if (needsTest) {
+ needsTest = false;
+ elementByNestedCall = new ReentryByDirectCall;
+ }
+ }
+ }
+ window.customElements.define('test-element-4', ReentryByDirectCall);
+
+ let registry = new CustomElementRegistry;
+ registry.define('shadow-test-element-4', ReentryByDirectCall);
+
+ let shadow = createShadowForTest(t, registry);
+ shadow.innerHTML = '<shadow-test-element-4></shadow-test-element-4>';
+
+ let shadowElement = shadow.firstChild;
+ assert_true(shadowElement instanceof ReentryByDirectCall);
+ assert_equals(shadowElement.localName, 'shadow-test-element-4');
+
+ // Nested constructor call should be blocked.
+ assert_false(elementByNestedCall instanceof ReentryByDirectCall);
+}, 'Re-entry via direct constructor call after calling super()');
+</script>