scope-implicit.html (6474B)
1 <!DOCTYPE html> 2 <title>@scope - implicit scope root</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_basic> 9 <div> 10 <style> 11 @scope { 12 .a { z-index:1; } 13 } 14 </style> 15 <div id=inner class=a></div> 16 </div> 17 <div id=outer class=a></div> 18 </template> 19 <script> 20 test((t) => { 21 t.add_cleanup(() => main.replaceChildren()); 22 main.append(test_basic.content.cloneNode(true)); 23 24 assert_equals(getComputedStyle(inner).zIndex, '1'); 25 assert_equals(getComputedStyle(outer).zIndex, 'auto'); 26 }, '@scope without prelude implicitly scopes to parent of owner node'); 27 </script> 28 29 <template id=test_scope_pseudo> 30 <div> 31 <div></div> 32 </div> 33 <div> 34 <div id=root> 35 <style> 36 @scope { 37 :scope { z-index:1; } 38 } 39 </style> 40 <div> 41 <div></div> 42 </div> 43 </div> 44 </div> 45 <div> 46 <div></div> 47 </div> 48 </template> 49 <script> 50 test((t) => { 51 t.add_cleanup(() => main.replaceChildren()); 52 main.append(test_scope_pseudo.content.cloneNode(true)); 53 54 assert_equals(getComputedStyle(root).zIndex, '1'); 55 56 // Only #root should be affected. 57 for (let div of main.querySelectorAll('div:not(#root)')) { 58 assert_equals(getComputedStyle(div).zIndex, 'auto'); 59 } 60 }, ':scope can style implicit root'); 61 </script> 62 63 <template id=test_duplicate> 64 <div> 65 <style> 66 @scope { 67 .a { z-index:1; } 68 } 69 </style> 70 <div id=first class=a></div> 71 </div> 72 <div> 73 <style> 74 @scope { 75 .a { z-index:1; } 76 } 77 </style> 78 <div id=second class=a></div> 79 </div> 80 <div id=outer class=a></div> 81 </template> 82 <script> 83 test((t) => { 84 t.add_cleanup(() => main.replaceChildren()); 85 main.append(test_duplicate.content.cloneNode(true)); 86 87 assert_equals(getComputedStyle(first).zIndex, '1'); 88 assert_equals(getComputedStyle(second).zIndex, '1'); 89 assert_equals(getComputedStyle(outer).zIndex, 'auto'); 90 }, '@scope works with two identical stylesheets'); 91 </script> 92 93 94 <template id=test_forgiving> 95 <div> 96 <style> 97 @scope ($invalid) { 98 #a { z-index:1; } 99 } 100 </style> 101 <div id=a></div> 102 </div> 103 </template> 104 <script> 105 test((t) => { 106 t.add_cleanup(() => main.replaceChildren()); 107 main.append(test_forgiving.content.cloneNode(true)); 108 109 assert_equals(getComputedStyle(a).zIndex, 'auto'); 110 }, '@scope with effectively empty :is() must not match anything'); 111 </script> 112 113 <template id=test_implicit_descendant> 114 <div id=div> 115 <style> 116 @scope { 117 #div { z-index:1; } 118 } 119 </style> 120 </div> 121 </template> 122 <script> 123 test((t) => { 124 t.add_cleanup(() => main.replaceChildren()); 125 main.append(test_implicit_descendant.content.cloneNode(true)); 126 127 assert_equals(getComputedStyle(div).zIndex, 'auto'); 128 }, 'Implicit @scope has implicitly added :scope descendant combinator'); 129 </script> 130 131 <template id=test_implicit_relative> 132 <div id=outer> 133 <style> 134 @scope { 135 > div { z-index:1; } 136 } 137 </style> 138 <div id=child> 139 <div id=inner></div> 140 </div> 141 </div> 142 </template> 143 <script> 144 test((t) => { 145 t.add_cleanup(() => main.replaceChildren()); 146 main.append(test_implicit_relative.content.cloneNode(true)); 147 148 assert_equals(getComputedStyle(outer).zIndex, 'auto'); 149 assert_equals(getComputedStyle(child).zIndex, '1'); 150 assert_equals(getComputedStyle(inner).zIndex, 'auto'); 151 }, 'Implicit @scope with inner relative selector'); 152 </script> 153 154 <template id=test_implicit_descendant_nesting_selector> 155 <div id=div> 156 <style> 157 @scope { 158 /* Behaves like :scope */ 159 & { z-index:1; } 160 } 161 </style> 162 <div id=inner></div> 163 </div> 164 </template> 165 <script> 166 test((t) => { 167 t.add_cleanup(() => main.replaceChildren()); 168 main.append(test_implicit_descendant_nesting_selector.content.cloneNode(true)); 169 170 assert_equals(getComputedStyle(div).zIndex, '1'); 171 assert_equals(getComputedStyle(inner).zIndex, 'auto'); 172 }, 'Implicit @scope with inner nesting selector'); 173 </script> 174 175 <template id=test_limit> 176 <div> 177 <style> 178 @scope to (.b) { 179 .a { z-index:1; } 180 } 181 </style> 182 <div id=inner class=a> 183 <div class=b> 184 <div id=outside_limit class=a></div> 185 </div> 186 </div> 187 </div> 188 <div id=outer class=a></div> 189 </template> 190 <script> 191 test((t) => { 192 t.add_cleanup(() => main.replaceChildren()); 193 main.append(test_limit.content.cloneNode(true)); 194 195 assert_equals(getComputedStyle(inner).zIndex, '1'); 196 assert_equals(getComputedStyle(outer).zIndex, 'auto'); 197 assert_equals(getComputedStyle(outside_limit).zIndex, 'auto'); 198 }, 'Implicit @scope with limit'); 199 </script> 200 201 <template id=test_concurrent_scope_proximity> 202 <style> 203 @scope { 204 * { z-index: 1;} 205 } 206 </style> 207 <div> 208 <style> 209 @scope { 210 * { z-index:2; } 211 } 212 </style> 213 <div id=inner> 214 </div> 215 </div> 216 <div id=outer></div> 217 <style> 218 @scope { 219 * { z-index: 3;} 220 } 221 </style> 222 </template> 223 <script> 224 test((t) => { 225 t.add_cleanup(() => main.replaceChildren()); 226 main.append(test_concurrent_scope_proximity.content.cloneNode(true)); 227 228 assert_equals(getComputedStyle(inner).zIndex, '2'); 229 assert_equals(getComputedStyle(outer).zIndex, '3'); 230 }, 'Proximity calculation of multiple implicit @scope'); 231 </script> 232 233 <!-- https://issues.chromium.org/issues/377647716 --> 234 <template id=test_implicit_sandwich> 235 <div id=outer> 236 <div class=foo> 237 <style> 238 @scope (#outer) { 239 @scope { 240 @scope (#inner) { 241 :scope { 242 z-index: 1; 243 } 244 } 245 } 246 } 247 </style> 248 <div id=inner></div> 249 </div> 250 </div> 251 </template> 252 <script> 253 test((t) => { 254 t.add_cleanup(() => main.replaceChildren()); 255 main.append(test_implicit_sandwich.content.cloneNode(true)); 256 assert_equals(getComputedStyle(inner).zIndex, '1'); 257 }, 'Implicit @scope sandwiched between non-implicit scopes'); 258 </script> 259 260 <template id=test_implicit_in_explicit> 261 <div id=outer> 262 <style> 263 @scope (#outer) { 264 @scope { 265 :scope { 266 z-index: 1; 267 } 268 } 269 } 270 </style> 271 </div> 272 </template> 273 <script> 274 test((t) => { 275 t.add_cleanup(() => main.replaceChildren()); 276 main.append(test_implicit_in_explicit.content.cloneNode(true)); 277 assert_equals(getComputedStyle(outer).zIndex, '1'); 278 }, 'Implicit @scope sandwiched right under an explicit scope'); 279 </script>