scope-style-sharing-002.html (7784B)
1 <!DOCTYPE html> 2 <title>@scope - Cousin 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 (:scope:last-of-type > .foo) { 11 .foo { 12 z-index: 1; 13 } 14 } 15 </style> 16 <div class="scope-start"> 17 <div id="first" class="foo"></div> 18 </div> 19 <div class="scope-start"> 20 <div id="second" class="foo"></div> 21 </div> 22 </template> 23 <script> 24 test((t) => { 25 t.add_cleanup(() => main.replaceChildren()); 26 main.append(test_1.content.cloneNode(true)); 27 28 assert_equals(getComputedStyle(first).zIndex, '1'); 29 assert_equals(getComputedStyle(second).zIndex, 'auto'); 30 }, '@scope with cousin style sharing, second sibling exits scope'); 31 </script> 32 33 <template id=test_2> 34 <style> 35 @scope (.scope-start) to (:scope:first-of-type > .foo) { 36 .foo { 37 z-index: 1; 38 } 39 } 40 .scope-start:first-child { 41 color: green; 42 } 43 </style> 44 <div class="scope-start"> 45 <div id="first" class="foo"></div> 46 </div> 47 <div class="scope-start"> 48 <div id="second" class="foo"></div> 49 </div> 50 </template> 51 <script> 52 test((t) => { 53 t.add_cleanup(() => main.replaceChildren()); 54 main.append(test_2.content.cloneNode(true)); 55 56 assert_equals(getComputedStyle(first).zIndex, 'auto'); 57 assert_equals(getComputedStyle(second).zIndex, '1'); 58 }, '@scope with cousin style sharing, first sibling exits scope'); 59 </script> 60 61 <template id=test_3> 62 <style> 63 @scope (.scope-start:first-of-type > .foo) { 64 :scope { 65 z-index: 1; 66 } 67 } 68 </style> 69 <div class="scope-start"> 70 <div id="first" class="foo"></div> 71 </div> 72 <div class="scope-start"> 73 <div id="second" class="foo"></div> 74 </div> 75 </template> 76 <script> 77 test((t) => { 78 t.add_cleanup(() => main.replaceChildren()); 79 main.append(test_3.content.cloneNode(true)); 80 81 assert_equals(getComputedStyle(first).zIndex, '1'); 82 assert_equals(getComputedStyle(second).zIndex, 'auto'); 83 }, '@scope with cousin style sharing, first sibling enters scope'); 84 </script> 85 86 <template id=test_4> 87 <style> 88 @scope (.scope-start:last-of-type > .foo) { 89 :scope { 90 z-index: 1; 91 } 92 } 93 </style> 94 <div class="scope-start"> 95 <div id="first" class="foo"></div> 96 </div> 97 <div class="scope-start"> 98 <div id="second" class="foo"></div> 99 </div> 100 </template> 101 <script> 102 test((t) => { 103 t.add_cleanup(() => main.replaceChildren()); 104 main.append(test_4.content.cloneNode(true)); 105 106 assert_equals(getComputedStyle(first).zIndex, 'auto'); 107 assert_equals(getComputedStyle(second).zIndex, '1'); 108 }, '@scope with cousin style sharing, second sibling enters scope'); 109 </script> 110 111 <template id=test_5> 112 <div class="scope-start"> 113 <style> 114 @scope { 115 .foo { 116 z-index: 1; 117 } 118 } 119 </style> 120 <div id="first" class="foo"></div> 121 </div> 122 <div class="scope-start"> 123 <div id="second" class="foo"></div> 124 </div> 125 </template> 126 <script> 127 test((t) => { 128 t.add_cleanup(() => main.replaceChildren()); 129 main.append(test_5.content.cloneNode(true)); 130 131 assert_equals(getComputedStyle(first).zIndex, '1'); 132 assert_equals(getComputedStyle(second).zIndex, 'auto'); 133 }, '@scope with cousin style sharing, second sibling parent does not have implicit scope'); 134 </script> 135 136 <template id=test_6> 137 <div class="scope-start"> 138 <div id="first" class="foo"></div> 139 </div> 140 <div class="scope-start"> 141 <style> 142 @scope { 143 .foo { 144 z-index: 1; 145 } 146 } 147 </style> 148 <div id="second" class="foo"></div> 149 </div> 150 </template> 151 <script> 152 test((t) => { 153 t.add_cleanup(() => main.replaceChildren()); 154 main.append(test_6.content.cloneNode(true)); 155 156 assert_equals(getComputedStyle(first).zIndex, 'auto'); 157 assert_equals(getComputedStyle(second).zIndex, '1'); 158 }, '@scope with cousin style sharing, first sibling parent does not have implicit scope'); 159 </script> 160 161 <template id=test_7> 162 <div class="scope-start"> 163 <div id="first" class="foo"> 164 <style> 165 @scope { 166 :scope { 167 z-index: 1; 168 } 169 } 170 </style> 171 </div> 172 </div> 173 <div class="scope-start"> 174 <div id="second" class="foo"> 175 </div> 176 </div> 177 </template> 178 <script> 179 test((t) => { 180 t.add_cleanup(() => main.replaceChildren()); 181 main.append(test_7.content.cloneNode(true)); 182 183 assert_equals(getComputedStyle(first).zIndex, '1'); 184 assert_equals(getComputedStyle(second).zIndex, 'auto'); 185 }, '@scope with cousin style sharing, second sibling does not have implicit scope'); 186 </script> 187 188 <template id=test_8> 189 <div class="scope-start"> 190 <div id="first" class="foo"> 191 </div> 192 </div> 193 <div class="scope-start"> 194 <div id="second" class="foo"> 195 <style> 196 @scope { 197 :scope { 198 z-index: 1; 199 } 200 } 201 </style> 202 </div> 203 </div> 204 </template> 205 <script> 206 test((t) => { 207 t.add_cleanup(() => main.replaceChildren()); 208 main.append(test_8.content.cloneNode(true)); 209 210 assert_equals(getComputedStyle(first).zIndex, 'auto'); 211 assert_equals(getComputedStyle(second).zIndex, '1'); 212 }, '@scope with cousin style sharing, first sibling does not have implicit scope'); 213 </script> 214 215 <template id=test_9> 216 <style> 217 @scope (.scope-start:has(> .bar)) { 218 .foo { 219 z-index: 1; 220 } 221 } 222 </style> 223 <div class="scope-start"> 224 <div id="first" class="foo"></div> 225 <div class="bar"></div> 226 </div> 227 <div class="scope-start"> 228 <div id="second" class="foo"></div> 229 </div> 230 </template> 231 <script> 232 test((t) => { 233 t.add_cleanup(() => main.replaceChildren()); 234 main.append(test_9.content.cloneNode(true)); 235 236 assert_equals(getComputedStyle(first).zIndex, '1'); 237 assert_equals(getComputedStyle(second).zIndex, 'auto'); 238 }, '@scope with cousin style sharing, first sibling enters scope with :has'); 239 </script> 240 241 <template id=test_10> 242 <style> 243 @scope (.scope-start:has(> .bar)) { 244 .foo { 245 z-index: 1; 246 } 247 } 248 </style> 249 <div class="scope-start"> 250 <div id="first" class="foo"></div> 251 </div> 252 <div class="scope-start"> 253 <div id="second" class="foo"></div> 254 <div class="bar"></div> 255 </div> 256 </template> 257 <script> 258 test((t) => { 259 t.add_cleanup(() => main.replaceChildren()); 260 main.append(test_10.content.cloneNode(true)); 261 262 assert_equals(getComputedStyle(first).zIndex, 'auto'); 263 assert_equals(getComputedStyle(second).zIndex, '1'); 264 }, '@scope with cousin style sharing, second sibling enters scope with :has'); 265 </script> 266 267 <template id=test_11> 268 <style> 269 @scope (#first-parent) { 270 .foo { 271 z-index: 1; 272 } 273 } 274 </style> 275 <div id="first-parent"> 276 <div id="first" class="foo"></div> 277 </div> 278 <div id="second-parent"> 279 <div id="second" class="foo"></div> 280 </div> 281 </template> 282 <script> 283 test((t) => { 284 t.add_cleanup(() => main.replaceChildren()); 285 main.append(test_11.content.cloneNode(true)); 286 287 assert_equals(getComputedStyle(first).zIndex, '1'); 288 assert_equals(getComputedStyle(second).zIndex, 'auto'); 289 }, '@scope with cousin style sharing, first sibling enters scope ID selector'); 290 </script> 291 292 <template id=test_12> 293 <style> 294 @scope (#second-parent) { 295 .foo { 296 z-index: 1; 297 } 298 } 299 </style> 300 <div id="first-parent"> 301 <div id="first" class="foo"></div> 302 </div> 303 <div id="second-parent"> 304 <div id="second" class="foo"></div> 305 </div> 306 </template> 307 <script> 308 test((t) => { 309 t.add_cleanup(() => main.replaceChildren()); 310 main.append(test_12.content.cloneNode(true)); 311 312 assert_equals(getComputedStyle(first).zIndex, 'auto'); 313 assert_equals(getComputedStyle(second).zIndex, '1'); 314 }, '@scope with cousin style sharing, second sibling enters scope ID selector'); 315 </script>