DOM: Scoped Custom Element Registry update

Align with the changes in whatwg/dom#1392 and whatwg/html#11472, add many more tests, and correct several tests.

Author: annevk

custom-elements/reactions/Document.html

@@ -23,8 +23,8 @@
     const newDoc = contentDocument.implementation.createHTMLDocument();
     newDoc.importNode(instance);
 
-    assert_array_equals(element.takeLog().types(), ['constructed']);
-}, 'importNode on Document must construct a new custom element when importing a custom element into a window-less document');
+    assert_array_equals(element.takeLog().types(), []);
+}, 'importNode on Document must not construct a new custom element when importing a custom element into a window-less document');
 
 test_with_window(function (contentWindow, contentDocument) {
     const element = define_custom_element_in_window(contentWindow, 'custom-element', []);

custom-elements/registries/CustomElementRegistry-upgrade.html

@@ -11,11 +11,11 @@
     <template shadowrootmode="closed" shadowrootclonable="true" shadowrootcustomelementregistry>
         <a-b>
             <template shadowrootmode="closed" shadowrootclonable="true" shadowrootcustomelementregistry>
-                <c-d/>
+                <c-d>
                     <template shadowrootmode="closed" shadowrootclonable="true">
                         <a-b></a-b>
                     </template>
-                <c-d>
+                </c-d>
             </template>
         </a-b>
     </template>

custom-elements/registries/Document-importNode-cross-document.window.js

@@ -0,0 +1,116 @@
+// Target document has a global registry
+
+test(t => {
+  const contentDocument = document.body.appendChild(document.createElement('iframe')).contentDocument;
+  t.add_cleanup(() => contentDocument.defaultView.frameElement.remove());
+
+  const element = document.createElement("div");
+  const clone = contentDocument.importNode(element);
+  assert_equals(clone.customElementRegistry, contentDocument.defaultView.customElements);
+}, "Cloning with global registry");
+
+test(t => {
+  const contentDocument = document.body.appendChild(document.createElement('iframe')).contentDocument;
+  t.add_cleanup(() => contentDocument.defaultView.frameElement.remove());
+
+  const element = document.createElement("div", { customElementRegistry: customElements });
+  const clone = contentDocument.importNode(element);
+  assert_equals(clone.customElementRegistry, contentDocument.defaultView.customElements);
+}, "Cloning with explicit global registry");
+
+test(t => {
+  const contentDocument = document.body.appendChild(document.createElement('iframe')).contentDocument;
+  t.add_cleanup(() => contentDocument.defaultView.frameElement.remove());
+
+  const scoped = new CustomElementRegistry();
+  const element = document.createElement("div", { customElementRegistry: scoped });
+  const clone = contentDocument.importNode(element);
+  assert_equals(clone.customElementRegistry, scoped);
+}, "Cloning with scoped registry");
+
+test(t => {
+  const contentDocument = document.body.appendChild(document.createElement('iframe')).contentDocument;
+  t.add_cleanup(() => contentDocument.defaultView.frameElement.remove());
+
+  const element = document.createElement("div");
+  const elementShadow = element.attachShadow({ mode: "open", clonable: true });
+  const clone = contentDocument.importNode(element);
+  assert_equals(clone.shadowRoot.customElementRegistry, contentDocument.defaultView.customElements);
+}, "Cloning including shadow tree with global registry");
+
+test(t => {
+  const contentDocument = document.body.appendChild(document.createElement('iframe')).contentDocument;
+  t.add_cleanup(() => contentDocument.defaultView.frameElement.remove());
+
+  const element = document.createElement("div");
+  const elementShadow = element.attachShadow({ mode: "open", clonable: true, customElementRegistry: customElements });
+  const clone = contentDocument.importNode(element);
+  assert_equals(clone.shadowRoot.customElementRegistry, contentDocument.defaultView.customElements);
+}, "Cloning including shadow tree with explicit global registry");
+
+test(t => {
+  const contentDocument = document.body.appendChild(document.createElement('iframe')).contentDocument;
+  t.add_cleanup(() => contentDocument.defaultView.frameElement.remove());
+
+  const scoped = new CustomElementRegistry();
+  const element = document.createElement("div");
+  const elementShadow = element.attachShadow({ mode: "open", clonable: true, customElementRegistry: scoped });
+  const clone = contentDocument.importNode(element);
+  assert_equals(clone.shadowRoot.customElementRegistry, scoped);
+}, "Cloning including shadow tree with scoped registry");
+
+
+// Target document has a null registry
+
+test(t => {
+  const contentDocument = document.implementation.createHTMLDocument();
+
+  const element = document.createElement("div");
+  const clone = contentDocument.importNode(element);
+  assert_equals(clone.customElementRegistry, null);
+}, "Cloning with global registry (null registry target)");
+
+test(t => {
+  const contentDocument = document.implementation.createHTMLDocument();
+
+  const element = document.createElement("div", { customElementRegistry: customElements });
+  const clone = contentDocument.importNode(element);
+  assert_equals(clone.customElementRegistry, null);
+}, "Cloning with explicit global registry (null registry target)");
+
+test(t => {
+  const contentDocument = document.implementation.createHTMLDocument();
+
+  const scoped = new CustomElementRegistry();
+  const element = document.createElement("div", { customElementRegistry: scoped });
+  const clone = contentDocument.importNode(element);
+  assert_equals(clone.customElementRegistry, scoped);
+}, "Cloning with scoped registry (null registry target)");
+
+test(t => {
+  const contentDocument = document.implementation.createHTMLDocument();
+
+  const element = document.createElement("div");
+  const elementShadow = element.attachShadow({ mode: "open", clonable: true });
+  const clone = contentDocument.importNode(element);
+  assert_equals(clone.shadowRoot.customElementRegistry, null);
+}, "Cloning including shadow tree with global registry (null registry target)");
+
+test(t => {
+  const contentDocument = document.implementation.createHTMLDocument();
+
+  const element = document.createElement("div");
+  const elementShadow = element.attachShadow({ mode: "open", clonable: true, customElementRegistry: customElements });
+  const clone = contentDocument.importNode(element);
+  assert_equals(clone.shadowRoot.customElementRegistry, null);
+}, "Cloning including shadow tree with explicit global registry (null registry target)");
+
+test(t => {
+  const contentDocument = document.implementation.createHTMLDocument();
+
+  const scoped = new CustomElementRegistry();
+  const element = document.createElement("div");
+  const elementShadow = element.attachShadow({ mode: "open", clonable: true, customElementRegistry: scoped });
+  const clone = contentDocument.importNode(element);
+  assert_equals(clone.shadowRoot.customElementRegistry, scoped);
+}, "Cloning including shadow tree with scoped registry (null registry target)");