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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/imported/wpt/shadow-dom/slotchange-event.html

Issue 2360123002: Import wpt@3801ab5834101113e5f53bfb57e3c76b2b87ecbb (Closed)
Patch Set: Mark the failing test to Win only Created 4 years, 2 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/imported/wpt/shadow-dom/resources/event-path-test-helpers.js ('k') | no next file » | 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 <html>
3 <head>
4 <title>Shadow DOM: slotchange event</title>
5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
6 <link rel="help" href="https://dom.spec.whatwg.org/#signaling-slot-change">
7 <script src="/resources/testharness.js"></script>
8 <script src="/resources/testharnessreport.js"></script>
9 </head>
10 <body>
11 <div id="log"></div>
12 <script>
13 // FIXME: Fix these test cases once https://github.com/w3c/webcomponents/issues/ 571 is resolved.
14
15 function treeName(mode, connectedToDocument)
16 {
17 return (mode == 'open' ? 'an ' : 'a ') + mode + ' shadow root '
18 + (connectedToDocument ? '' : ' not') + ' in a document';
19 }
20
21 function testAppendingSpanToShadowRootWithDefaultSlot(mode, connectedToDocument)
22 {
23 var test = async_test('slotchange event must fire on a default slot element inside '
24 + treeName(mode, connectedToDocument));
25
26 var host;
27 var slot;
28 var eventCount = 0;
29
30 test.step(function () {
31 host = document.createElement('div');
32 if (connectedToDocument)
33 document.body.appendChild(host);
34
35 var shadowRoot = host.attachShadow({'mode': mode});
36 slot = document.createElement('slot');
37
38 slot.addEventListener('slotchange', function (event) {
39 if (event.isFakeEvent)
40 return;
41
42 test.step(function () {
43 assert_equals(event.type, 'slotchange', 'slotchange event\'s typ e must be "slotchange"');
44 assert_equals(event.target, slot, 'slotchange event\'s target mu st be the slot element');
45 assert_equals(event.relatedTarget, undefined, 'slotchange must n ot set relatedTarget');
46 });
47 eventCount++;
48 });
49
50 shadowRoot.appendChild(slot);
51
52 host.appendChild(document.createElement('span'));
53 host.appendChild(document.createElement('b'));
54
55 assert_equals(eventCount, 0, 'slotchange event must not be fired synchro nously');
56 });
57
58 setTimeout(function () {
59 test.step(function () {
60 assert_equals(eventCount, 1, 'slotchange must be fired exactly once after the assigned nodes changed');
61
62 host.appendChild(document.createElement('i'));
63 });
64
65 setTimeout(function () {
66 test.step(function () {
67 assert_equals(eventCount, 2, 'slotchange must be fired exactly o nce after the assigned nodes changed');
68
69 host.appendChild(document.createTextNode('hello'));
70
71 var fakeEvent = new Event('slotchange');
72 fakeEvent.isFakeEvent = true;
73 slot.dispatchEvent(fakeEvent);
74 });
75
76 setTimeout(function () {
77 test.step(function () {
78 assert_equals(eventCount, 3, 'slotchange must be fired exact ly once after the assigned nodes changed'
79 + ' event if there was a synthetic slotchange event fire d');
80 });
81 test.done();
82 }, 1);
83 }, 1);
84 }, 1);
85 }
86
87 testAppendingSpanToShadowRootWithDefaultSlot('open', true);
88 testAppendingSpanToShadowRootWithDefaultSlot('closed', true);
89 testAppendingSpanToShadowRootWithDefaultSlot('open', false);
90 testAppendingSpanToShadowRootWithDefaultSlot('closed', false);
91
92 function testAppendingSpanToShadowRootWithNamedSlot(mode, connectedToDocument)
93 {
94 var test = async_test('slotchange event must fire on a named slot element in side'
95 + treeName(mode, connectedToDocument));
96
97 var host;
98 var slot;
99 var eventCount = 0;
100
101 test.step(function () {
102 host = document.createElement('div');
103 if (connectedToDocument)
104 document.body.appendChild(host);
105
106 var shadowRoot = host.attachShadow({'mode': mode});
107 slot = document.createElement('slot');
108 slot.name = 'someSlot';
109
110 slot.addEventListener('slotchange', function (event) {
111 if (event.isFakeEvent)
112 return;
113
114 test.step(function () {
115 assert_equals(event.type, 'slotchange', 'slotchange event\'s typ e must be "slotchange"');
116 assert_equals(event.target, slot, 'slotchange event\'s target mu st be the slot element');
117 assert_equals(event.relatedTarget, undefined, 'slotchange must n ot set relatedTarget');
118 });
119 eventCount++;
120 });
121
122 shadowRoot.appendChild(slot);
123
124 var span = document.createElement('span');
125 span.slot = 'someSlot';
126 host.appendChild(span);
127
128 var b = document.createElement('b');
129 b.slot = 'someSlot';
130 host.appendChild(b);
131
132 assert_equals(eventCount, 0, 'slotchange event must not be fired synchro nously');
133 });
134
135 setTimeout(function () {
136 test.step(function () {
137 assert_equals(eventCount, 1, 'slotchange must be fired exactly once after the assigned nodes changed');
138
139 var i = document.createElement('i');
140 i.slot = 'someSlot';
141 host.appendChild(i);
142 });
143
144 setTimeout(function () {
145 test.step(function () {
146 assert_equals(eventCount, 2, 'slotchange must be fired exactly o nce after the assigned nodes changed');
147
148 var em = document.createElement('em');
149 em.slot = 'someSlot';
150 host.appendChild(em);
151
152 var fakeEvent = new Event('slotchange');
153 fakeEvent.isFakeEvent = true;
154 slot.dispatchEvent(fakeEvent);
155 });
156
157 setTimeout(function () {
158 test.step(function () {
159 assert_equals(eventCount, 3, 'slotchange must be fired exact ly once after the assigned nodes changed'
160 + ' event if there was a synthetic slotchange event fire d');
161 });
162 test.done();
163 }, 1);
164
165 }, 1);
166 }, 1);
167 }
168
169 testAppendingSpanToShadowRootWithNamedSlot('open', true);
170 testAppendingSpanToShadowRootWithNamedSlot('closed', true);
171 testAppendingSpanToShadowRootWithNamedSlot('open', false);
172 testAppendingSpanToShadowRootWithNamedSlot('closed', false);
173
174 function testSlotchangeDoesNotFireWhenOtherSlotsChange(mode, connectedToDocument )
175 {
176 var test = async_test('slotchange event must not fire on a slot element insi de '
177 + treeName(mode, connectedToDocument)
178 + ' when another slot\'s assigned nodes change');
179
180 var host;
181 var defaultSlotEventCount = 0;
182 var namedSlotEventCount = 0;
183
184 test.step(function () {
185 host = document.createElement('div');
186 if (connectedToDocument)
187 document.body.appendChild(host);
188
189 var shadowRoot = host.attachShadow({'mode': mode});
190 var defaultSlot = document.createElement('slot');
191 defaultSlot.addEventListener('slotchange', function (event) {
192 test.step(function () {
193 assert_equals(event.target, defaultSlot, 'slotchange event\'s ta rget must be the slot element');
194 });
195 defaultSlotEventCount++;
196 });
197
198 var namedSlot = document.createElement('slot');
199 namedSlot.name = 'slotName';
200 namedSlot.addEventListener('slotchange', function (event) {
201 test.step(function () {
202 assert_equals(event.target, namedSlot, 'slotchange event\'s targ et must be the slot element');
203 });
204 namedSlotEventCount++;
205 });
206
207 shadowRoot.appendChild(defaultSlot);
208 shadowRoot.appendChild(namedSlot);
209
210 host.appendChild(document.createElement('span'));
211
212 assert_equals(defaultSlotEventCount, 0, 'slotchange event must not be fi red synchronously');
213 assert_equals(namedSlotEventCount, 0, 'slotchange event must not be fire d synchronously');
214 });
215
216 setTimeout(function () {
217 test.step(function () {
218 assert_equals(defaultSlotEventCount, 1,
219 'slotchange must be fired exactly once after the assigned nodes change on a default slot');
220 assert_equals(namedSlotEventCount, 0,
221 'slotchange must not be fired on a named slot after the assigned nodes change on a default slot');
222
223 var span = document.createElement('span');
224 span.slot = 'slotName';
225 host.appendChild(span);
226 });
227
228 setTimeout(function () {
229 test.step(function () {
230 assert_equals(defaultSlotEventCount, 1,
231 'slotchange must not be fired on a default slot after the as signed nodes change on a named slot');
232 assert_equals(namedSlotEventCount, 1,
233 'slotchange must be fired exactly once after the assigned no des change on a default slot');
234 });
235 test.done();
236 }, 1);
237 }, 1);
238 }
239
240 testSlotchangeDoesNotFireWhenOtherSlotsChange('open', true);
241 testSlotchangeDoesNotFireWhenOtherSlotsChange('closed', true);
242 testSlotchangeDoesNotFireWhenOtherSlotsChange('open', false);
243 testSlotchangeDoesNotFireWhenOtherSlotsChange('closed', false);
244
245 function testSlotchangeDoesNotFireForMutationBeforeOrAfterSlotWasPresent(mode, c onnectedToDocument)
246 {
247 var test = async_test('slotchange event must not fire on a slot element insi de '
248 + treeName(mode, connectedToDocument)
249 + ' when the shadow host was mutated before the slot was inserted or aft er the slot was removed');
250
251 var host;
252 var slot;
253 var eventCount = 0;
254
255 test.step(function () {
256 host = document.createElement('div');
257 if (connectedToDocument)
258 document.body.appendChild(host);
259
260 var shadowRoot = host.attachShadow({'mode': mode});
261 slot = document.createElement('slot');
262 slot.addEventListener('slotchange', function (event) {
263 test.step(function () {
264 assert_equals(event.target, slot, 'slotchange event\'s target mu st be the slot element');
265 });
266 eventCount++;
267 });
268
269 host.appendChild(document.createElement('span'));
270 shadowRoot.appendChild(slot);
271
272 assert_equals(eventCount, 0, 'slotchange event must not be fired synchro nously');
273 });
274
275 setTimeout(function () {
276 test.step(function () {
277 assert_equals(eventCount, 0,
278 'slotchange must not be fired on a slot element if the assigned nodes changed before the slot was inserted');
279 host.removeChild(host.firstChild);
280 });
281
282 setTimeout(function () {
283 test.step(function () {
284 assert_equals(eventCount, 1,
285 'slotchange must be fired exactly once after the assigned no des change on a slot while the slot element was in the tree');
286 slot.parentNode.removeChild(slot);
287 host.appendChild(document.createElement('span'));
288 });
289
290 setTimeout(function () {
291 assert_equals(eventCount, 1,
292 'slotchange must not be fired on a slot element if the assig ned nodes changed after the slot was removed');
293 test.done();
294 }, 1);
295 }, 1);
296 }, 1);
297 }
298
299 testSlotchangeDoesNotFireForMutationBeforeOrAfterSlotWasPresent('open', true);
300 testSlotchangeDoesNotFireForMutationBeforeOrAfterSlotWasPresent('closed', true);
301 testSlotchangeDoesNotFireForMutationBeforeOrAfterSlotWasPresent('open', false);
302 testSlotchangeDoesNotFireForMutationBeforeOrAfterSlotWasPresent('closed', false) ;
303
304 function testSlotchangeFiresOnTransientlyPresentSlot(mode, connectedToDocument)
305 {
306 var test = async_test('slotchange event must fire on a slot element inside '
307 + treeName(mode, connectedToDocument)
308 + ' even if the slot was removed immediately after the assigned nodes we re mutated');
309
310 var host;
311 var slot;
312 var anotherSlot;
313 var slotEventCount = 0;
314 var anotherSlotEventCount = 0;
315
316 test.step(function () {
317 host = document.createElement('div');
318 if (connectedToDocument)
319 document.body.appendChild(host);
320
321 var shadowRoot = host.attachShadow({'mode': mode});
322 slot = document.createElement('slot');
323 slot.name = 'someSlot';
324 slot.addEventListener('slotchange', function (event) {
325 test.step(function () {
326 assert_equals(event.target, slot, 'slotchange event\'s target mu st be the slot element');
327 });
328 slotEventCount++;
329 });
330
331 anotherSlot = document.createElement('slot');
332 anotherSlot.name = 'someSlot';
333 anotherSlot.addEventListener('slotchange', function (event) {
334 test.step(function () {
335 assert_equals(event.target, anotherSlot, 'slotchange event\'s ta rget must be the slot element');
336 });
337 anotherSlotEventCount++;
338 });
339
340 shadowRoot.appendChild(slot);
341
342 var span = document.createElement('span');
343 span.slot = 'someSlot';
344 host.appendChild(span);
345
346 shadowRoot.removeChild(slot);
347 shadowRoot.appendChild(anotherSlot);
348
349 var span = document.createElement('span');
350 span.slot = 'someSlot';
351 host.appendChild(span);
352
353 shadowRoot.removeChild(anotherSlot);
354
355 assert_equals(slotEventCount, 0, 'slotchange event must not be fired syn chronously');
356 assert_equals(anotherSlotEventCount, 0, 'slotchange event must not be fi red synchronously');
357 });
358
359 setTimeout(function () {
360 test.step(function () {
361 assert_equals(slotEventCount, 1,
362 'slotchange must be fired on a slot element if the assigned node s changed while the slot was present');
363 assert_equals(anotherSlotEventCount, 1,
364 'slotchange must be fired on a slot element if the assigned node s changed while the slot was present');
365 });
366 test.done();
367 }, 1);
368 }
369
370 testSlotchangeFiresOnTransientlyPresentSlot('open', true);
371 testSlotchangeFiresOnTransientlyPresentSlot('closed', true);
372 testSlotchangeFiresOnTransientlyPresentSlot('open', false);
373 testSlotchangeFiresOnTransientlyPresentSlot('closed', false);
374
375 function testSlotchangeFiresOnInnerHTML(mode, connectedToDocument)
376 {
377 var test = async_test('slotchange event must fire on a slot element inside '
378 + treeName(mode, connectedToDocument)
379 + ' when innerHTML modifies the children of the shadow host');
380
381 var host;
382 var defaultSlot;
383 var namedSlot;
384 var defaultSlotEventCount = 0;
385 var namedSlotEventCount = 0;
386
387 test.step(function () {
388 host = document.createElement('div');
389 if (connectedToDocument)
390 document.body.appendChild(host);
391
392 var shadowRoot = host.attachShadow({'mode': mode});
393 defaultSlot = document.createElement('slot');
394 defaultSlot.addEventListener('slotchange', function (event) {
395 test.step(function () {
396 assert_equals(event.target, defaultSlot, 'slotchange event\'s ta rget must be the slot element');
397 });
398 defaultSlotEventCount++;
399 });
400
401 namedSlot = document.createElement('slot');
402 namedSlot.name = 'someSlot';
403 namedSlot.addEventListener('slotchange', function (event) {
404 test.step(function () {
405 assert_equals(event.target, namedSlot, 'slotchange event\'s targ et must be the slot element');
406 });
407 namedSlotEventCount++;
408 });
409 shadowRoot.appendChild(namedSlot);
410 shadowRoot.appendChild(defaultSlot);
411 host.innerHTML = 'foo <b>bar</b>';
412
413 assert_equals(defaultSlotEventCount, 0, 'slotchange event must not be fi red synchronously');
414 assert_equals(namedSlotEventCount, 0, 'slotchange event must not be fire d synchronously');
415 });
416
417 setTimeout(function () {
418 test.step(function () {
419 assert_equals(defaultSlotEventCount, 1,
420 'slotchange must be fired on a slot element if the assigned node s are changed by innerHTML');
421 assert_equals(namedSlotEventCount, 0,
422 'slotchange must not be fired on a slot element if the assigned nodes are not changed by innerHTML');
423 host.innerHTML = 'baz';
424 });
425 setTimeout(function () {
426 test.step(function () {
427 assert_equals(defaultSlotEventCount, 2,
428 'slotchange must be fired on a slot element if the assigned nodes are changed by innerHTML');
429 assert_equals(namedSlotEventCount, 0,
430 'slotchange must not be fired on a slot element if the assig ned nodes are not changed by innerHTML');
431 host.innerHTML = '';
432 });
433 setTimeout(function () {
434 test.step(function () {
435 assert_equals(defaultSlotEventCount, 3,
436 'slotchange must be fired on a slot element if the assig ned nodes are changed by innerHTML');
437 assert_equals(namedSlotEventCount, 0,
438 'slotchange must not be fired on a slot element if the a ssigned nodes are not changed by innerHTML');
439 host.innerHTML = '<b slot="someSlot">content</b>';
440 });
441 setTimeout(function () {
442 test.step(function () {
443 assert_equals(defaultSlotEventCount, 3,
444 'slotchange must not be fired on a slot element if t he assigned nodes are not changed by innerHTML');
445 assert_equals(namedSlotEventCount, 1,
446 'slotchange must not be fired on a slot element if t he assigned nodes are changed by innerHTML');
447 host.innerHTML = '';
448 });
449 setTimeout(function () {
450 test.step(function () {
451 // FIXME: This test would fail in the current implem entation because we can't tell
452 // whether a text node was removed in AllChildrenRem oved or not.
453 // assert_equals(defaultSlotEventCount, 3,
454 // 'slotchange must not be fired on a slot elemen t if the assigned nodes are not changed by innerHTML');
455 assert_equals(namedSlotEventCount, 2,
456 'slotchange must not be fired on a slot element if the assigned nodes are changed by innerHTML');
457 });
458 test.done();
459 }, 1);
460 }, 1);
461 }, 1);
462 }, 1);
463 }, 1);
464 }
465
466 testSlotchangeFiresOnInnerHTML('open', true);
467 testSlotchangeFiresOnInnerHTML('closed', true);
468 testSlotchangeFiresOnInnerHTML('open', false);
469 testSlotchangeFiresOnInnerHTML('closed', false);
470
471 function testSlotchangeFiresWhenNestedSlotChange(mode, connectedToDocument)
472 {
473 var test = async_test('slotchange event must fire on a slot element inside '
474 + treeName(mode, connectedToDocument)
475 + ' when nested slots\'s contents change');
476
477 var outerHost;
478 var innerHost;
479 var outerSlot;
480 var innerSlot;
481 var outerSlotEventCount = 0;
482 var innerSlotEventCount = 0;
483
484 test.step(function () {
485 outerHost = document.createElement('div');
486 if (connectedToDocument)
487 document.body.appendChild(outerHost);
488
489 var outerShadow = outerHost.attachShadow({'mode': mode});
490 outerShadow.appendChild(document.createElement('span'));
491 outerSlot = document.createElement('slot');
492 outerSlot.addEventListener('slotchange', function (event) {
493 event.stopPropagation();
494 test.step(function () {
495 assert_equals(event.target, outerSlot, 'slotchange event\'s targ et must be the slot element');
496 });
497 outerSlotEventCount++;
498 });
499
500 innerHost = document.createElement('div');
501 innerHost.appendChild(outerSlot);
502 outerShadow.appendChild(innerHost);
503
504 var innerShadow = innerHost.attachShadow({'mode': mode});
505 innerShadow.appendChild(document.createElement('span'));
506 innerSlot = document.createElement('slot');
507 innerSlot.addEventListener('slotchange', function (event) {
508 event.stopPropagation();
509 test.step(function () {
510 assert_equals(event.target, innerSlot, 'slotchange event\'s targ et must be the slot element');
511 });
512 innerSlotEventCount++;
513 });
514 innerShadow.appendChild(innerSlot);
515
516 outerHost.appendChild(document.createElement('span'));
517
518 assert_equals(innerSlotEventCount, 0, 'slotchange event must not be fire d synchronously');
519 assert_equals(outerSlotEventCount, 0, 'slotchange event must not be fire d synchronously');
520 });
521
522 setTimeout(function () {
523 test.step(function () {
524 assert_equals(innerSlotEventCount, 1,
525 'slotchange must be fired on a slot element if the assigned node s changed');
526 assert_equals(outerSlotEventCount, 1,
527 'slotchange must be fired on a slot element if the assigned node s of an inner slot changed');
528 });
529 test.done();
530 }, 1);
531 }
532
533 testSlotchangeFiresWhenNestedSlotChange('open', true);
534 testSlotchangeFiresWhenNestedSlotChange('closed', true);
535 testSlotchangeFiresWhenNestedSlotChange('open', false);
536 testSlotchangeFiresWhenNestedSlotChange('closed', false);
537
538 function testSlotchangeFiresAtEndOfMicroTask(mode, connectedToDocument)
539 {
540 var test = async_test('slotchange event must fire at the end of current micr otask after mutation observers are invoked inside '
541 + treeName(mode, connectedToDocument) + ' when slots\'s contents change' );
542
543 var outerHost;
544 var innerHost;
545 var outerSlot;
546 var innerSlot;
547 var slotchangeEvents = [];
548
549 test.step(function () {
550 outerHost = document.createElement('div');
551 if (connectedToDocument)
552 document.body.appendChild(outerHost);
553
554 var outerShadow = outerHost.attachShadow({'mode': mode});
555 outerShadow.appendChild(document.createElement('span'));
556 outerSlot = document.createElement('slot');
557 outerSlot.addEventListener('slotchange', function (event) {
558 event.stopPropagation();
559 test.step(function () {
560 assert_equals(event.target, outerSlot, 'slotchange event\'s targ et must be the slot element');
561 });
562 slotchangeEvents.push('outer');
563 });
564
565 innerHost = document.createElement('div');
566 innerHost.appendChild(outerSlot);
567 outerShadow.appendChild(innerHost);
568
569 var innerShadow = innerHost.attachShadow({'mode': mode});
570 innerShadow.appendChild(document.createElement('span'));
571 innerSlot = document.createElement('slot');
572 innerSlot.addEventListener('slotchange', function (event) {
573 event.stopPropagation();
574 test.step(function () {
575 assert_equals(event.target, innerSlot, 'slotchange event\'s targ et must be the slot element');
576 });
577 slotchangeEvents.push('inner');
578 });
579 innerShadow.appendChild(innerSlot);
580
581 outerHost.appendChild(document.createElement('span'));
582
583 assert_equals(slotchangeEvents.length, 0, 'slotchange event must not be fired synchronously');
584 });
585
586 var element = document.createElement('div');
587
588 new MutationObserver(function () {
589 test.step(function () {
590 assert_equals(slotchangeEvents.length, 0, 'slotchange event must not be fired before mutation records are delivered');
591 });
592 element.setAttribute('title', 'bar');
593 innerHost.appendChild(document.createElement('span'));
594 }).observe(element, {attributes: true, attributeFilter: ['id']});
595
596 new MutationObserver(function () {
597 test.step(function () {
598 assert_array_equals(slotchangeEvents, ['outer', 'inner'], 'slotchang e event must be fired during a single compound microtask');
599 });
600 }).observe(element, {attributes: true, attributeFilter: ['title']});
601
602 element.setAttribute('id', 'foo');
603
604 setTimeout(function () {
605 test.step(function () {
606 assert_array_equals(slotchangeEvents, ['outer', 'inner', 'inner'],
607 'a distinct slotchange event must be enqueued for changes made d uring a mutation observer delivery');
608 });
609 test.done();
610 }, 0);
611 }
612
613 testSlotchangeFiresAtEndOfMicroTask('open', true);
614 testSlotchangeFiresAtEndOfMicroTask('closed', true);
615 testSlotchangeFiresAtEndOfMicroTask('open', false);
616 testSlotchangeFiresAtEndOfMicroTask('closed', false);
617
618 </script>
619 </body>
620 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/imported/wpt/shadow-dom/resources/event-path-test-helpers.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698