scope-style-sharing-001.html (6928B)
1 <!DOCTYPE html> 2 <title>@scope - Sibling Style Sharing</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <main id=main></main> 7 8 <template id=test_1> 9 <style> 10 @scope (.scope-start) to (.sibling + .sibling) { 11 .foo { 12 z-index: 1; 13 } 14 } 15 </style> 16 <div class="scope-start"> 17 <div id="first" class="sibling foo"></div> 18 <div id="second" class="sibling foo"></div> 19 </div> 20 </template> 21 <script> 22 test((t) => { 23 t.add_cleanup(() => main.replaceChildren()); 24 main.append(test_1.content.cloneNode(true)); 25 26 assert_equals(getComputedStyle(first).zIndex, '1'); 27 assert_equals(getComputedStyle(second).zIndex, 'auto'); 28 }, '@scope with sibling style sharing, second sibling exits scope'); 29 </script> 30 31 <template id=test_2> 32 <style> 33 @scope (.scope-start) to (.sibling:not(.sibling + div)) { 34 .foo { 35 z-index: 1; 36 } 37 } 38 </style> 39 <div class="scope-start"> 40 <div id="first" class="sibling foo"></div> 41 <div id="second" class="sibling foo"></div> 42 </div> 43 </template> 44 <script> 45 test((t) => { 46 t.add_cleanup(() => main.replaceChildren()); 47 main.append(test_2.content.cloneNode(true)); 48 49 assert_equals(getComputedStyle(first).zIndex, 'auto'); 50 assert_equals(getComputedStyle(second).zIndex, '1'); 51 }, '@scope with sibling style sharing, first sibling matches scope'); 52 </script> 53 54 <template id=test_3> 55 <style> 56 @scope (.sibling:not(.sibling + div)) { 57 :scope { 58 z-index: 1; 59 } 60 } 61 </style> 62 <div id="first" class="sibling"></div> 63 <div id="second" class="sibling"></div> 64 </template> 65 <script> 66 test((t) => { 67 t.add_cleanup(() => main.replaceChildren()); 68 main.append(test_3.content.cloneNode(true)); 69 70 assert_equals(getComputedStyle(first).zIndex, '1'); 71 assert_equals(getComputedStyle(second).zIndex, 'auto'); 72 }, '@scope with sibling style sharing, first sibling enters scope'); 73 </script> 74 75 <template id=test_4> 76 <style> 77 @scope (.sibling + .sibling) { 78 :scope { 79 z-index: 1; 80 } 81 } 82 </style> 83 <div id="first" class="sibling"></div> 84 <div id="second" class="sibling"></div> 85 </template> 86 <script> 87 test((t) => { 88 t.add_cleanup(() => main.replaceChildren()); 89 main.append(test_4.content.cloneNode(true)); 90 91 assert_equals(getComputedStyle(first).zIndex, 'auto'); 92 assert_equals(getComputedStyle(second).zIndex, '1'); 93 }, '@scope with sibling style sharing, second sibling enters scope'); 94 </script> 95 96 <template id=test_5> 97 <div id="first" class="sibling"> 98 <style> 99 @scope { 100 :scope { 101 z-index: 1; 102 } 103 } 104 </style> 105 </div> 106 <div id="second" class="sibling"> 107 </div> 108 </template> 109 <script> 110 test((t) => { 111 t.add_cleanup(() => main.replaceChildren()); 112 main.append(test_5.content.cloneNode(true)); 113 114 assert_equals(getComputedStyle(first).zIndex, '1'); 115 assert_equals(getComputedStyle(second).zIndex, 'auto'); 116 }, '@scope with sibling style sharing, first sibling has implicit scope'); 117 </script> 118 119 <template id=test_6> 120 <div id="first" class="sibling"> 121 </div> 122 <div id="second" class="sibling"> 123 <style> 124 @scope { 125 :scope { 126 z-index: 1; 127 } 128 } 129 </style> 130 </div> 131 </template> 132 <script> 133 test((t) => { 134 t.add_cleanup(() => main.replaceChildren()); 135 main.append(test_6.content.cloneNode(true)); 136 137 assert_equals(getComputedStyle(first).zIndex, 'auto'); 138 assert_equals(getComputedStyle(second).zIndex, '1'); 139 }, '@scope with sibling style sharing, second sibling has implicit scope'); 140 </script> 141 142 <template id=test_7> 143 <style> 144 @scope to (.sibling + .sibling) { 145 .foo { 146 z-index: 1; 147 } 148 } 149 </style> 150 <div id="first" class="sibling foo"></div> 151 <div id="second" class="sibling foo"></div> 152 </template> 153 <script> 154 test((t) => { 155 t.add_cleanup(() => main.replaceChildren()); 156 main.append(test_7.content.cloneNode(true)); 157 158 assert_equals(getComputedStyle(first).zIndex, '1'); 159 assert_equals(getComputedStyle(second).zIndex, 'auto'); 160 }, '@scope with sibling style sharing, second sibling exits implicit scope'); 161 </script> 162 163 <template id=test_8> 164 <style> 165 @scope to (.sibling:not(.sibling + div)) { 166 .foo { 167 z-index: 1; 168 } 169 } 170 </style> 171 <div id="first" class="sibling foo"></div> 172 <div id="second" class="sibling foo"></div> 173 </template> 174 <script> 175 test((t) => { 176 t.add_cleanup(() => main.replaceChildren()); 177 main.append(test_8.content.cloneNode(true)); 178 179 assert_equals(getComputedStyle(first).zIndex, 'auto'); 180 assert_equals(getComputedStyle(second).zIndex, '1'); 181 }, '@scope with sibling style sharing, first sibling exits implicit scope'); 182 </script> 183 184 <template id=test_9> 185 <style> 186 @scope (.sibling:has(> .foo)) { 187 :scope { 188 z-index: 1; 189 } 190 } 191 </style> 192 <div id="first" class="sibling"><div class="foo"></div></div> 193 <div id="second" class="sibling"></div> 194 </template> 195 <script> 196 test((t) => { 197 t.add_cleanup(() => main.replaceChildren()); 198 main.append(test_9.content.cloneNode(true)); 199 200 assert_equals(getComputedStyle(first).zIndex, '1'); 201 assert_equals(getComputedStyle(second).zIndex, 'auto'); 202 }, '@scope with sibling style sharing, first sibling enters scope with :has'); 203 </script> 204 205 <template id=test_10> 206 <style> 207 @scope (.sibling:has(> .foo)) { 208 :scope { 209 z-index: 1; 210 } 211 } 212 </style> 213 <div id="first" class="sibling"></div> 214 <div id="second" class="sibling"><div class="foo"></div></div> 215 </template> 216 <script> 217 test((t) => { 218 t.add_cleanup(() => main.replaceChildren()); 219 main.append(test_10.content.cloneNode(true)); 220 221 assert_equals(getComputedStyle(first).zIndex, 'auto'); 222 assert_equals(getComputedStyle(second).zIndex, '1'); 223 }, '@scope with sibling style sharing, second sibling enters scope with :has'); 224 </script> 225 226 <template id=test_11> 227 <style> 228 @scope (#first) { 229 :scope { 230 z-index: 1; 231 } 232 } 233 </style> 234 <div id="first" class="sibling"></div> 235 <div id="second" class="sibling"></div> 236 </template> 237 <script> 238 test((t) => { 239 t.add_cleanup(() => main.replaceChildren()); 240 main.append(test_11.content.cloneNode(true)); 241 242 assert_equals(getComputedStyle(first).zIndex, '1'); 243 assert_equals(getComputedStyle(second).zIndex, 'auto'); 244 }, '@scope with sibling style sharing, first sibling enters scope with ID selector'); 245 </script> 246 247 <template id=test_12> 248 <style> 249 @scope (#second) { 250 :scope { 251 z-index: 1; 252 } 253 } 254 </style> 255 <div id="first" class="sibling"></div> 256 <div id="second" class="sibling"></div> 257 </template> 258 <script> 259 test((t) => { 260 t.add_cleanup(() => main.replaceChildren()); 261 main.append(test_12.content.cloneNode(true)); 262 263 assert_equals(getComputedStyle(first).zIndex, 'auto'); 264 assert_equals(getComputedStyle(second).zIndex, '1'); 265 }, '@scope with sibling style sharing, second sibling enters scope with ID selector'); 266 </script>