| 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 id="red" class="red">Red Fallback Content</div> |
| 14 <div id="green">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 |
| 26 test(() => { |
| 27 const host = document.querySelector('#host1'); |
| 28 convertTemplatesToShadowRootsWithin(host); |
| 29 removeWhiteSpaceOnlyTextNodes(host); |
| 30 |
| 31 const root = host.shadowRoot; |
| 32 const redDiv = root.querySelector('#red'); |
| 33 const otherDiv = root.querySelector('#green'); |
| 34 |
| 35 assert_equals(window.getComputedStyle(redDiv).color, red, |
| 36 '::slotted() matches fallback content.'); |
| 37 assert_equals(window.getComputedStyle(otherDiv).color, green, |
| 38 'non-::slotted() selector can match fallback content.'); |
| 39 |
| 40 // Adding an element that gets slotted should change the style for fallback |
| 41 // content. |
| 42 const newDiv = document.createElement('div'); |
| 43 host.appendChild(newDiv); |
| 44 |
| 45 assert_equals(window.getComputedStyle(newDiv).color, black, |
| 46 '::slotted(.red) should not match without "red" class.'); |
| 47 assert_equals(window.getComputedStyle(redDiv).color, green, |
| 48 '::slotted() does not match fallback content when ' + |
| 49 'slot\'s assigned nodes are non-empty.'); |
| 50 assert_equals(window.getComputedStyle(otherDiv).color, green); |
| 51 |
| 52 // Making assigned node empty should make ::slotted rule re-apply to |
| 53 // the fallback content. |
| 54 host.removeChild(newDiv); |
| 55 assert_equals(window.getComputedStyle(redDiv).color, red, |
| 56 '::slotted() match fallback content.'); |
| 57 assert_equals(window.getComputedStyle(otherDiv).color, green, |
| 58 'non-::slotted() selector should match fallback content.'); |
| 59 }, '::slotted() should match slot fallback content in a shadow tree.'); |
| 60 </script> |
| 61 |
| 62 <div id="host2"> |
| 63 <template data-mode="open"> |
| 64 <style> |
| 65 ::slotted(.red) { color: red; } |
| 66 div { color: green; } |
| 67 </style> |
| 68 <div id="inner-host2"> |
| 69 <template data-mode="open"> |
| 70 <slot name="a"></slot> |
| 71 </template> |
| 72 <slot slot="a"> |
| 73 <div id="red" class="red">Red Fallback Content</div> |
| 74 <div id="green">Other Fallback Content</div> |
| 75 </slot> |
| 76 </div> |
| 77 </template> |
| 78 </div> |
| 79 |
| 80 <script> |
| 81 'use strict'; |
| 82 |
| 83 test(() => { |
| 84 // Change from the test for #host1 - #host2 contains a slot that has |
| 85 // fallback content, and the slot is distributed to another slot. |
| 86 let host = document.querySelector('#host2'); |
| 87 convertTemplatesToShadowRootsWithin(host); |
| 88 removeWhiteSpaceOnlyTextNodes(host); |
| 89 |
| 90 const root = host.shadowRoot; |
| 91 const redDiv = root.querySelector('#red'); |
| 92 const otherDiv = root.querySelector('#green'); |
| 93 const innerHost = root.querySelector('#inner-host2'); |
| 94 const innerSlot = innerHost.shadowRoot.querySelector('slot'); |
| 95 |
| 96 assert_array_equals(innerSlot.assignedNodes({flatten: true}), |
| 97 [redDiv, otherDiv], |
| 98 'pre-condition: make sure the fallback content is' + |
| 99 'distributed.'); |
| 100 |
| 101 assert_equals(window.getComputedStyle(redDiv).color, red, |
| 102 '::slotted() matches fallback content.'); |
| 103 assert_equals(window.getComputedStyle(otherDiv).color, green); |
| 104 |
| 105 // Distribution change should not affect ::slotted matching. |
| 106 innerSlot.name = 'b'; |
| 107 assert_array_equals(innerSlot.assignedNodes({flatten: true}), []); |
| 108 |
| 109 assert_equals(window.getComputedStyle(redDiv).color, red, |
| 110 '::slotted() matches fallback content.'); |
| 111 assert_equals(window.getComputedStyle(otherDiv).color, green); |
| 112 |
| 113 innerSlot.name = 'a'; |
| 114 assert_array_equals(innerSlot.assignedNodes({flatten: true}), |
| 115 [redDiv, otherDiv]); |
| 116 |
| 117 assert_equals(window.getComputedStyle(redDiv).color, red, |
| 118 '::slotted() matches fallback content.'); |
| 119 assert_equals(window.getComputedStyle(otherDiv).color, green); |
| 120 }, '::slotted() should match slotted fallback content.'); |
| 121 </script> |
| 122 |
| 123 <div id="host3"> |
| 124 <template data-mode="open"> |
| 125 <div id="inner-host3"> |
| 126 <template data-mode="open"> |
| 127 <style> |
| 128 ::slotted(.red) { color: red; } |
| 129 div { color: green; } |
| 130 </style> |
| 131 <slot name="a"></slot> |
| 132 </template> |
| 133 <slot slot="a"> |
| 134 <div id="red" class="red">Red Fallback Content</div> |
| 135 <div id="green">Other Fallback Content</div> |
| 136 </slot> |
| 137 </div> |
| 138 </template> |
| 139 </div> |
| 140 |
| 141 <script> |
| 142 'use strict'; |
| 143 |
| 144 test(() => { |
| 145 // Change from the test for #host2 - #host3 has a slot with fallback content, |
| 146 // and the content is styled in the distributed tree. |
| 147 let host = document.querySelector('#host3'); |
| 148 convertTemplatesToShadowRootsWithin(host); |
| 149 removeWhiteSpaceOnlyTextNodes(host); |
| 150 |
| 151 const root = host.shadowRoot; |
| 152 const slot = root.querySelector('slot'); |
| 153 const redDiv = root.querySelector('#red'); |
| 154 const otherDiv = root.querySelector('#green'); |
| 155 const innerHost = root.querySelector('#inner-host3'); |
| 156 const innerSlot = innerHost.shadowRoot.querySelector('slot'); |
| 157 |
| 158 assert_array_equals(innerSlot.assignedNodes({flatten: true}), |
| 159 [redDiv, otherDiv], |
| 160 'pre-condition: make sure the fallback content is' + |
| 161 'distributed.'); |
| 162 |
| 163 assert_equals(window.getComputedStyle(redDiv).color, red, |
| 164 '::slotted() matches distributed fallback content.'); |
| 165 // This is not green, as inner style rules does not apply to distributed |
| 166 // fallback content. |
| 167 assert_equals(window.getComputedStyle(otherDiv).color, black, |
| 168 'non-::slotted() selector should not match distributed ' + |
| 169 'fallback content.'); |
| 170 |
| 171 // Adding an element that will get slotted change the style inside fallback |
| 172 // content. |
| 173 const newDiv = document.createElement('div'); |
| 174 newDiv.className = 'red'; |
| 175 host.appendChild(newDiv); |
| 176 |
| 177 assert_array_equals(innerSlot.assignedNodes({flatten: true}), [newDiv]); |
| 178 assert_equals(window.getComputedStyle(newDiv).color, red); |
| 179 |
| 180 assert_equals(window.getComputedStyle(redDiv).color, black, |
| 181 '::slotted() does not match fallback content when slot\'s' + |
| 182 'assigned nodes are non-empty.'); |
| 183 assert_equals(window.getComputedStyle(otherDiv).color, black); |
| 184 }, '::slotted() should match distributed fallback content.'); |
| 185 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2789363002:
Styling slot fallback content with ::slotted()
