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

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

Issue 2060793002: Rewrite tests for slots (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@events-related
Patch Set: 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
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="test1">
7 <div id="host">
8 <template data-mode="open">
9 <slot id="s1" name="slot1">
10 <div id="f1"></div>
11 </slot>
12 </template>
13 </div>
14 </div>
15
16 <script>
17 test(() => {
18 let n = createTestTree(test1);
19 removeWhiteSpaceOnlyTextNodes(n.test1);
20
21 assert_equals(n.f1.assignedSlot, null);
22
23 assert_array_equals(n.s1.assignedNodes(), []);
24 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.f1]);
25 }, 'Slots fallback: Basic.');
26 </script>
27
28 <div id="test2">
29 <div id="host">
30 <template data-mode="open">
31 <slot id="s1" name="slot1">
32 <slot id="s2" name="slot2">
33 <div id="f1"></div>
34 </slot>
35 </slot>
36 </template>
37 </div>
38 </div>
39
40 <script>
41 test(() => {
42 let n = createTestTree(test2);
43 removeWhiteSpaceOnlyTextNodes(n.test2);
44
45 assert_equals(n.f1.assignedSlot, null);
46
47 assert_array_equals(n.s1.assignedNodes(), []);
48 assert_array_equals(n.s2.assignedNodes(), []);
49
50 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.f1]);
51 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.f1]);
52 }, 'Slots fallback: Slots in Slots.');
53 </script>
54
55 <div id="test3">
56 <div id="host">
57 <template data-mode="open">
58 <slot id="s1" name="slot1">
59 <slot id="s2" name="slot2">
60 <div id="f1"></div>
61 </slot>
62 </slot>
63 </template>
64 <div id="c1" slot="slot1"></div>
65 </div>
66 </div>
67
68 <script>
69 test(() => {
70 let n = createTestTree(test3);
71 removeWhiteSpaceOnlyTextNodes(n.test3);
72
73 assert_equals(n.c1.assignedSlot, n.s1);
74 assert_equals(n.f1.assignedSlot, null);
75
76 assert_array_equals(n.s1.assignedNodes(), [n.c1]);
77 assert_array_equals(n.s2.assignedNodes(), []);
78
79 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
80 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.f1]);
81 }, 'Slots fallback: Fallback contents should not be used if a node is assigned.' );
82 </script>
83
84 <div id="test4">
85 <div id="host">
86 <template data-mode="open">
87 <slot id="s1" name="slot1">
88 <slot id="s2" name="slot2">
89 <div id="f1"></div>
90 </slot>
91 </slot>
92 </template>
93 <div id="c1" slot="slot2"></div>
94 </div>
95 </div>
96
97 <script>
98 test(() => {
99 let n = createTestTree(test4);
100 removeWhiteSpaceOnlyTextNodes(n.test4);
101
102 assert_equals(n.c1.assignedSlot, n.s2);
103 assert_equals(n.f1.assignedSlot, null);
104
105 assert_array_equals(n.s1.assignedNodes(), []);
106 assert_array_equals(n.s2.assignedNodes(), [n.c1]);
107
108 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
109 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1]);
110 }, 'Slots fallback: Slots in Slots: Assinged nodes should be used as fallback co ntents of another slot');
111 </script>
112
113 <div id="test5">
114 <div id="host1">
115 <template data-mode="open">
116 <div id="host2">
117 <template data-mode="open">
118 <slot id="s4" name="slot4">
119 <slot id="s3" name="slot3">
120 <div id="f3"></div>
121 </slot>
122 <div id="f4"></div>
123 </slot>
124 </template>
125 <slot id="s2" name="slot2" slot="slot3">
126 <slot id="s1" name="slot1">
127 <div id="f1"></div>
128 </slot>
129 <div id="f2"></div>
130 </slot>
131 </div>
132 </template>
133 <div id="c1" slot="slot1"></div>
134 </div>
135 </div>
136
137 <script>
138 test(() => {
139 let n = createTestTree(test5);
140 removeWhiteSpaceOnlyTextNodes(n.test5);
141
142 assert_array_equals(n.s1.assignedNodes(), [n.c1]);
143 assert_array_equals(n.s2.assignedNodes(), []);
144 assert_array_equals(n.s3.assignedNodes(), [n.s2]);
145 assert_array_equals(n.s4.assignedNodes(), []);
146
147 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
148 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1, n.f2]);
149 assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.c1, n.f2]);
150 assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.c1, n.f2, n.f4]) ;
151 }, 'Slots fallback: Complex case.');
152
153 test(() => {
154 let n = createTestTree(test5);
155 removeWhiteSpaceOnlyTextNodes(n.test5);
156
157 let d1 = document.createElement('div');
158 n.s2.appendChild(d1);
159
160 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
161 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1, n.f2, d1]);
162 assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.c1, n.f2, d1]);
163 assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.c1, n.f2, d1, n. f4]);
164 }, 'Slots fallback: Mutation. Append fallback contents.');
165
166 test(() => {
167 let n = createTestTree(test5);
168 removeWhiteSpaceOnlyTextNodes(n.test5);
169
170 n.f2.remove();
171
172 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
173 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1]);
174 assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.c1]);
175 assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.c1, n.f4]);
176 }, 'Slots fallback: Mutation. Remove fallback contents.');
177
178 test(() => {
179 let n = createTestTree(test5);
180 removeWhiteSpaceOnlyTextNodes(n.test5);
181
182 let d2 = document.createElement('div');
183 d2.setAttribute('slot', 'slot2');
184 n.host1.appendChild(d2);
185
186 assert_array_equals(n.s2.assignedNodes(), [d2]);
187 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [d2]);
188 assert_array_equals(n.s3.assignedNodes({ flatten: true }), [d2]);
189 assert_array_equals(n.s4.assignedNodes({ flatten: true }), [d2, n.f4]);
190 }, 'Slots fallback: Mutation. Assign a node to a slot so that fallback contens a re no longer used.');
191
192 test(() => {
193 let n = createTestTree(test5);
194 removeWhiteSpaceOnlyTextNodes(n.test5);
195
196 n.c1.remove();
197
198 assert_array_equals(n.s1.assignedNodes(), []);
199
200 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.f1]);
201 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.f1, n.f2]);
202 assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.f1, n.f2]);
203 assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.f1, n.f2, n.f4]) ;
204 }, 'Slots fallback: Mutation. Remove an assigned node from a slot so that fallba ck contens will be used.');
205
206 test(() => {
207 let n = createTestTree(test5);
208 removeWhiteSpaceOnlyTextNodes(n.test5);
209
210 n.s1.remove();
211
212 assert_array_equals(n.s1.assignedNodes(), []);
213
214 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.f1]);
215 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.f2]);
216 assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.f2]);
217 assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.f2, n.f4]);
218 }, 'Slots fallback: Mutation. Remove a slot which is a fallback content of anot her slot.');
219 </script>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698