Google Git
Sign in
chromium / external / w3c / web-platform-tests / 01aed092cae7983b2d4ecf29097e33ce4e9af5b9 / . / shadow-dom / slots-fallback.html
blob: e705e18f4a9747d0ffffe0909bfa4d85bd8f7ad4 [file] [log] [blame]
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]1<!DOCTYPE html>
2<title>Shadow DOM: Slots and fallback contents</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="host">
10 <template data-mode="open">
11 <slot id="s1" name="slot1">
12 <div id="f1"></div>
13 </slot>
14 </template>
15 </div>
16</div>
17
18<script>
19test(() => {
20 let n = createTestTree(test1);
21 removeWhiteSpaceOnlyTextNodes(n.test1);
22
23 assert_equals(n.f1.assignedSlot, null);
24
25 assert_array_equals(n.s1.assignedNodes(), []);
26 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.f1]);
27}, 'Slots fallback: Basic.');
Tim van der Lippea4c37292017-12-12 04:22:27[diff] [blame]28
29test(() => {
30 let n = createTestTree(test1);
31
32 assert_array_equals(n.s1.assignedElements(), []);
33 assert_array_equals(n.s1.assignedElements({ flatten: true }), [n.f1]);
34}, 'Slots fallback: Basic, elements only.');
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]35</script>
36
37<div id="test2">
38 <div id="host">
39 <template data-mode="open">
40 <slot id="s1" name="slot1">
41 <slot id="s2" name="slot2">
42 <div id="f1"></div>
43 </slot>
44 </slot>
45 </template>
46 </div>
47</div>
48
49<script>
50test(() => {
51 let n = createTestTree(test2);
52 removeWhiteSpaceOnlyTextNodes(n.test2);
53
54 assert_equals(n.f1.assignedSlot, null);
55
56 assert_array_equals(n.s1.assignedNodes(), []);
57 assert_array_equals(n.s2.assignedNodes(), []);
58
59 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.f1]);
60 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.f1]);
61}, 'Slots fallback: Slots in Slots.');
Tim van der Lippea4c37292017-12-12 04:22:27[diff] [blame]62
63test(() => {
64 let n = createTestTree(test2);
65
66 assert_array_equals(n.s1.assignedElements(), []);
67 assert_array_equals(n.s2.assignedElements(), []);
68
69 assert_array_equals(n.s1.assignedElements({ flatten: true }), [n.f1]);
70 assert_array_equals(n.s2.assignedElements({ flatten: true }), [n.f1]);
71}, 'Slots fallback: Slots in Slots, elements only.');
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]72</script>
73
74<div id="test3">
75 <div id="host">
76 <template data-mode="open">
77 <slot id="s1" name="slot1">
78 <slot id="s2" name="slot2">
79 <div id="f1"></div>
80 </slot>
81 </slot>
82 </template>
83 <div id="c1" slot="slot1"></div>
84 </div>
85</div>
86
87<script>
88test(() => {
89 let n = createTestTree(test3);
90 removeWhiteSpaceOnlyTextNodes(n.test3);
91
92 assert_equals(n.c1.assignedSlot, n.s1);
93 assert_equals(n.f1.assignedSlot, null);
94
95 assert_array_equals(n.s1.assignedNodes(), [n.c1]);
96 assert_array_equals(n.s2.assignedNodes(), []);
97
98 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
99 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.f1]);
100}, 'Slots fallback: Fallback contents should not be used if a node is assigned.');
101</script>
102
103<div id="test4">
104 <div id="host">
105 <template data-mode="open">
106 <slot id="s1" name="slot1">
107 <slot id="s2" name="slot2">
108 <div id="f1"></div>
109 </slot>
110 </slot>
111 </template>
112 <div id="c1" slot="slot2"></div>
113 </div>
114</div>
115
116<script>
117test(() => {
118 let n = createTestTree(test4);
119 removeWhiteSpaceOnlyTextNodes(n.test4);
120
121 assert_equals(n.c1.assignedSlot, n.s2);
122 assert_equals(n.f1.assignedSlot, null);
123
124 assert_array_equals(n.s1.assignedNodes(), []);
125 assert_array_equals(n.s2.assignedNodes(), [n.c1]);
126
127 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
128 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1]);
Tim van der Lippea4c37292017-12-12 04:22:27[diff] [blame]129}, 'Slots fallback: Slots in Slots: Assigned nodes should be used as fallback contents of another slot');
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]130</script>
131
132<div id="test5">
133 <div id="host1">
134 <template data-mode="open">
135 <div id="host2">
136 <template data-mode="open">
137 <slot id="s4" name="slot4">
138 <slot id="s3" name="slot3">
139 <div id="f3"></div>
140 </slot>
141 <div id="f4"></div>
142 </slot>
143 </template>
144 <slot id="s2" name="slot2" slot="slot3">
145 <slot id="s1" name="slot1">
146 <div id="f1"></div>
147 </slot>
148 <div id="f2"></div>
149 </slot>
150 </div>
151 </template>
152 <div id="c1" slot="slot1"></div>
153 </div>
154</div>
155
156<script>
157test(() => {
158 let n = createTestTree(test5);
159 removeWhiteSpaceOnlyTextNodes(n.test5);
160
161 assert_array_equals(n.s1.assignedNodes(), [n.c1]);
162 assert_array_equals(n.s2.assignedNodes(), []);
163 assert_array_equals(n.s3.assignedNodes(), [n.s2]);
164 assert_array_equals(n.s4.assignedNodes(), []);
165
166 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
167 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1, n.f2]);
168 assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.c1, n.f2]);
169 assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.c1, n.f2, n.f4]);
170}, 'Slots fallback: Complex case.');
171
172test(() => {
173 let n = createTestTree(test5);
Tim van der Lippea4c37292017-12-12 04:22:27[diff] [blame]174
175 assert_array_equals(n.s1.assignedElements(), [n.c1]);
176 assert_array_equals(n.s2.assignedElements(), []);
177 assert_array_equals(n.s3.assignedElements(), [n.s2]);
178 assert_array_equals(n.s4.assignedElements(), []);
179
180 assert_array_equals(n.s1.assignedElements({ flatten: true }), [n.c1]);
181 assert_array_equals(n.s2.assignedElements({ flatten: true }), [n.c1, n.f2]);
182 assert_array_equals(n.s3.assignedElements({ flatten: true }), [n.c1, n.f2]);
183 assert_array_equals(n.s4.assignedElements({ flatten: true }), [n.c1, n.f2, n.f4]);
184}, 'Slots fallback: Complex case, elements only.');
185
186test(() => {
187 let n = createTestTree(test5);
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]188 removeWhiteSpaceOnlyTextNodes(n.test5);
189
190 let d1 = document.createElement('div');
191 n.s2.appendChild(d1);
192
193 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
194 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1, n.f2, d1]);
195 assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.c1, n.f2, d1]);
196 assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.c1, n.f2, d1, n.f4]);
197}, 'Slots fallback: Mutation. Append fallback contents.');
198
199test(() => {
200 let n = createTestTree(test5);
201 removeWhiteSpaceOnlyTextNodes(n.test5);
202
203 n.f2.remove();
204
205 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.c1]);
206 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.c1]);
207 assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.c1]);
208 assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.c1, n.f4]);
209}, 'Slots fallback: Mutation. Remove fallback contents.');
210
211test(() => {
212 let n = createTestTree(test5);
213 removeWhiteSpaceOnlyTextNodes(n.test5);
214
215 let d2 = document.createElement('div');
216 d2.setAttribute('slot', 'slot2');
217 n.host1.appendChild(d2);
218
219 assert_array_equals(n.s2.assignedNodes(), [d2]);
220 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [d2]);
221 assert_array_equals(n.s3.assignedNodes({ flatten: true }), [d2]);
222 assert_array_equals(n.s4.assignedNodes({ flatten: true }), [d2, n.f4]);
223}, 'Slots fallback: Mutation. Assign a node to a slot so that fallback contens are no longer used.');
224
225test(() => {
226 let n = createTestTree(test5);
227 removeWhiteSpaceOnlyTextNodes(n.test5);
228
229 n.c1.remove();
230
231 assert_array_equals(n.s1.assignedNodes(), []);
232
233 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [n.f1]);
234 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.f1, n.f2]);
235 assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.f1, n.f2]);
236 assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.f1, n.f2, n.f4]);
237}, 'Slots fallback: Mutation. Remove an assigned node from a slot so that fallback contens will be used.');
238
239test(() => {
240 let n = createTestTree(test5);
241 removeWhiteSpaceOnlyTextNodes(n.test5);
242
243 n.s1.remove();
244
245 assert_array_equals(n.s1.assignedNodes(), []);
246
Hayato Itoce333252017-06-09 03:31:55[diff] [blame]247 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [],
248 'fall back contents should be empty because s1 is not in a shadow tree.');
Hayato Ito4bcdc1e2016-06-20 08:11:25[diff] [blame]249 assert_array_equals(n.s2.assignedNodes({ flatten: true }), [n.f2]);
250 assert_array_equals(n.s3.assignedNodes({ flatten: true }), [n.f2]);
251 assert_array_equals(n.s4.assignedNodes({ flatten: true }), [n.f2, n.f4]);
252}, 'Slots fallback: Mutation. Remove a slot which is a fallback content of another slot.');
253</script>