1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
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>
|
