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

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

Issue 1899653002: Support slotchange event (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Bug fix Created 4 years, 8 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 | « no previous file | third_party/WebKit/Source/core/dom/Element.h » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <script src='../resources/testharness.js'></script> 2 <script src='../resources/testharness.js'></script>
3 <script src='../resources/testharnessreport.js'></script> 3 <script src='../resources/testharnessreport.js'></script>
4 <script src='resources/shadow-dom.js'></script> 4 <script src='resources/shadow-dom.js'></script>
5 <div id='d1'> 5 <div id='d1'>
6 <template data-mode='open' data-expose-as='d1_shadow'> 6 <template data-mode='open' data-expose-as='d1_shadow'>
7 <div id='d1-d1'> 7 <div id='d1-d1'>
8 <template data-mode='open' data-expose-as='d1_d1_shadow'> 8 <template data-mode='open' data-expose-as='d1_d1_shadow'>
9 <slot name='d1-d1-s1'></slot> 9 <slot name='d1-d1-s1'></slot>
10 </template> 10 </template>
11 <slot name='d1-s1' slot='d1-d1-s1'></slot> 11 <slot name='d1-s1' slot='d1-d1-s1'></slot>
12 </div> 12 </div>
13 </template> 13 </template>
14 <div id='d2' slot='d1-s1'></div> 14 <div id='d2' slot='d1-s1'></div>
15 </div> 15 </div>
16 <script> 16 <script>
17 'use strict'; 17 'use strict';
18 convertTemplatesToShadowRootsWithin(d1); 18 convertTemplatesToShadowRootsWithin(d1);
19 removeWhiteSpaceOnlyTextNodes(d1); 19 removeWhiteSpaceOnlyTextNodes(d1);
20 20
21 async_test((test) => { 21 async_test((test) => {
22 var count = 0; 22 var count_for_d1_s1 = 0;
23 var count_for_d1_d1_s1 = 0;
23 24
24 const d1_s1 = d1_shadow.querySelector('slot'); 25 const d1_s1 = d1_shadow.querySelector('slot');
25 const d1_d1_s1 = d1_d1_shadow.querySelector('slot'); 26 const d1_d1_s1 = d1_d1_shadow.querySelector('slot');
26 27
27 assert_array_equals(d1_s1.assignedNodes(), [d2]); 28 assert_array_equals(d1_s1.assignedNodes(), [d2]);
28 assert_array_equals(d1_s1.assignedNodes({'flatten': true}), [d2]); 29 assert_array_equals(d1_s1.assignedNodes({'flatten': true}), [d2]);
29 30
30 assert_array_equals(d1_d1_s1.assignedNodes(), [d1_s1]); 31 assert_array_equals(d1_d1_s1.assignedNodes(), [d1_s1]);
31 assert_array_equals(d1_d1_s1.assignedNodes({'flatten': true}), [d2]); 32 assert_array_equals(d1_d1_s1.assignedNodes({'flatten': true}), [d2]);
32 33
33 d1_s1.addEventListener('slotchange', (e) => { 34 d1_s1.addEventListener('slotchange', (e) => {
34 test.step(() => { 35 test.step(() => {
35 assert_equals(e.target, d1_s1); 36 count_for_d1_s1++;
36 assert_array_equals(d1_s1.assignedNodes(), [d2, d3]); 37 if (count_for_d1_s1 == 1) {
37 assert_array_equals(d1_s1.assignedNodes({'flatten': true}), [d2, d3]); 38 assert_equals(e.target, d1_s1);
38 assert_array_equals(e.scoped, true); 39 assert_array_equals(d1_s1.assignedNodes(), [d2, d3]);
39 count++; 40 assert_array_equals(d1_s1.assignedNodes({'flatten': true}), [d2, d3]);
40 // The order when a slotchange event is dispatched in the slots is not gur anteed. 41 assert_array_equals(e.scoped, true);
41 if (count == 2) 42 } else if (count_for_d1_s1 == 2) {
43 assert_equals(e.target, d1_s1);
44 assert_array_equals(d1_s1.assignedNodes(), [d2]);
45 assert_array_equals(d1_s1.assignedNodes({'flatten': true}), [d2]);
46 assert_array_equals(e.scoped, true);
42 test.done(); 47 test.done();
48 }
43 }); 49 });
44 }); 50 });
45 51
46 d1_d1_s1.addEventListener('slotchange', (e) => { 52 d1_d1_s1.addEventListener('slotchange', (e) => {
47 test.step(() => { 53 test.step(() => {
48 assert_equals(e.target, d1_d1_s1); 54 count_for_d1_d1_s1++;
49 assert_array_equals(d1_d1_s1.assignedNodes(), [d1_s1]); 55 if (count_for_d1_d1_s1 == 1) {
50 assert_array_equals(d1_d1_s1.assignedNodes({'flatten': true}), [d2, d3]); 56 assert_equals(e.target, d1_d1_s1);
51 assert_array_equals(e.scoped, true); 57 assert_array_equals(d1_d1_s1.assignedNodes(), [d1_s1]);
52 count++; 58 assert_array_equals(d1_d1_s1.assignedNodes({'flatten': true}), [d2, d3]) ;
53 if (count == 2) 59 assert_array_equals(e.scoped, true);
60 } else if (count_for_d1_d1_s1 == 2){
61 assert_equals(e.target, d1_d1_s1);
62 assert_array_equals(d1_d1_s1.assignedNodes(), [d1_s1]);
63 assert_array_equals(d1_d1_s1.assignedNodes({'flatten': true}), [d2]);
64 assert_array_equals(e.scoped, true);
54 test.done(); 65 test.done();
66 }
55 }); 67 });
56 }); 68 });
57 69
58 const d3 = document.createElement('div'); 70 const d3 = document.createElement('div');
59 d3.setAttribute('id', 'd3'); 71 d3.setAttribute('id', 'd3');
60 d3.setAttribute('slot', 'd1-s1'); 72 d3.setAttribute('slot', 'd1-s1');
61 d1.appendChild(d3); 73 d1.appendChild(d3);
62 }, "slotchange event should be dispatched."); 74 // Different microtask.
75 setTimeout(function(){
76 d3.remove();
77 }, 0);
78
79 }, "slotchange event should be dispatched for a slot at most once per microtask. ");
63 </script> 80 </script>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/Source/core/dom/Element.h » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698