From 03e2f7f9e49ab0f41101440f45596dcda414d7fa Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Mon, 26 Mar 2018 15:20:11 +0000
Subject: [PATCH] Bug 1443707 [wpt PR 9869] - Add tests for
 customElements.upgrade(), a=testonly

Automatic update from web-platform-testsAdd tests for customElements.upgrade() (#9869)

* Add tests for customElements.upgrade()

Follows https://github.com/whatwg/html/pull/3535.

* Fix one test; test that it's shadow-including descendants

wpt-commits: e3b651475426769bba0f043fd53e11a9c4ef93d5
wpt-pr: 9869
wpt-commits: e3b651475426769bba0f043fd53e11a9c4ef93d5
wpt-pr: 9869
---
 testing/web-platform/meta/MANIFEST.json       |  10 ++
 .../custom-element-registry/upgrade.html      | 154 ++++++++++++++++++
 2 files changed, 164 insertions(+)
 create mode 100644 testing/web-platform/tests/custom-elements/custom-element-registry/upgrade.html
diff --git a/testing/web-platform/meta/MANIFEST.json b/testing/web-platform/meta/MANIFEST.json
index 2f19039f2b2b3..57b82487c9846 100644
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -318808,6 +318808,12 @@
      {}
     ]
    ],
+   "custom-elements/custom-element-registry/upgrade.html": [
+    [
+     "/custom-elements/custom-element-registry/upgrade.html",
+     {}
+    ]
+   ],
    "custom-elements/disconnected-callbacks.html": [
     [
      "/custom-elements/disconnected-callbacks.html",
@@ -543479,6 +543485,10 @@
    "3b143f80d77a0b15b59cc6e6f5344f85dafe4f4e",
    "testharness"
   ],
+  "custom-elements/custom-element-registry/upgrade.html": [
+   "a5c2ced54f7031d02009c9853a7ee4e883151cb3",
+   "testharness"
+  ],
   "custom-elements/disconnected-callbacks.html": [
    "ad030517981b11892126023bc758b7fe323a3d14",
    "testharness"
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 0000000000000..3a72dbd753c7f
--- /dev/null
+++ b/testing/web-platform/tests/custom-elements/custom-element-registry/upgrade.html
@@ -0,0 +1,154 @@
+<!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);
+
+  assert_true(el1 instanceof Element1, "element 1 must now be upgraded");
+  assert_true(el2 instanceof Element2, "element 2 must now be upgraded");
+  assert_true(el3 instanceof Element3, "element 3 must now be upgraded");
+  assert_true(el4 instanceof Element4, "element 4 must now be upgraded");
+  assert_true(el5 instanceof Element5, "element 5 must now be upgraded");
+}, "Elements inside a template contents DocumentFragment node");
+</script>
