slots-fallback.html (8228B)
1 <!DOCTYPE html> 2 <title>Shadow DOM: Slots and fallback contents</title> 3 <meta name="author" title="Hayato Ito" href="mailto:hayato@google.com"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 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> 19 test(() => { 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.'); 28 29 test(() => { 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.'); 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> 50 test(() => { 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.'); 62 63 test(() => { 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.'); 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> 88 test(() => { 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> 117 test(() => { 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]); 129 }, 'Slots fallback: Slots in Slots: Assigned nodes should be used as fallback contents of another slot'); 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> 157 test(() => { 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 172 test(() => { 173 let n = createTestTree(test5); 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 186 test(() => { 187 let n = createTestTree(test5); 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 199 test(() => { 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 211 test(() => { 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 225 test(() => { 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 239 test(() => { 240 let n = createTestTree(test5); 241 removeWhiteSpaceOnlyTextNodes(n.test5); 242 243 n.s1.remove(); 244 245 assert_array_equals(n.s1.assignedNodes(), []); 246 247 assert_array_equals(n.s1.assignedNodes({ flatten: true }), [], 248 'fall back contents should be empty because s1 is not in a shadow tree.'); 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>