Chromium Code Reviews Chromium Code Reviews
Issue 2076933002:
Add more comprehensive tests for slotchange events (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| 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="host1"> | |
| 8 <template data-mode="open"> | |
| 9 <slot id="s1" name="slot1"></slot> | |
| 10 </template> | |
| 11 <div id="c1" slot="slot1"></div> | |
| 12 </div> | |
| 13 </div> | |
| 14 | |
| 15 <script> | |
| 16 function doneIfSlotChange(slots, test) { | |
| 17 let fired = new Set(); | |
| 18 for (let slot of slots) { | |
| 19 slot.addEventListener('slotchange', test.step_func((e) => { | |
|
tkent
2016/06/20 01:52:31
nit: you can omit () around 'e'.
There are other i
hayato
2016/06/20 02:13:39
Yeah, but that's intentional. Let me leave this as
tkent
2016/06/20 03:03:58
I don't have a strong preference. Please go ahead
| |
| 20 assert_false(fired.has(slot.id)); | |
| 21 fired.add(slot.id); | |
| 22 if (fired.size == slots.length) { | |
| 23 test.done(); | |
| 24 } | |
| 25 })) | |
| 26 } | |
| 27 } | |
| 28 | |
| 29 async_test((test) => { | |
| 30 let n = createTestTree(test1); | |
| 31 removeWhiteSpaceOnlyTextNodes(n.test1); | |
| 32 | |
| 33 doneIfSlotChange([n.s1], test); | |
| 34 | |
| 35 let d1 = document.createElement('div'); | |
| 36 d1.setAttribute('slot', 'slot1'); | |
| 37 n.host1.appendChild(d1); | |
| 38 }, 'slotchange event: Append a child to a host.'); | |
| 39 | |
| 40 async_test((test) => { | |
| 41 let n = createTestTree(test1); | |
| 42 removeWhiteSpaceOnlyTextNodes(n.test1); | |
| 43 | |
| 44 doneIfSlotChange([n.s1], test); | |
| 45 | |
| 46 n.c1.remove(); | |
| 47 }, 'slotchange event: Remove a child from a host.'); | |
| 48 | |
| 49 async_test((test) => { | |
| 50 let n = createTestTree(test1); | |
| 51 removeWhiteSpaceOnlyTextNodes(n.test1); | |
| 52 | |
| 53 n.c1.remove(); | |
| 54 | |
| 55 doneIfSlotChange([n.s1], test); | |
| 56 }, 'slotchange event: Remove a child before adding an event listener.'); | |
| 57 | |
| 58 async_test((test) => { | |
| 59 let n = createTestTree(test1); | |
| 60 removeWhiteSpaceOnlyTextNodes(n.test1); | |
| 61 | |
| 62 doneIfSlotChange([n.s1], test); | |
| 63 | |
| 64 n.c1.setAttribute('slot', 'slot-none'); | |
| 65 }, 'slotchange event: Change slot= attribute to make it un-assigned.'); | |
| 66 | |
| 67 async_test((test) => { | |
| 68 let n = createTestTree(test1); | |
| 69 removeWhiteSpaceOnlyTextNodes(n.test1); | |
| 70 | |
| 71 doneIfSlotChange([n.s1], test); | |
| 72 | |
| 73 n.s1.setAttribute('name', 'slot-none'); | |
| 74 }, 'slotchange event: Change slot\'s name= attribute so that none is assigned.') ; | |
| 75 </script> | |
| 76 | |
| 77 <div id="test2"> | |
| 78 <div id="host1"> | |
| 79 <template data-mode="open"> | |
| 80 <slot id="s1" name="slot1"></slot> | |
| 81 </template> | |
| 82 <div id="c2" slot="slot2"></div> | |
| 83 </div> | |
| 84 </div> | |
| 85 | |
| 86 <script> | |
| 87 async_test((test) => { | |
| 88 let n = createTestTree(test2); | |
| 89 removeWhiteSpaceOnlyTextNodes(n.test2); | |
| 90 | |
| 91 doneIfSlotChange([n.s1], test); | |
| 92 | |
| 93 n.c2.setAttribute('slot', 'slot1'); | |
| 94 }, 'slotchange event: Change slot= attribute to make it assigned.'); | |
| 95 | |
| 96 async_test((test) => { | |
| 97 let n = createTestTree(test2); | |
| 98 removeWhiteSpaceOnlyTextNodes(n.test2); | |
| 99 | |
| 100 doneIfSlotChange([n.s1], test); | |
| 101 | |
| 102 n.s1.setAttribute('name', 'slot2'); | |
| 103 }, 'slotchange event: Change slot\'s name= attribute so that a node is assigned to the slot.'); | |
| 104 </script> | |
| 105 | |
| 106 <div id="test_fallback"> | |
| 107 <div id="host1"> | |
| 108 <template data-mode="open"> | |
| 109 <slot id="s1"></slot> | |
| 110 </template> | |
| 111 </div> | |
| 112 </div> | |
| 113 | |
| 114 <script> | |
| 115 async_test((test) => { | |
| 116 let n = createTestTree(test_fallback); | |
| 117 removeWhiteSpaceOnlyTextNodes(n.test_fallback); | |
| 118 | |
| 119 doneIfSlotChange([n.s1], test); | |
| 120 | |
| 121 n.s1.appendChild(document.createElement('div')); | |
| 122 }, 'slotchange event: Add a fallback content.'); | |
| 123 </script> | |
| 124 | |
| 125 <div id="test_fallback2"> | |
| 126 <div id="host1"> | |
| 127 <template data-mode="open"> | |
| 128 <slot id="s1"> | |
| 129 <div id="f1"></div> | |
| 130 </slot> | |
| 131 </template> | |
| 132 </div> | |
| 133 </div> | |
| 134 | |
| 135 <script> | |
| 136 async_test((test) => { | |
| 137 let n = createTestTree(test_fallback2); | |
| 138 removeWhiteSpaceOnlyTextNodes(n.test_fallback2); | |
| 139 | |
| 140 doneIfSlotChange([n.s1], test); | |
| 141 | |
| 142 n.f1.remove(); | |
| 143 }, 'slotchange event: Remove a fallback content.'); | |
| 144 </script> | |
| 145 | |
| 146 <div id="test_fallback3"> | |
| 147 <div id="host1"> | |
| 148 <template data-mode="open"> | |
| 149 <slot id="s2"> | |
| 150 <slot id="s1"> | |
| 151 <div id="f1"></div> | |
| 152 </slot> | |
| 153 </slot> | |
| 154 </template> | |
| 155 </div> | |
| 156 </div> | |
| 157 | |
| 158 <script> | |
| 159 async_test((test) => { | |
| 160 let n = createTestTree(test_fallback3); | |
| 161 removeWhiteSpaceOnlyTextNodes(n.test_fallback3); | |
| 162 | |
| 163 doneIfSlotChange([n.s1, n.s2], test); | |
| 164 | |
| 165 n.s1.appendChild(document.createElement('div')); | |
| 166 }, 'slotchange event: Add a fallback content to nested slots.'); | |
| 167 | |
| 168 async_test((test) => { | |
| 169 let n = createTestTree(test_fallback3); | |
| 170 removeWhiteSpaceOnlyTextNodes(n.test_fallback3); | |
| 171 | |
| 172 doneIfSlotChange([n.s1, n.s2], test); | |
| 173 | |
| 174 n.f1.remove(); | |
| 175 }, 'slotchange event: Remove a fallback content from nested slots.'); | |
| 176 </script> | |
| 177 | |
| 178 <div id="test3"> | |
| 179 <div id="host1"> | |
| 180 <template id="shadowroot" data-mode="open"> | |
| 181 <slot id="s1" name="slot1"></slot> | |
| 182 </template> | |
| 183 <div id="c1" slot="slot1"></div> | |
| 184 </div> | |
| 185 </div> | |
| 186 | |
| 187 <script> | |
| 188 async_test((test) => { | |
| 189 let n = createTestTree(test3); | |
| 190 removeWhiteSpaceOnlyTextNodes(n.test3); | |
| 191 | |
| 192 doneIfSlotChange([n.s1], test); | |
| 193 | |
| 194 let slot = document.createElement('slot'); | |
| 195 slot.setAttribute('name', 'slot1'); | |
| 196 n.shadowroot.insertBefore(slot, n.s1); | |
| 197 }, "slotchange event: Insert a slot before an existing slot."); | |
| 198 </script> | |
| 199 | |
| 200 <div id="test4"> | |
| 201 <div id="host1"> | |
| 202 <template id="shadowroot" data-mode="open"> | |
| 203 <slot id="s1" name="slot1"></slot> | |
| 204 <slot id="s2" name="slot1"></slot> | |
| 205 </template> | |
| 206 <div id="c1" slot="slot1"></div> | |
| 207 </div> | |
| 208 </div> | |
| 209 | |
| 210 <script> | |
| 211 async_test((test) => { | |
| 212 let n = createTestTree(test4); | |
| 213 removeWhiteSpaceOnlyTextNodes(n.test4); | |
| 214 | |
| 215 doneIfSlotChange([n.s2], test); | |
| 216 | |
| 217 n.s1.remove(); | |
| 218 }, "slotchange event: Remove a preceding slot."); | |
| 219 </script> | |
| 220 | |
| 221 <div id="test5"> | |
| 222 <div id="host1"> | |
| 223 <template data-mode="open"> | |
| 224 <div id="host2"> | |
| 225 <template data-mode="open"> | |
| 226 <slot id="s2" name="slot2"></slot> | |
| 227 </template> | |
| 228 <slot id="s1" name="slot1" slot="slot2"></slot> | |
| 229 </div> | |
| 230 </template> | |
| 231 <div id="c1" slot="slot1"></div> | |
| 232 </div> | |
| 233 </div> | |
| 234 | |
| 235 <script> | |
| 236 async_test((test) => { | |
| 237 let n = createTestTree(test5); | |
| 238 removeWhiteSpaceOnlyTextNodes(n.test5); | |
| 239 | |
| 240 doneIfSlotChange([n.s1, n.s2], test); | |
| 241 | |
| 242 n.c1.remove(); | |
| 243 }, "slotchange event: A slot is assigned to another slot."); | |
| 244 </script> | |
| 245 | |
| 246 <div id="test6"> | |
| 247 <div id="host1"> | |
| 248 <template data-mode="open"> | |
| 249 <div id="host2"> | |
| 250 <template data-mode="open"> | |
| 251 <slot id="s2" name="slot2"></slot> | |
| 252 </template> | |
| 253 <slot id="s1" name="slot1" slot="slot2"></slot> | |
| 254 </div> | |
| 255 </template> | |
| 256 </div> | |
| 257 </div> | |
| 258 | |
| 259 <script> | |
| 260 async_test((test) => { | |
| 261 let n = createTestTree(test6); | |
| 262 removeWhiteSpaceOnlyTextNodes(n.test6); | |
| 263 | |
| 264 doneIfSlotChange([n.s2], test); | |
| 265 | |
| 266 n.s1.remove(); | |
| 267 }, "slotchange event: Even if distributed nodes do not change, slotchange should be fired if assigned nodes are changed."); | |
| 268 </script> | |
| OLD | NEW |
