diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/custom-elements/custom-element-registry/upgrade.html | |
parent | Initial commit. (diff) | |
download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/custom-elements/custom-element-registry/upgrade.html')
-rw-r--r-- | testing/web-platform/tests/custom-elements/custom-element-registry/upgrade.html | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/testing/web-platform/tests/custom-elements/custom-element-registry/upgrade.html b/testing/web-platform/tests/custom-elements/custom-element-registry/upgrade.html new file mode 100644 index 0000000000..e020d95a57 --- /dev/null +++ b/testing/web-platform/tests/custom-elements/custom-element-registry/upgrade.html @@ -0,0 +1,157 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>customElements.upgrade()</title> +<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-customelementregistry-upgrade"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<script> +"use strict"; + +test(() => { + const el = document.createElement("spider-man"); + + class SpiderMan extends HTMLElement {} + customElements.define("spider-man", SpiderMan); + + assert_false(el instanceof SpiderMan, "The element must not yet be upgraded"); + + customElements.upgrade(el); + assert_true(el instanceof SpiderMan, "The element must now be upgraded"); +}, "Upgrading an element directly (example from the spec)"); + +test(() => { + const el1 = document.createElement("element-a-1"); + const el2 = document.createElement("element-a-2"); + const container = document.createElement("div"); + container.appendChild(el1); + container.appendChild(el2); + + class Element1 extends HTMLElement {} + class Element2 extends HTMLElement {} + customElements.define("element-a-1", Element1); + customElements.define("element-a-2", Element2); + + assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); + assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); + + customElements.upgrade(container); + assert_true(el1 instanceof Element1, "element 1 must now be upgraded"); + assert_true(el2 instanceof Element2, "element 2 must now be upgraded"); +}, "Two elements as children of the upgraded node"); + +test(() => { + const el1 = document.createElement("element-b-1"); + const el2 = document.createElement("element-b-2"); + const container = document.createElement("div"); + const subContainer = document.createElement("span"); + const subSubContainer = document.createElement("span"); + container.appendChild(subContainer); + subContainer.appendChild(el1); + subContainer.appendChild(subSubContainer); + subSubContainer.appendChild(el2); + + class Element1 extends HTMLElement {} + class Element2 extends HTMLElement {} + customElements.define("element-b-1", Element1); + customElements.define("element-b-2", Element2); + + assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); + assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); + + customElements.upgrade(container); + assert_true(el1 instanceof Element1, "element 1 must now be upgraded"); + assert_true(el2 instanceof Element2, "element 2 must now be upgraded"); +}, "Two elements as descendants of the upgraded node"); + +test(() => { + const el1 = document.createElement("element-d-1"); + const el2 = document.createElement("element-d-2"); + + const container = document.createElement("div"); + const subContainer = document.createElement("span"); + subContainer.attachShadow({ mode: "open" }); + const subSubContainer = document.createElement("span"); + subSubContainer.attachShadow({ mode: "open" }); + + container.appendChild(subContainer); + subContainer.shadowRoot.appendChild(el1); + subContainer.shadowRoot.appendChild(subSubContainer); + subSubContainer.shadowRoot.appendChild(el2); + + class Element1 extends HTMLElement {} + class Element2 extends HTMLElement {} + customElements.define("element-d-1", Element1); + customElements.define("element-d-2", Element2); + + assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); + assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); + + customElements.upgrade(container); + assert_true(el1 instanceof Element1, "element 1 must now be upgraded"); + assert_true(el2 instanceof Element2, "element 2 must now be upgraded"); +}, "Two elements as shadow-including descendants (and not descendants) of the upgraded node"); + +test(() => { + const template = document.createElement("template"); + template.innerHTML = ` + <div> + <element-c-1></element-c-1> + <element-c-2> + <element-c-3></element-c-3> + <span> + <element-c-4></element-c-4> + </span> + </element-c-2> + </div> + <element-c-5></element-c-5> + `; + + // This code feels repetitive but I tried to make it use loops and it became harder to see the correctness. + + const el1 = template.content.querySelector("element-c-1"); + const el2 = template.content.querySelector("element-c-2"); + const el3 = template.content.querySelector("element-c-3"); + const el4 = template.content.querySelector("element-c-4"); + const el5 = template.content.querySelector("element-c-5"); + + class Element1 extends HTMLElement {} + class Element2 extends HTMLElement {} + class Element3 extends HTMLElement {} + class Element4 extends HTMLElement {} + class Element5 extends HTMLElement {} + + customElements.define("element-c-1", Element1); + customElements.define("element-c-2", Element2); + customElements.define("element-c-3", Element3); + customElements.define("element-c-4", Element4); + customElements.define("element-c-5", Element5); + + assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded"); + assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded"); + assert_false(el3 instanceof Element3, "element 3 must not yet be upgraded"); + assert_false(el4 instanceof Element4, "element 4 must not yet be upgraded"); + assert_false(el5 instanceof Element5, "element 5 must not yet be upgraded"); + + customElements.upgrade(template); + + assert_false(el1 instanceof Element1, "element 1 must not yet be upgraded despite upgrading the template"); + assert_false(el2 instanceof Element2, "element 2 must not yet be upgraded despite upgrading the template"); + assert_false(el3 instanceof Element3, "element 3 must not yet be upgraded despite upgrading the template"); + assert_false(el4 instanceof Element4, "element 4 must not yet be upgraded despite upgrading the template"); + assert_false(el5 instanceof Element5, "element 5 must not yet be upgraded despite upgrading the template"); + + customElements.upgrade(template.content); + + // Template contents owner documents don't have a browsing context, so + // https://html.spec.whatwg.org/multipage/custom-elements.html#look-up-a-custom-element-definition does not find any + // custom element definition. + assert_false(el1 instanceof Element1, "element 1 must still not be upgraded after upgrading the template contents"); + assert_false(el2 instanceof Element2, "element 2 must still not be upgraded after upgrading the template contents"); + assert_false(el3 instanceof Element3, "element 3 must still not be upgraded after upgrading the template contents"); + assert_false(el4 instanceof Element4, "element 4 must still not be upgraded after upgrading the template contents"); + assert_false(el5 instanceof Element5, "element 5 must still not be upgraded after upgrading the template contents"); +}, "Elements inside a template contents DocumentFragment node"); +</script> |