| 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="host1"> |
| 7 <template data-mode="open"> |
| 8 <style> |
| 9 ::slotted(.red) { color: red; } |
| 10 div { color: green; } |
| 11 </style> |
| 12 <slot> |
| 13 <div class="red">Red Fallback Content</div> |
| 14 <div class="other">Other Fallback Content</div> |
| 15 </slot> |
| 16 </template> |
| 17 </div> |
| 18 |
| 19 <script> |
| 20 'use strict'; |
| 21 |
| 22 const black = 'rgb(0, 0, 0)'; |
| 23 const red = 'rgb(255, 0, 0)'; |
| 24 const green = 'rgb(0, 128, 0)'; |
| 25 const pink = 'rgb(255, 192, 203)'; |
| 26 |
| 27 const host1 = document.querySelector('#host1'); |
| 28 convertTemplatesToShadowRootsWithin(host1); |
| 29 removeWhiteSpaceOnlyTextNodes(host1); |
| 30 |
| 31 const root1 = host1.shadowRoot; |
| 32 const redDiv1 = root1.querySelector('.red'); |
| 33 const otherDiv1 = root1.querySelector('.other'); |
| 34 |
| 35 test(() => { |
| 36 assert_equals(window.getComputedStyle(redDiv1).color, red, |
| 37 '::slotted() matches fallback content.'); |
| 38 assert_equals(window.getComputedStyle(otherDiv1).color, green, |
| 39 'non-::slotted() selector can match fallback content.'); |
| 40 }, '::slotted() should match slot fallback content in a shadow tree.'); |
| 41 |
| 42 const newDiv1 = document.createElement('div'); |
| 43 |
| 44 test(() => { |
| 45 host1.appendChild(newDiv1); |
| 46 assert_equals(window.getComputedStyle(newDiv1).color, black, |
| 47 '::slotted(.red) should not match without "red" class.'); |
| 48 assert_equals(window.getComputedStyle(redDiv1).color, green, |
| 49 '::slotted() does not match fallback content when ' + |
| 50 'slot\'s assigned nodes are non-empty.'); |
| 51 assert_equals(window.getComputedStyle(otherDiv1).color, green); |
| 52 }, 'Adding an element that gets slotted prevents ::slotted from matching ' + |
| 53 'fallback content.'); |
| 54 |
| 55 test(() => { |
| 56 host1.removeChild(newDiv1); |
| 57 assert_equals(window.getComputedStyle(redDiv1).color, red, |
| 58 '::slotted() match fallback content.'); |
| 59 assert_equals(window.getComputedStyle(otherDiv1).color, green, |
| 60 'non-::slotted() selector should match fallback content.'); |
| 61 }, 'Making assigned node empty should make ::slotted rule apply to the ' + |
| 62 'fallback content.'); |
| 63 </script> |
| 64 |
| 65 <div id="host2"> |
| 66 <template data-mode="open"> |
| 67 <style> |
| 68 ::slotted(.red) { color: red; } |
| 69 div { color: green; } |
| 70 </style> |
| 71 <div id="inner-host2"> |
| 72 <template data-mode="open"> |
| 73 <slot name="a"></slot> |
| 74 </template> |
| 75 <slot slot="a"> |
| 76 <div class="red">Red Fallback Content</div> |
| 77 <div class="other">Other Fallback Content</div> |
| 78 </slot> |
| 79 </div> |
| 80 </template> |
| 81 </div> |
| 82 |
| 83 <script> |
| 84 'use strict'; |
| 85 |
| 86 // Change from the test for #host1 - #host2 contains a slot that has |
| 87 // fallback content, and the slot is distributed to another slot. |
| 88 let host2 = document.querySelector('#host2'); |
| 89 convertTemplatesToShadowRootsWithin(host2); |
| 90 removeWhiteSpaceOnlyTextNodes(host2); |
| 91 |
| 92 const root2 = host2.shadowRoot; |
| 93 const redDiv2 = root2.querySelector('.red'); |
| 94 const otherDiv2 = root2.querySelector('.other'); |
| 95 const innerHost2 = root2.querySelector('#inner-host2'); |
| 96 const innerSlot2 = innerHost2.shadowRoot.querySelector('slot'); |
| 97 |
| 98 test(() => { |
| 99 assert_array_equals(innerSlot2.assignedNodes({flatten: true}), |
| 100 [redDiv2, otherDiv2], |
| 101 'pre-condition: make sure the fallback content is ' + |
| 102 'distributed.'); |
| 103 |
| 104 assert_equals(window.getComputedStyle(redDiv2).color, red, |
| 105 '::slotted() matches fallback content.'); |
| 106 assert_equals(window.getComputedStyle(otherDiv2).color, green); |
| 107 }, '::slotted() should match slotted fallback content.'); |
| 108 |
| 109 test(() => { |
| 110 innerSlot2.name = 'b'; |
| 111 assert_array_equals(innerSlot2.assignedNodes({flatten: true}), []); |
| 112 |
| 113 assert_equals(window.getComputedStyle(redDiv2).color, red, |
| 114 '::slotted() matches fallback content.'); |
| 115 assert_equals(window.getComputedStyle(otherDiv2).color, green); |
| 116 |
| 117 innerSlot2.name = 'a'; |
| 118 assert_array_equals(innerSlot2.assignedNodes({flatten: true}), |
| 119 [redDiv2, otherDiv2]); |
| 120 |
| 121 assert_equals(window.getComputedStyle(redDiv2).color, red, |
| 122 '::slotted() matches fallback content.'); |
| 123 assert_equals(window.getComputedStyle(otherDiv2).color, green); |
| 124 }, 'Distribution change should not affect ::slotted matching.'); |
| 125 </script> |
| 126 |
| 127 <div id="host3"> |
| 128 <template data-mode="open"> |
| 129 <div id="inner-host3"> |
| 130 <template data-mode="open"> |
| 131 <style> |
| 132 ::slotted(.red) { color: red; } |
| 133 div { color: green; } |
| 134 </style> |
| 135 <slot name="a"></slot> |
| 136 </template> |
| 137 <slot slot="a"> |
| 138 <div class="red">Red Fallback Content</div> |
| 139 <div class="other">Other Fallback Content</div> |
| 140 </slot> |
| 141 </div> |
| 142 </template> |
| 143 </div> |
| 144 |
| 145 <script> |
| 146 'use strict'; |
| 147 |
| 148 // Change from the test for #host2 - #host3 has a slot with fallback content, |
| 149 // and the content is styled in the distributed tree. |
| 150 let host3 = document.querySelector('#host3'); |
| 151 convertTemplatesToShadowRootsWithin(host3); |
| 152 removeWhiteSpaceOnlyTextNodes(host3); |
| 153 |
| 154 const root3 = host3.shadowRoot; |
| 155 const slot3 = root3.querySelector('slot'); |
| 156 const redDiv3 = root3.querySelector('.red'); |
| 157 const otherDiv3 = root3.querySelector('.other'); |
| 158 const innerHost3 = root3.querySelector('#inner-host3'); |
| 159 const innerSlot3 = innerHost3.shadowRoot.querySelector('slot'); |
| 160 |
| 161 test(() => { |
| 162 assert_array_equals(innerSlot3.assignedNodes({flatten: true}), |
| 163 [redDiv3, otherDiv3], |
| 164 'pre-condition: make sure the fallback content is ' + |
| 165 'distributed.'); |
| 166 |
| 167 assert_equals(window.getComputedStyle(redDiv3).color, red, |
| 168 '::slotted() matches distributed fallback content.'); |
| 169 // This is not green, as inner style rules does not apply to distributed |
| 170 // fallback content. |
| 171 assert_equals(window.getComputedStyle(otherDiv3).color, black, |
| 172 'non-::slotted() selector should not match distributed ' + |
| 173 'fallback content.'); |
| 174 }, '::slotted() should match distributed fallback content.'); |
| 175 |
| 176 test(() => { |
| 177 const newDiv3 = document.createElement('div'); |
| 178 newDiv3.className = 'red'; |
| 179 host3.appendChild(newDiv3); |
| 180 assert_array_equals(innerSlot3.assignedNodes({flatten: true}), [newDiv3]); |
| 181 |
| 182 assert_equals(window.getComputedStyle(newDiv3).color, red); |
| 183 |
| 184 assert_equals(window.getComputedStyle(redDiv3).color, black, |
| 185 '::slotted() does not match fallback content when slot\'s ' + |
| 186 'assigned nodes are non-empty.'); |
| 187 assert_equals(window.getComputedStyle(otherDiv3).color, black); |
| 188 }, 'Adding an element that gets slotted prevents ::slotted from matching ' + |
| 189 'fallback contents.'); |
| 190 </script> |
| 191 |
| 192 <div id="host4"> |
| 193 <template data-mode="open"> |
| 194 <style> |
| 195 ::slotted(.red) { color: red; } |
| 196 ::slotted(.pink) { color: pink; } |
| 197 div { color: green; } |
| 198 </style> |
| 199 <div id="inner-host4"> |
| 200 <template data-mode="open"> |
| 201 <slot name="a"></slot> |
| 202 </template> |
| 203 <slot name="level1"> |
| 204 <div class="red">Red Fallback Content</div> |
| 205 <div class="other">Other Fallback Content</div> |
| 206 <slot name="level2"> |
| 207 <div class="pink">Pink Fallback Content</div> |
| 208 </slot> |
| 209 </slot> |
| 210 </div> |
| 211 </template> |
| 212 </div> |
| 213 |
| 214 <script> |
| 215 'use strict'; |
| 216 |
| 217 let host4 = document.querySelector('#host4'); |
| 218 convertTemplatesToShadowRootsWithin(host4); |
| 219 removeWhiteSpaceOnlyTextNodes(host4); |
| 220 |
| 221 const root4 = host4.shadowRoot; |
| 222 const level1Slot4 = root4.querySelector('slot[name=level1]'); |
| 223 const level2Slot4 = root4.querySelector('slot[name=level2]'); |
| 224 const redDiv4 = root4.querySelector('.red'); |
| 225 const pinkDiv4 = root4.querySelector('.pink'); |
| 226 const otherDiv4 = root4.querySelector('.other'); |
| 227 |
| 228 const innerHost4 = root4.querySelector('#inner-host4'); |
| 229 const innerSlot4 = innerHost4.shadowRoot.querySelector('slot'); |
| 230 |
| 231 test(() => { |
| 232 // ? |
| 233 assert_array_equals(innerSlot4.assignedNodes({flatten: true}), |
| 234 [], |
| 235 'pre-condition: make sure the fallback content is' + |
| 236 'not distributed.'); |
| 237 |
| 238 assert_equals(window.getComputedStyle(redDiv4).color, red, |
| 239 '::slotted() matches fallback content.'); |
| 240 assert_equals(window.getComputedStyle(pinkDiv4).color, pink, |
| 241 '::slotted() matches nested fallback content.'); |
| 242 assert_equals(window.getComputedStyle(otherDiv4).color, green, |
| 243 'non-::slotted() selector should match fallback content.'); |
| 244 }, '::slotted() should match nested slot fallback content.'); |
| 245 |
| 246 test(() => { |
| 247 level1Slot4.setAttribute('slot', 'a'); |
| 248 assert_array_equals(innerSlot4.assignedNodes({flatten: true}), |
| 249 [redDiv4, otherDiv4, pinkDiv4], |
| 250 'pre-condition: make sure the fallback content is ' + |
| 251 'distributed.'); |
| 252 |
| 253 assert_equals(window.getComputedStyle(redDiv4).color, red, |
| 254 '::slotted() matches fallback content.'); |
| 255 assert_equals(window.getComputedStyle(pinkDiv4).color, pink, |
| 256 '::slotted() matches nested fallback content.'); |
| 257 assert_equals(window.getComputedStyle(otherDiv4).color, green, |
| 258 'non-::slotted() selector should match fallback content.'); |
| 259 level1Slot4.removeAttribute('slot'); |
| 260 }, '::slotted style should be applied to distributed fallback content'); |
| 261 |
| 262 test(() => { |
| 263 level2Slot4.setAttribute('slot', 'a'); |
| 264 // level2Slot4 won't be distributed because it is not the children of |
| 265 // the shadow host. |
| 266 assert_array_equals(innerSlot4.assignedNodes({flatten: true}), [], |
| 267 'pre-condition: make sure the fallback content is ' + |
| 268 'not distributed.'); |
| 269 assert_equals(window.getComputedStyle(redDiv4).color, red, |
| 270 '::slotted() matches fallback content.'); |
| 271 assert_equals(window.getComputedStyle(pinkDiv4).color, pink, |
| 272 '::slotted() matches nested fallback content.'); |
| 273 assert_equals(window.getComputedStyle(otherDiv4).color, green, |
| 274 'non-::slotted() selector should match fallback content.'); |
| 275 level2Slot4.removeAttribute('slot'); |
| 276 }, '::slotted style applies to non-distributed fallback content.'); |
| 277 |
| 278 test(() => { |
| 279 const newDiv4 = document.createElement('div'); |
| 280 host4.appendChild(newDiv4); |
| 281 assert_array_equals(level1Slot4.assignedNodes(), []); |
| 282 assert_array_equals(level2Slot4.assignedNodes(), []); |
| 283 |
| 284 assert_equals(window.getComputedStyle(redDiv4).color, red, |
| 285 '::slotted() matches fallback content.'); |
| 286 assert_equals(window.getComputedStyle(pinkDiv4).color, pink, |
| 287 '::slotted() matches nested fallback content.'); |
| 288 |
| 289 newDiv4.setAttribute('slot', 'level1'); |
| 290 assert_array_equals(level1Slot4.assignedNodes(), [newDiv4]); |
| 291 assert_array_equals(level2Slot4.assignedNodes(), []); |
| 292 assert_equals(window.getComputedStyle(redDiv4).color, green, |
| 293 '::slotted() matches fallback content.'); |
| 294 assert_equals(window.getComputedStyle(pinkDiv4).color, green, |
| 295 '::slotted() matches nested fallback content.'); |
| 296 |
| 297 newDiv4.setAttribute('slot', 'level2'); |
| 298 assert_array_equals(level1Slot4.assignedNodes(), []); |
| 299 assert_array_equals(level2Slot4.assignedNodes(), [newDiv4]); |
| 300 assert_equals(window.getComputedStyle(redDiv4).color, red, |
| 301 '::slotted() matches fallback content.'); |
| 302 assert_equals(window.getComputedStyle(pinkDiv4).color, green, |
| 303 '::slotted() matches nested fallback content.'); |
| 304 |
| 305 newDiv4.removeAttribute('slot'); |
| 306 assert_equals(window.getComputedStyle(redDiv4).color, red, |
| 307 '::slotted() matches fallback content.'); |
| 308 assert_equals(window.getComputedStyle(pinkDiv4).color, pink, |
| 309 '::slotted() matches nested fallback content.'); |
| 310 }, 'If slot has assigned nodes, fallback contents should not be styled with ' + |
| 311 '::slotted.'); |
| 312 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2789363002:
Styling slot fallback content with ::slotted()
