Google Git
Sign in
chromium / external / w3c / web-platform-tests / fd0429f0b45f975b25d85256dac33762134952c5 / . / shadow-dom / slotchange.html
blob: 1f94cc7bee28a14442278aab355089abc9435a56 [file] [log] [blame]
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]1<!DOCTYPE html>
2<title>Shadow DOM: slotchange Events</title>
3<meta name="author" title="Hayato Ito" href="mailto:hayato@google.com">
Ms2ger526656f2016-08-24 16:26:20[diff] [blame]4<script src="/resources/testharness.js"></script>
5<script src="/resources/testharnessreport.js"></script>
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]6<script src="resources/shadow-dom.js"></script>
7
8<div id="test1">
9 <div id="host1">
10 <template data-mode="open">
11 <slot id="s1" name="slot1"></slot>
12 </template>
13 <div id="c1" slot="slot1"></div>
14 </div>
15</div>
16
17<script>
18function doneIfSlotChange(slots, test) {
19 let fired = new Set();
20 for (let slot of slots) {
21 slot.addEventListener('slotchange', test.step_func((e) => {
22 assert_false(fired.has(slot.id));
23 fired.add(slot.id);
24 if (fired.size == slots.length) {
25 test.done();
26 }
27 }))
28 }
29}
30
31async_test((test) => {
32 let n = createTestTree(test1);
33 removeWhiteSpaceOnlyTextNodes(n.test1);
34
35 doneIfSlotChange([n.s1], test);
36
37 let d1 = document.createElement('div');
38 d1.setAttribute('slot', 'slot1');
39 n.host1.appendChild(d1);
40}, 'slotchange event: Append a child to a host.');
41
42async_test((test) => {
43 let n = createTestTree(test1);
44 removeWhiteSpaceOnlyTextNodes(n.test1);
45
46 doneIfSlotChange([n.s1], test);
47
48 n.c1.remove();
49}, 'slotchange event: Remove a child from a host.');
50
51async_test((test) => {
52 let n = createTestTree(test1);
53 removeWhiteSpaceOnlyTextNodes(n.test1);
54
55 n.c1.remove();
56
57 doneIfSlotChange([n.s1], test);
58}, 'slotchange event: Remove a child before adding an event listener.');
59
60async_test((test) => {
61 let n = createTestTree(test1);
62 removeWhiteSpaceOnlyTextNodes(n.test1);
63
64 doneIfSlotChange([n.s1], test);
65
66 n.c1.setAttribute('slot', 'slot-none');
67}, 'slotchange event: Change slot= attribute to make it un-assigned.');
68
69async_test((test) => {
70 let n = createTestTree(test1);
71 removeWhiteSpaceOnlyTextNodes(n.test1);
72
73 doneIfSlotChange([n.s1], test);
74
75 n.s1.setAttribute('name', 'slot-none');
76}, 'slotchange event: Change slot\'s name= attribute so that none is assigned.');
77</script>
78
79<div id="test2">
80 <div id="host1">
81 <template data-mode="open">
82 <slot id="s1" name="slot1"></slot>
83 </template>
84 <div id="c2" slot="slot2"></div>
85 </div>
86</div>
87
88<script>
89async_test((test) => {
90 let n = createTestTree(test2);
91 removeWhiteSpaceOnlyTextNodes(n.test2);
92
93 doneIfSlotChange([n.s1], test);
94
95 n.c2.setAttribute('slot', 'slot1');
96}, 'slotchange event: Change slot= attribute to make it assigned.');
97
98async_test((test) => {
99 let n = createTestTree(test2);
100 removeWhiteSpaceOnlyTextNodes(n.test2);
101
102 doneIfSlotChange([n.s1], test);
103
104 n.s1.setAttribute('name', 'slot2');
105}, 'slotchange event: Change slot\'s name= attribute so that a node is assigned to the slot.');
106</script>
107
108<div id="test_fallback">
109 <div id="host1">
110 <template data-mode="open">
111 <slot id="s1"></slot>
112 </template>
113 </div>
114</div>
115
116<script>
117async_test((test) => {
118 let n = createTestTree(test_fallback);
119 removeWhiteSpaceOnlyTextNodes(n.test_fallback);
120
121 doneIfSlotChange([n.s1], test);
122
123 n.s1.appendChild(document.createElement('div'));
124}, 'slotchange event: Add a fallback content.');
125</script>
126
127<div id="test_fallback2">
128 <div id="host1">
129 <template data-mode="open">
130 <slot id="s1">
131 <div id="f1"></div>
132 </slot>
133 </template>
134 </div>
135</div>
136
137<script>
138async_test((test) => {
139 let n = createTestTree(test_fallback2);
140 removeWhiteSpaceOnlyTextNodes(n.test_fallback2);
141
142 doneIfSlotChange([n.s1], test);
143
144 n.f1.remove();
145}, 'slotchange event: Remove a fallback content.');
146</script>
147
148<div id="test_fallback3">
149 <div id="host1">
150 <template data-mode="open">
151 <slot id="s2">
152 <slot id="s1">
153 <div id="f1"></div>
154 </slot>
155 </slot>
156 </template>
157 </div>
158</div>
159
160<script>
161async_test((test) => {
162 let n = createTestTree(test_fallback3);
163 removeWhiteSpaceOnlyTextNodes(n.test_fallback3);
164
165 doneIfSlotChange([n.s1, n.s2], test);
166
167 n.s1.appendChild(document.createElement('div'));
168}, 'slotchange event: Add a fallback content to nested slots.');
169
170async_test((test) => {
171 let n = createTestTree(test_fallback3);
172 removeWhiteSpaceOnlyTextNodes(n.test_fallback3);
173
174 doneIfSlotChange([n.s1, n.s2], test);
175
176 n.f1.remove();
177}, 'slotchange event: Remove a fallback content from nested slots.');
178</script>
179
180<div id="test3">
181 <div id="host1">
182 <template id="shadowroot" data-mode="open">
183 <slot id="s1" name="slot1"></slot>
184 </template>
185 <div id="c1" slot="slot1"></div>
186 </div>
187</div>
188
189<script>
190async_test((test) => {
191 let n = createTestTree(test3);
192 removeWhiteSpaceOnlyTextNodes(n.test3);
193
194 doneIfSlotChange([n.s1], test);
195
196 let slot = document.createElement('slot');
197 slot.setAttribute('name', 'slot1');
198 n.shadowroot.insertBefore(slot, n.s1);
199}, "slotchange event: Insert a slot before an existing slot.");
200</script>
201
202<div id="test4">
203 <div id="host1">
204 <template id="shadowroot" data-mode="open">
205 <slot id="s1" name="slot1"></slot>
206 <slot id="s2" name="slot1"></slot>
207 </template>
208 <div id="c1" slot="slot1"></div>
209 </div>
210</div>
211
212<script>
213async_test((test) => {
214 let n = createTestTree(test4);
215 removeWhiteSpaceOnlyTextNodes(n.test4);
216
217 doneIfSlotChange([n.s2], test);
218
219 n.s1.remove();
220}, "slotchange event: Remove a preceding slot.");
221</script>
222
223<div id="test5">
224 <div id="host1">
225 <template data-mode="open">
226 <div id="host2">
227 <template data-mode="open">
228 <slot id="s2" name="slot2"></slot>
229 </template>
230 <slot id="s1" name="slot1" slot="slot2"></slot>
231 </div>
232 </template>
233 <div id="c1" slot="slot1"></div>
234 </div>
235</div>
236
237<script>
238async_test((test) => {
239 let n = createTestTree(test5);
240 removeWhiteSpaceOnlyTextNodes(n.test5);
241
242 doneIfSlotChange([n.s1, n.s2], test);
243
244 n.c1.remove();
245}, "slotchange event: A slot is assigned to another slot.");
246</script>
247
248<div id="test6">
249 <div id="host1">
250 <template data-mode="open">
251 <div id="host2">
252 <template data-mode="open">
253 <slot id="s2" name="slot2"></slot>
254 </template>
255 <slot id="s1" name="slot1" slot="slot2"></slot>
256 </div>
257 </template>
258 </div>
259</div>
260
261<script>
262async_test((test) => {
263 let n = createTestTree(test6);
264 removeWhiteSpaceOnlyTextNodes(n.test6);
265
266 doneIfSlotChange([n.s2], test);
267
268 n.s1.remove();
269}, "slotchange event: Even if distributed nodes do not change, slotchange should be fired if assigned nodes are changed.");
270</script>