Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(36)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/shadow-dom/slots.html

Issue 2060793002: Rewrite tests for slots (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@events-related
Patch Set: fixed Created 4 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/shadow-dom/resources/shadow-dom.js ('k') | third_party/WebKit/LayoutTests/shadow-dom/slots-api-1.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <script src="../resources/testharness.js"></script>
3 <script src="../resources/testharnessreport.js"></script>
4 <script src="resources/shadow-dom.js"></script>
5
6 <div id="test_basic">
7 <div id="host">
8 <template data-mode="open">
9 <slot id="s1" name="slot1"></slot>
10 </template>
11 <div id="c1" slot="slot1"></div>
12 </div>
13 </div>
14
15 <script>
16 test(() => {
17 let n = createTestTree(test_basic);
18 removeWhiteSpaceOnlyTextNodes(n.test_basic);
19
20 assert_equals(n.c1.assignedSlot, n.s1);
21 assert_array_equals(n.s1.assignedNodes(), [n.c1]);
22 }, 'Slots: Basic.');
23 </script>
24
25 <div id="test_basic_closed">
26 <div id="host">
27 <template data-mode="closed">
28 <slot id="s1" name="slot1"></slot>
29 </template>
30 <div id="c1" slot="slot1"></div>
31 </div>
32 </div>
33
34 <script>
35 test(() => {
36 let n = createTestTree(test_basic_closed);
37 removeWhiteSpaceOnlyTextNodes(n.test_basic_closed);
38
39 assert_equals(n.c1.assignedSlot, null);
40 assert_array_equals(n.s1.assignedNodes(), [n.c1]);
41 }, 'Slots: Slots in closed.');
42 </script>
43
44 <div id="test_slot_not_in_shadow">
45 <slot id="s1"></slot>
46 </div>
47
48 <script>
49 test(() => {
50 let n = createTestTree(test_slot_not_in_shadow);
51 removeWhiteSpaceOnlyTextNodes(n.test_slot_not_in_shadow);
52
53 assert_array_equals(n.s1.assignedNodes(), []);
54 }, 'Slots: Slots not in a shadow tree.');
55 </script>
56
57 <div id="test_slot_not_in_shadow_2">
58 <slot id="s1">
59 <div id="c1"></div>
60 </slot>
61 <slot id="s2">
62 <div id="c2"></div>
63 <slot id="s3">
64 <div id="c3_1"></div>
65 <div id="c3_2"></div>
66 </slot>
67 </slot>
68 </div>
69
70 <script>
71 test(() => {
72 let n = createTestTree(test_slot_not_in_shadow_2);
73 removeWhiteSpaceOnlyTextNodes(n.test_slot_not_in_shadow_2);
74
75 assert_equals(n.c1.assignedSlot, null);
76 assert_equals(n.c2.assignedSlot, null);
77 assert_equals(n.c3_1.assignedSlot, null);
78 assert_equals(n.c3_2.assignedSlot, null);
79
80 assert_array_equals(n.s1.assignedNodes(), []);
81 assert_array_equals(n.s2.assignedNodes(), []);
82 assert_array_equals(n.s3.assignedNodes(), []);
83
84 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
85 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c2, n.c3_1, n.c3 _2]);
86 assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.c3_1, n.c3_2]);
87 }, 'Slots: Distributed nooes for Slots not in a shadow tree.');
88 </script>
89
90 <div id="test_slot_name_matching">
91 <div id="host">
92 <template data-mode="open">
93 <slot id="s1" name="slot1"></slot>
94 <slot id="s2" name="slot2"></slot>
95 <slot id="s3" name="xxx"></slot>
96 </template>
97 <div id="c1" slot="slot1"></div>
98 <div id="c2" slot="slot2"></div>
99 <div id="c3" slot="yyy"></div>
100 </div>
101 </div>
102
103 <script>
104 test(() => {
105 let n = createTestTree(test_slot_name_matching);
106 removeWhiteSpaceOnlyTextNodes(n.test_slot_name_matching);
107
108 assert_equals(n.c1.assignedSlot, n.s1);
109 assert_equals(n.c2.assignedSlot, n.s2);
110 assert_equals(n.c3.assignedSlot, null);
111 }, 'Slots: Name matching');
112 </script>
113
114 <div id="test_no_direct_host_child">
115 <div id="host">
116 <template data-mode="open">
117 <slot id="s1" name="slot1"></slot>
118 <slot id="s2" name="slot1"></slot>
119 </template>
120 <div id="c1" slot="slot1"></div>
121 <div id="c2" slot="slot1"></div>
122 <div>
123 <div id="c3" slot="slot1"></div>
124 </div>
125 </div>
126 </div>
127
128 <script>
129 test(() => {
130 let n = createTestTree(test_no_direct_host_child);
131 removeWhiteSpaceOnlyTextNodes(n.test_no_direct_host_child);
132
133 assert_equals(n.c1.assignedSlot, n.s1);
134 assert_equals(n.c2.assignedSlot, n.s1);
135 assert_equals(n.c3.assignedSlot, null);
136
137 assert_array_equals(n.s1.assignedNodes(), [n.c1, n.c2]);
138 }, 'Slots: No direct host child.');
139 </script>
140
141 <div id="test_default_slot">
142 <div id="host">
143 <template data-mode="open">
144 <slot id="s1" name="slot1"></slot>
145 <slot id="s2"></slot>
146 <slot id="s3"></slot>
147 </template>
148 <div id="c1"></div>
149 <div id="c2" slot=""></div>
150 <div id="c3" slot="foo"></div>
151 </div>
152 </div>
153
154 <script>
155 test(() => {
156 let n = createTestTree(test_default_slot);
157 removeWhiteSpaceOnlyTextNodes(n.test_default_slot);
158
159 assert_equals(n.c1.assignedSlot, n.s2);
160 assert_equals(n.c2.assignedSlot, n.s2);
161 assert_equals(n.c3.assignedSlot, null);
162 }, 'Slots: Default Slot.');
163 </script>
164
165 <div id="test_slot_in_slot">
166 <div id="host">
167 <template data-mode="open">
168 <slot id="s1" name="slot1">
169 <slot id="s2" name="slot2"></slot>
170 </slot>
171 </template>
172 <div id="c1" slot="slot2"></div>
173 <div id="c2" slot="slot1"></div>
174 </div>
175 </div>
176
177 <script>
178 test(() => {
179 let n = createTestTree(test_slot_in_slot);
180 removeWhiteSpaceOnlyTextNodes(n.test_slot_in_slot);
181
182 assert_equals(n.c1.assignedSlot, n.s2);
183 assert_equals(n.c2.assignedSlot, n.s1);
184 }, 'Slots: Slot in Slot does not matter in assignment.');
185 </script>
186
187 <div id="test_slot_is_assigned_to_slot">
188 <div id="host1">
189 <template data-mode="open">
190 <div id="host2">
191 <template data-mode="open">
192 <slot id="s2" name="slot2"></slot>
193 </template>
194 <slot id="s1" name="slot1" slot="slot2"></slot>
195 </div>
196 </template>
197 <div id="c1" slot="slot1"></div>
198 </div>
199 </div>
200
201 <script>
202 test(() => {
203 let n = createTestTree(test_slot_is_assigned_to_slot);
204 removeWhiteSpaceOnlyTextNodes(n.test_slot_is_assigned_to_slot);
205
206 assert_equals(n.c1.assignedSlot, n.s1);
207 assert_equals(n.s1.assignedSlot, n.s2);
208
209 assert_array_equals(n.s1.assignedNodes(), [n.c1]);
210 assert_array_equals(n.s2.assignedNodes(), [n.s1]);
211
212 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
213 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1]);
214 }, 'Slots: Slot is assigned to another slot');
215 </script>
216
217 <div id="test_open_closed">
218 <div id="host1">
219 <template data-mode="open">
220 <div id="host2">
221 <template data-mode="closed">
222 <slot id="s2" name="slot2"></slot>
223 </template>
224 <slot id="s1" name="slot1" slot="slot2"></slot>
225 </div>
226 </template>
227 <div id="c1" slot="slot1"></div>
228 </div>
229 </div>
230
231 <script>
232 test(() => {
233 let n = createTestTree(test_open_closed);
234 removeWhiteSpaceOnlyTextNodes(n.test_open_closed);
235
236 assert_equals(n.c1.assignedSlot, n.s1);
237 assert_equals(n.s1.assignedSlot, null,
238 'A slot in a closed shadow tree should not be accessed via assig nedSlot');
239
240 assert_array_equals(n.s1.assignedNodes(), [n.c1]);
241 assert_array_equals(n.s2.assignedNodes(), [n.s1]);
242
243 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
244 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1]);
245 }, 'Slots: Open > Closed.');
246 </script>
247
248 <div id="test_closed_closed">
249 <div id="host1">
250 <template data-mode="closed">
251 <div id="host2">
252 <template data-mode="closed">
253 <slot id="s2" name="slot2"></slot>
254 </template>
255 <slot id="s1" name="slot1" slot="slot2"></slot>
256 </div>
257 </template>
258 <div id="c1" slot="slot1"></div>
259 </div>
260 </div>
261
262 <script>
263 test(() => {
264 let n = createTestTree(test_closed_closed);
265 removeWhiteSpaceOnlyTextNodes(n.test_closed_closed);
266
267 assert_equals(n.c1.assignedSlot, null,
268 'A slot in a closed shadow tree should not be accessed via assig nedSlot');
269 assert_equals(n.s1.assignedSlot, null,
270 'A slot in a closed shadow tree should not be accessed via assig nedSlot');
271
272 assert_array_equals(n.s1.assignedNodes(), [n.c1]);
273 assert_array_equals(n.s2.assignedNodes(), [n.s1]);
274
275 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
276 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1]);
277 }, 'Slots: Closed > Closed.');
278 </script>
279
280 <div id="test_closed_open">
281 <div id="host1">
282 <template data-mode="closed">
283 <div id="host2">
284 <template data-mode="open">
285 <slot id="s2" name="slot2"></slot>
286 </template>
287 <slot id="s1" name="slot1" slot="slot2"></slot>
288 </div>
289 </template>
290 <div id="c1" slot="slot1"></div>
291 </div>
292 </div>
293
294 <script>
295 test(() => {
296 let n = createTestTree(test_closed_open);
297 removeWhiteSpaceOnlyTextNodes(n.test_closed_open);
298
299 assert_equals(n.c1.assignedSlot, null,
300 'A slot in a closed shadow tree should not be accessed via assig nedSlot');
301 assert_equals(n.s1.assignedSlot, n.s2);
302
303 assert_array_equals(n.s1.assignedNodes(), [n.c1]);
304 assert_array_equals(n.s2.assignedNodes(), [n.s1]);
305
306 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
307 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1]);
308 }, 'Slots: Closed > Open.');
309 </script>
310
311 <div id="test_complex">
312 <div id="host1">
313 <template data-mode="open">
314 <div id="host2">
315 <template data-mode="open">
316 <slot id="s5" name="slot5"></slot>
317 <slot id="s6" name="slot6"></slot>
318 <slot id="s7"></slot>
319 <slot id="s8" name="slot8"></slot>
320 </template>
321 <slot id="s1" name="slot1" slot="slot5"></slot>
322 <slot id="s2" name="slot2" slot="slot6"></slot>
323 <slot id="s3"></slot>
324 <slot id="s4" name="slot4" slot="slot-none"></slot>
325 <div id="c5" slot="slot5"></div>
326 <div id="c6" slot="slot6"></div>
327 <div id="c7"></div>
328 <div id="c8" slot="slot-none"></div>
329 </div>
330 </template>
331 <div id="c1" slot="slot1"></div>
332 <div id="c2" slot="slot2"></div>
333 <div id="c3"></div>
334 <div id="c4" slot="slot-none"></div>
335 </div>
336 </div>
337
338 <script>
339 test(() => {
340 let n = createTestTree(test_complex);
341 removeWhiteSpaceOnlyTextNodes(n.test_complex);
342
343 assert_equals(n.c1.assignedSlot, n.s1);
344 assert_equals(n.c2.assignedSlot, n.s2);
345 assert_equals(n.c3.assignedSlot, n.s3);
346 assert_equals(n.c4.assignedSlot, null);
347
348 assert_equals(n.s1.assignedSlot, n.s5);
349 assert_equals(n.s2.assignedSlot, n.s6);
350 assert_equals(n.s3.assignedSlot, n.s7);
351 assert_equals(n.s4.assignedSlot, null);
352
353 assert_equals(n.c5.assignedSlot, n.s5);
354 assert_equals(n.c6.assignedSlot, n.s6);
355 assert_equals(n.c7.assignedSlot, n.s7);
356 assert_equals(n.c8.assignedSlot, null);
357
358 assert_array_equals(n.s1.assignedNodes(), [n.c1]);
359 assert_array_equals(n.s2.assignedNodes(), [n.c2]);
360 assert_array_equals(n.s3.assignedNodes(), [n.c3]);
361 assert_array_equals(n.s4.assignedNodes(), []);
362 assert_array_equals(n.s5.assignedNodes(), [n.s1, n.c5]);
363 assert_array_equals(n.s6.assignedNodes(), [n.s2, n.c6]);
364 assert_array_equals(n.s7.assignedNodes(), [n.s3, n.c7]);
365 assert_array_equals(n.s8.assignedNodes(), []);
366
367 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
368 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c2]);
369 assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.c3]);
370 assert_array_equals(n.s4.assignedNodes({ flatten: true }), []);
371 assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c1, n.c5]);
372 assert_array_equals(n.s6.assignedNodes({ flatten: true }), [n.c2, n.c6]);
373 assert_array_equals(n.s7.assignedNodes({ flatten: true }), [n.c3, n.c7]);
374 assert_array_equals(n.s8.assignedNodes({ flatten: true }), []);
375 }, 'Slots: Complex case: Basi line.');
376
377 test(() => {
378 let n = createTestTree(test_complex);
379 removeWhiteSpaceOnlyTextNodes(n.test_complex);
380
381 let d1 = document.createElement('div');
382 d1.setAttribute('slot', 'slot1');
383 n.host1.appendChild(d1);
384
385 assert_array_equals(n.s1.assignedNodes(), [n.c1, d1]);
386 assert_equals(d1.assignedSlot, n.s1);
387
388 assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c1, d1, n.c5]);
389 }, 'Slots: Mutation: appendChild.');
390
391 test(() => {
392 let n = createTestTree(test_complex);
393 removeWhiteSpaceOnlyTextNodes(n.test_complex);
394
395 n.c1.setAttribute('slot', 'slot-none');
396
397 assert_array_equals(n.s1.assignedNodes(), []);
398 assert_equals(n.c1.assignedSlot, null);
399
400 assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c5]);
401 }, 'Slots: Mutation: Change slot= attribute 1.');
402
403 test(() => {
404 let n = createTestTree(test_complex);
405 removeWhiteSpaceOnlyTextNodes(n.test_complex);
406
407 n.c1.setAttribute('slot', 'slot2');
408
409 assert_array_equals(n.s1.assignedNodes(), []);
410 assert_array_equals(n.s2.assignedNodes(), [n.c1, n.c2]);
411 assert_equals(n.c1.assignedSlot, n.s2);
412
413 assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c5]);
414 assert_array_equals(n.s6.assignedNodes({ flatten: true }), [n.c1, n.c2, n.c6]) ;
415 }, 'Slots: Mutation: Change slot= attribute 2.');
416
417 test(() => {
418 let n = createTestTree(test_complex);
419 removeWhiteSpaceOnlyTextNodes(n.test_complex);
420
421 n.c4.setAttribute('slot', 'slot1');
422
423 assert_array_equals(n.s1.assignedNodes(), [n.c1, n.c4]);
424 assert_equals(n.c4.assignedSlot, n.s1);
425
426 assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c1, n.c4, n.c5]) ;
427 }, 'Slots: Mutation: Change slot= attribute 3.');
428
429 test(() => {
430 let n = createTestTree(test_complex);
431 removeWhiteSpaceOnlyTextNodes(n.test_complex);
432
433 n.c1.remove();
434
435 assert_array_equals(n.s1.assignedNodes(), []);
436 assert_equals(n.c1.assignedSlot, null);
437
438 assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c5]);
439 }, 'Slots: Mutation: Remove a child.');
440
441 test(() => {
442 let n = createTestTree(test_complex);
443 removeWhiteSpaceOnlyTextNodes(n.test_complex);
444
445 let slot = document.createElement('slot');
446 slot.setAttribute('name', 'slot1');
447 n.host2.appendChild(slot);
448
449 assert_array_equals(slot.assignedNodes(), []);
450 }, 'Slots: Mutation: Add a slot: after.');
451
452 test(() => {
453 let n = createTestTree(test_complex);
454 removeWhiteSpaceOnlyTextNodes(n.test_complex);
455
456 let slot = document.createElement('slot');
457 slot.setAttribute('name', 'slot1');
458 n.host2.insertBefore(slot, n.s1);
459
460 assert_array_equals(slot.assignedNodes(), [n.c1]);
461 assert_equals(n.c1.assignedSlot, slot);
462
463 assert_array_equals(n.s7.assignedNodes(), [slot, n.s3, n.c7]);
464 assert_array_equals(n.s7.assignedNodes({ flatten: true }), [n.c1, n.c3, n.c7]) ;
465 }, 'Slots: Mutation: Add a slot: before.');
466
467 test(() => {
468 let n = createTestTree(test_complex);
469 removeWhiteSpaceOnlyTextNodes(n.test_complex);
470
471 n.s1.remove();
472
473 assert_array_equals(n.s1.assignedNodes(), []);
474 assert_equals(n.c1.assignedSlot, null);
475
476 assert_array_equals(n.s5.assignedNodes(), [n.c5]);
477 assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c5]);
478 }, 'Slots: Mutation: Remove a slot.');
479
480 test(() => {
481 let n = createTestTree(test_complex);
482 removeWhiteSpaceOnlyTextNodes(n.test_complex);
483
484 n.s1.setAttribute('name', 'slot2');
485
486 assert_array_equals(n.s1.assignedNodes(), [n.c2]);
487 assert_equals(n.c1.assignedSlot, null);
488 assert_equals(n.c2.assignedSlot, n.s1);
489
490 assert_array_equals(n.s5.assignedNodes(), [n.s1, n.c5]);
491 assert_array_equals(n.s5.assignedNodes({ flatten: true }), [n.c2, n.c5]);
492 }, 'Slots: Mutation: Change slot name= attribute.');
493
494 test(() => {
495 let n = createTestTree(test_complex);
496 removeWhiteSpaceOnlyTextNodes(n.test_complex);
497
498 n.s1.setAttribute('slot', 'slot6');
499
500 assert_array_equals(n.s1.assignedNodes(), [n.c1]);
501
502 assert_array_equals(n.s5.assignedNodes(), [n.c5]);
503 assert_array_equals(n.s6.assignedNodes(), [n.s1, n.s2, n.c6]);
504 assert_array_equals(n.s6.assignedNodes({ flatten: true }), [n.c1, n.c2, n.c6]) ;
505 }, 'Slots: Mutation: Change slot slot= attribute.');
506 </script>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/shadow-dom/resources/shadow-dom.js ('k') | third_party/WebKit/LayoutTests/shadow-dom/slots-api-1.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698