scope-declarations.html (2980B)
1 <!DOCTYPE html> 2 <title>@scope - scoped declarations</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-declarations"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <main id=main></main> 7 8 <template id=test_apply_root> 9 <style> 10 @scope (.a) { 11 z-index: 1; 12 } 13 </style> 14 <div class=a></div> 15 </template> 16 <script> 17 test((t) => { 18 t.add_cleanup(() => main.replaceChildren()); 19 main.append(test_apply_root.content.cloneNode(true)); 20 assert_equals(getComputedStyle(main.querySelector('.a')).zIndex, '1'); 21 }, 'Scoped declarations apply to the scoping root'); 22 </script> 23 24 <template id=test_apply_implicit_root> 25 <div class=a> 26 <style> 27 @scope { 28 z-index: 1; 29 } 30 </style> 31 </div> 32 </template> 33 <script> 34 test((t) => { 35 t.add_cleanup(() => main.replaceChildren()); 36 main.append(test_apply_implicit_root.content.cloneNode(true)); 37 assert_equals(getComputedStyle(main.querySelector('.a')).zIndex, '1'); 38 }, 'Scoped declarations apply to implicit scoping root'); 39 </script> 40 41 <template id=test_zero_specificity> 42 <style> 43 @scope (.a) { 44 :where(:scope) { 45 z-index: 1; 46 } 47 z-index: 2; /* Wins due to order */ 48 } 49 @scope (.b) { 50 z-index: 1; 51 :where(:scope) { 52 z-index: 2; /* Wins due to order */ 53 } 54 } 55 @scope (.c) { 56 :scope { 57 z-index: 1; /* Wins due to specificity */ 58 } 59 z-index: 2; 60 } 61 </style> 62 <div class=a></div> 63 <div class=b></div> 64 <div class=c></div> 65 </template> 66 <script> 67 test((t) => { 68 t.add_cleanup(() => main.replaceChildren()); 69 main.append(test_zero_specificity.content.cloneNode(true)); 70 assert_equals(getComputedStyle(main.querySelector('.a')).zIndex, '2'); 71 assert_equals(getComputedStyle(main.querySelector('.b')).zIndex, '2'); 72 assert_equals(getComputedStyle(main.querySelector('.c')).zIndex, '1'); 73 }, 'Scoped declarations apply with zero specificity'); 74 </script> 75 76 <script> 77 78 for (let prelude of ['(.a)', '']) { 79 test((t) => { 80 let sheet = new CSSStyleSheet(); 81 sheet.replaceSync(` 82 @scope ${prelude} { 83 color: red; 84 width: 1px; 85 .b {} 86 left: 2px; 87 right: 3px; 88 .c {} 89 top: 4px; 90 bottom: 5px; 91 } 92 `); 93 assert_equals(sheet.cssRules.length, 1); 94 let scope_rule = sheet.cssRules[0]; 95 assert_equals(scope_rule.cssRules.length, 5); 96 97 assert_true(scope_rule.cssRules[0] instanceof CSSNestedDeclarations); 98 assert_equals(scope_rule.cssRules[0].cssText, 'color: red; width: 1px;'); 99 assert_true(scope_rule.cssRules[2] instanceof CSSNestedDeclarations); 100 assert_equals(scope_rule.cssRules[2].cssText, 'left: 2px; right: 3px;'); 101 assert_true(scope_rule.cssRules[4] instanceof CSSNestedDeclarations); 102 assert_equals(scope_rule.cssRules[4].cssText, 'top: 4px; bottom: 5px;'); 103 }, `Declarations are parsed into CSSNestedDeclarations, prelude=${prelude}`); 104 } 105 106 </script>