diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/custom-elements/scoped-registry | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/custom-elements/scoped-registry')
9 files changed, 971 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-createElement.tentative.html b/testing/web-platform/tests/custom-elements/scoped-registry/ShadowRoot-createElement.tentative.html new file mode 100644 index 0000000000..335773f9c6 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/scoped-registry/ShadowRoot-createElement.tentative.html @@ -0,0 +1,95 @@ +<!DOCTYPE html> +<title>Tests ShadowRoot.createElement APIs work with scoped custom element registries</title> +<meta name="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org"> +<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> +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); + assert_true(shadow.createElement('test-element') instanceof TestAutonomous); + + // Verify that it doesn't pollute other tree scopes. + const shadow2 = attachShadowForTest(t); + assert_false(shadow2.createElement('test-element') instanceof TestAutonomous); + + const shadow3 = attachShadowForTest(t, new CustomElementRegistry); + assert_false(shadow3.createElement('test-element') instanceof TestAutonomous); + + assert_false(document.createElement('test-element') instanceof TestAutonomous); +}, 'ShadowRoot.createElement() for autonomous custom element'); + +test(t => { + const html = 'http://www.w3.org/1999/xhtml'; + + const registry = new CustomElementRegistry; + registry.define('test-element', TestAutonomous); + + const shadow = attachShadowForTest(t, registry); + assert_true(shadow.createElementNS(html, 'test-element') instanceof TestAutonomous); + + // Verify that it doesn't pollute other tree scopes. + const shadow2 = attachShadowForTest(t); + assert_false(shadow2.createElementNS(html, 'test-element') instanceof TestAutonomous); + + const shadow3 = attachShadowForTest(t, new CustomElementRegistry); + assert_false(shadow3.createElementNS(html, 'test-element') instanceof TestAutonomous); + + assert_false(document.createElementNS(html, 'test-element') instanceof TestAutonomous); +}, 'ShadowRoot.createElementNS() for autonomous custom element'); + +test(t => { + const registry = new CustomElementRegistry; + registry.define('test-element', TestCustomizedBuiltIn, {extends: 'p'}); + + const shadow = attachShadowForTest(t, registry); + assert_true(shadow.createElement('p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); + + // Verify that it doesn't pollute other tree scopes. + const shadow2 = attachShadowForTest(t); + assert_false(shadow2.createElement('p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); + + const shadow3 = attachShadowForTest(t, new CustomElementRegistry); + assert_false(shadow3.createElement('p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); + + assert_false(document.createElement('p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); +}, 'ShadowRoot.createElement() for customized built-in element'); + +test(t => { + const html = 'http://www.w3.org/1999/xhtml'; + + const registry = new CustomElementRegistry; + registry.define('test-element', TestCustomizedBuiltIn, {extends: 'p'}); + + const shadow = attachShadowForTest(t, registry); + assert_true(shadow.createElementNS(html, 'p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); + + // Verify that it doesn't pollute other tree scopes. + const shadow2 = attachShadowForTest(t); + assert_false(shadow2.createElementNS(html, 'p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); + + const shadow3 = attachShadowForTest(t, new CustomElementRegistry); + assert_false(shadow3.createElementNS(html, 'p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); + + assert_false(document.createElementNS(html, 'p', {is: 'test-element'}) instanceof TestCustomizedBuiltIn); +}, 'ShadowRoot.createElementNS() for customized built-in element'); + +</script> +</body> + 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> diff --git a/testing/web-platform/tests/custom-elements/scoped-registry/scoped-registry-define-upgrade-criteria.tentative.html b/testing/web-platform/tests/custom-elements/scoped-registry/scoped-registry-define-upgrade-criteria.tentative.html new file mode 100644 index 0000000000..d3d5d4fb96 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/scoped-registry/scoped-registry-define-upgrade-criteria.tentative.html @@ -0,0 +1,258 @@ +<!DOCTYPE html> +<title>Tests which nodes are upgraded after adding a scoped custom element definition</title> +<meta name="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org"> +<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> + +<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; +} + +function createIFrameForTest(t) { + const iframe = document.createElement('iframe'); + document.body.appendChild(iframe); + if (!iframe.contentDocument.body) { + iframe.contentDocument.body = iframe.contentDocument.createElement('body'); + } + t.add_cleanup(() => iframe.remove()); + return iframe; +} + +let definitionCount = 0; +function nextCustomElementName() { + return `test-element-${++definitionCount}`; +} + +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)); + + class TestElement extends HTMLElement {}; + customElements.define(name, TestElement); + + assert_true(document.querySelector(name) instanceof TestElement); + assert_false(shadow.querySelector(name) instanceof TestElement); +}, 'Adding definition to global registry should not affect shadow roots using scoped registry'); + +test(t => { + const name = nextCustomElementName(); + + const shadow1 = attachShadowForTest(t, customElements); + shadow1.appendChild(document.createElement(name)); + + const shadow2 = attachShadowForTest(t); + shadow2.appendChild(document.createElement(name)); + + class TestElement extends HTMLElement {}; + customElements.define(name, TestElement); + + assert_true(shadow1.querySelector(name) instanceof TestElement); + assert_true(shadow2.querySelector(name) instanceof TestElement); +}, 'Adding definition to global registry should affect shadow roots also using global registry'); + +test(t => { + const name = nextCustomElementName(); + + const registry = new CustomElementRegistry; + const shadow1 = attachShadowForTest(t, registry); + shadow1.appendChild(document.createElement(name)); + + const shadow2 = attachShadowForTest(t, registry); + shadow2.appendChild(document.createElement(name)); + + class TestElement extends HTMLElement {}; + registry.define(name, TestElement); + + assert_true(shadow1.querySelector(name) instanceof TestElement); + assert_true(shadow2.querySelector(name) instanceof TestElement); +}, 'Adding definition to scoped registry should affect all associated shadow roots'); + +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)); + + class TestElement extends HTMLElement {}; + registry.define(name, TestElement); + + assert_false(document.querySelector(name) instanceof TestElement); + assert_true(shadow.querySelector(name) instanceof TestElement); +}, 'Adding definition to scoped registry should not affect document tree scope'); + +test(t => { + const name = nextCustomElementName(); + + const registry = new CustomElementRegistry; + const shadow1 = attachShadowForTest(t, registry); + shadow1.appendChild(document.createElement(name)); + + const shadow2 = attachShadowForTest(t, new CustomElementRegistry); + shadow2.appendChild(document.createElement(name)); + + const shadow3 = attachShadowForTest(t); + shadow3.appendChild(document.createElement(name)); + + class TestElement extends HTMLElement {}; + registry.define(name, TestElement); + + assert_true(shadow1.querySelector(name) instanceof TestElement); + assert_false(shadow2.querySelector(name) instanceof TestElement); + assert_false(shadow3.querySelector(name) instanceof TestElement); +}, 'Adding definition to scoped registry should not affect shadow roots using other registries'); + +test(t => { + const name = nextCustomElementName(); + const node = document.body.appendChild(document.createElement(name)); + + const registry = new CustomElementRegistry; + const shadow = attachShadowForTest(t, registry); + shadow.appendChild(node); + + 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'); + +test(t => { + const name = nextCustomElementName(); + + const registry = new CustomElementRegistry; + const shadow1 = attachShadowForTest(t, registry); + const node = shadow1.appendChild(document.createElement(name)); + + const shadow2 = attachShadowForTest(t, new CustomElementRegistry); + shadow2.appendChild(node); + + 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'); + +test(t => { + const name = nextCustomElementName(); + + const registry = new CustomElementRegistry; + const shadow1 = attachShadowForTest(t, registry); + const node1 = shadow1.appendChild(document.createElement(name)); + + const iframe = createIFrameForTest(t); + const host2 = iframe.contentDocument.createElement('div'); + const shadow2 = host2.attachShadow({mode: 'open', registry}); + const node2 = shadow2.appendChild(iframe.contentDocument.createElement(name)); + iframe.contentDocument.body.appendChild(host2); + + class TestElement extends HTMLElement {}; + registry.define(name, TestElement); + + assert_true(node1 instanceof TestElement); + assert_true(node2 instanceof TestElement); +}, 'Adding definition to scoped registry affects associated shadow roots in all iframes'); + +test(t => { + const name = nextCustomElementName(); + + const newWindow = window.open('about:blank'); + t.add_cleanup(() => newWindow.close()); + + const host = newWindow.document.createElement('div'); + const shadow = host.attachShadow({mode: 'open', registry: window.customElements}); + const node = shadow.appendChild(newWindow.document.createElement(name)); + newWindow.document.body.appendChild(host); + + class TestElement extends HTMLElement {}; + window.customElements.define(name, TestElement); + + assert_true(node instanceof TestElement); +}, 'Adding definition to scoped registry affects associated shadow roots in other frame trees'); + +test(t => { + const name = nextCustomElementName(); + + const registry = new CustomElementRegistry; + const shadow = attachShadowForTest(t, registry); + const node = shadow.appendChild(document.createElement(name)); + shadow.host.remove(); + + class TestElement extends HTMLElement {}; + registry.define(name, TestElement); + + assert_false(node instanceof TestElement); +}, 'Adding definition to scoped registry should not upgrade disconnected elements'); + +test(t => { + const name = nextCustomElementName(); + + const registry = new CustomElementRegistry; + const doc = document.implementation.createHTMLDocument(); + const host = doc.createElement('div'); + const shadow = host.attachShadow({mode: 'open', registry}); + const node = shadow.appendChild(doc.createElement(name)); + doc.body.appendChild(host); + + class TestElement extends HTMLElement {}; + registry.define(name, TestElement); + + assert_false(node instanceof TestElement); +}, 'Adding definition to scoped registry should not upgrade nodes in constructed documents'); + +test(t => { + const name = nextCustomElementName(); + + const iframe = createIFrameForTest(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)); + iframe.contentDocument.body.appendChild(host); + + iframe.remove(); + + class TestElement extends HTMLElement {}; + registry.define(name, TestElement); + + assert_false(node instanceof TestElement); +}, 'Adding definition to scoped registry should not upgrade nodes in detached frames'); + +promise_test(async t => { + const name = nextCustomElementName(); + + const newWindow = window.open('about:blank'); + t.add_cleanup(() => newWindow.close()); + + const host = newWindow.document.createElement('div'); + const shadow = host.attachShadow({mode: 'open', registry: window.customElements}); + const node = shadow.appendChild(newWindow.document.createElement(name)); + newWindow.document.body.appendChild(host); + + newWindow.close(); + + // `window.close()` is async. Wait a while until it's fully closed + await new Promise(resolve => setTimeout(resolve, 500)); + + class TestElement extends HTMLElement {}; + window.customElements.define(name, TestElement); + + assert_false(node instanceof TestElement); +}, 'Adding definition to scoped registry should not upgrade nodes in closed windows'); + +</script> + +</body> diff --git a/testing/web-platform/tests/custom-elements/scoped-registry/scoped-registry-define-upgrade-order.tentative.html b/testing/web-platform/tests/custom-elements/scoped-registry/scoped-registry-define-upgrade-order.tentative.html new file mode 100644 index 0000000000..4fb0f49f9f --- /dev/null +++ b/testing/web-platform/tests/custom-elements/scoped-registry/scoped-registry-define-upgrade-order.tentative.html @@ -0,0 +1,217 @@ +<!DOCTYPE html> +<title>Tests element upgrade order after adding a scoped custom element definition</title> +<meta name="author" title="Xiaocheng Hu" href="mailto:xiaochengh@chromium.org"> +<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> + +<script> +let definitionCount = 0; +function nextCustomElementDefinition() { + const log = []; + const name = `test-element-${++definitionCount}`; + const constructor = class extends HTMLElement { + constructor() { + super(); + log.push(this.id); + } + }; + return {name, constructor, log}; +} + +function attachShadowForTest(t, {parent, registry}) { + parent = parent || document.body; + const host = parent.ownerDocument.createElement('div'); + const shadow = host.attachShadow({mode: 'open', registry}); + parent.appendChild(host); + t.add_cleanup(() => host.remove()); + return shadow; +} + +function createIFrameForTest(t, {parent, nextSibling}) { + parent = parent || document.body; + const iframe = parent.ownerDocument.createElement('iframe'); + parent.insertBefore(iframe, nextSibling); + if (!iframe.contentDocument.body) { + iframe.contentDocument.body = iframe.contentDocument.createElement('body'); + } + t.add_cleanup(() => iframe.remove()); + return iframe; +} + +test(t => { + const {name, constructor, log} = nextCustomElementDefinition(); + + const registry = new CustomElementRegistry; + const shadow = attachShadowForTest(t, {registry}); + shadow.innerHTML = ` + <${name} id="a"></${name}> + <${name} id="b"></${name}> + <${name} id="c"></${name}> + `; + + registry.define(name, constructor); + assert_array_equals(log, ['a', 'b', 'c']); +}, 'Upgrade in tree order in the same tree scope'); + +test(t => { + // document + // +- shadow1 + // | +- a + // | +- shadow2 + // | +- b + // +- shadow3 + // +- c + + const {name, constructor, log} = nextCustomElementDefinition(); + const registry = new CustomElementRegistry; + + const shadow1 = attachShadowForTest(t, {registry}); + shadow1.innerHTML = `<${name} id="a"></${name}>`; + + const shadow2 = attachShadowForTest(t, {registry, parent: shadow1}); + shadow2.innerHTML = `<${name} id="b"></${name}>`; + + const shadow3 = attachShadowForTest(t, {registry}); + shadow3.innerHTML = `<${name} id="c"></${name}>`; + + registry.define(name, constructor); + assert_array_equals(log, ['a', 'b', 'c']); +}, 'Upgrade in shadow-including tree order across tree scopes'); + +test(t => { + // document + // +- shadow1 + // | +- a + // | +- shadow3 + // | +- c + // +- shadow2 + // +- b + + const {name, constructor, log} = nextCustomElementDefinition(); + const registry = new CustomElementRegistry; + + const shadow1 = attachShadowForTest(t, {registry}); + shadow1.innerHTML = `<${name} id="a"></${name}>`; + + const shadow2 = attachShadowForTest(t, {registry}); + shadow2.innerHTML = `<${name} id="b"></${name}>`; + + const shadow3 = attachShadowForTest(t, {registry, parent: shadow1}); + shadow3.innerHTML = `<${name} id="c"></${name}>`; + + registry.define(name, constructor); + assert_array_equals(log, ['a', 'c', 'b']); +}, 'Upgrade order does not depend on shadow root attach order'); + +test(t => { + // document + // +- iframe1 + // | +- shadow1 + // | | +- a + // | +- iframe2 + // | +- shadow2 + // | +- b + // +- shadow3 + // +- c + + const {name, constructor, log} = nextCustomElementDefinition(); + const registry = new CustomElementRegistry; + + const iframe1 = createIFrameForTest(t, {}); + const shadow1 = attachShadowForTest(t, {registry, parent: iframe1.contentDocument.body}); + shadow1.innerHTML = `<${name} id="a"></${name}>`; + + const iframe2 = createIFrameForTest(t, {parent: iframe1.contentDocument.body}); + const shadow2 = attachShadowForTest(t, {registry, parent: iframe2.contentDocument.body}); + shadow2.innerHTML = `<${name} id="b"></${name}>`; + + const shadow3 = attachShadowForTest(t, {registry}); + shadow3.innerHTML = `<${name} id="c"></${name}>`; + + registry.define(name, constructor); + assert_array_equals(log, ['a', 'b', 'c']); +}, 'Upgrade in association order across documents, then tree order in each document'); + +test(t => { + // document + // +- iframe2 + // | +- shadow2 + // | +- b + // +- iframe1 + // | +- shadow1 + // | +- a + + const {name, constructor, log} = nextCustomElementDefinition(); + const registry = new CustomElementRegistry; + + const iframe1 = createIFrameForTest(t, {}); + const shadow1 = attachShadowForTest(t, {registry, parent: iframe1.contentDocument.body}); + shadow1.innerHTML = `<${name} id="a"></${name}>`; + + const iframe2 = createIFrameForTest(t, {nextSibling: iframe1}); + const shadow2 = attachShadowForTest(t, {registry, parent: iframe2.contentDocument.body}); + shadow2.innerHTML = `<${name} id="b"></${name}>`; + + registry.define(name, constructor); + assert_array_equals(log, ['a', 'b']); +}, 'Upgrade order is not affected by DOM order between child frames'); + +test(t => { + // document + // +- iframe1 + // | +- shadow2 + // | +- b + // +- iframe2 + // | +- shadow1 + // | +- a + + const {name, constructor, log} = nextCustomElementDefinition(); + const registry = new CustomElementRegistry; + + const iframe1 = createIFrameForTest(t, {}); + const iframe2 = createIFrameForTest(t, {}); + + const shadow1 = attachShadowForTest(t, {registry}); + const host1 = shadow1.host; + shadow1.innerHTML = `<${name} id="a"></${name}>`; + + const shadow2 = attachShadowForTest(t, {registry}); + const host2 = shadow2.host; + shadow2.innerHTML = `<${name} id="b"></${name}>`; + + iframe1.contentDocument.body.appendChild(host2); + iframe2.contentDocument.body.appendChild(host1); + + registry.define(name, constructor); + assert_array_equals(log, ['b', 'a']); +}, 'Upgrade order is affected by shadow tree adoption across documents'); + +test(t => { + // Create a registry in one window, but associate it with another document first + // document + // +- iframe1 + // | +- shadow1 + // | +- a + // +- shadowr2 + // +- b + + const {name, constructor, log} = nextCustomElementDefinition(); + const registry = new CustomElementRegistry; + + const iframe1 = createIFrameForTest(t, {}); + const shadow1 = attachShadowForTest(t, {registry, parent: iframe1.contentDocument.body}); + shadow1.innerHTML = `<${name} id="a"></${name}>`; + + const shadow2 = attachShadowForTest(t, {registry}); + shadow2.innerHTML = `<${name} id="b"></${name}>`; + + registry.define(name, constructor); + assert_array_equals(log, ['a', 'b']); +}, 'Elements in the "owner" window of a scoped registry are not always upgraded first'); + +</script> +</body> |