OLD | NEW |
(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> |
OLD | NEW |