scope-name-defining-rules.html (2947B)
1 <!DOCTYPE html> 2 <title>@scope - name-defining at-rules</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#scope-scope"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <main id=main></main> 8 9 <template id=test_keyframes> 10 <style> 11 @scope (#inner) { 12 @keyframes --my-anim { 13 from { background-color: rgb(0, 0, 255); } 14 to { background-color: rgb(0, 0, 255); } 15 } 16 } 17 @scope (#outer) { 18 @keyframes --my-anim { 19 from { background-color: rgb(0, 128, 0); } 20 to { background-color: rgb(0, 128, 0); } 21 } 22 } 23 #animating { 24 animation: --my-anim 1000s linear; 25 } 26 </style> 27 <div id=outer> 28 <div id=inner> 29 <div id=animating></div> 30 <div> 31 </div> 32 </template> 33 <script> 34 test((t) => { 35 main.append(test_keyframes.content.cloneNode(true)); 36 t.add_cleanup(() => main.replaceChildren()); 37 assert_equals(getComputedStyle(animating).backgroundColor, 'rgb(0, 128, 0)'); 38 }, '@keyframes is unaffected by @scope'); 39 </script> 40 41 <template id=test_keyframes_non_matching> 42 <style> 43 @scope (#nomatch) { 44 @keyframes --my-anim { 45 from { background-color: rgb(0, 128, 0); } 46 to { background-color: rgb(0, 128, 0); } 47 } 48 } 49 #animating { 50 animation: --my-anim 1000s linear; 51 } 52 </style> 53 <div id=animating></div> 54 </template> 55 <script> 56 test((t) => { 57 main.append(test_keyframes_non_matching.content.cloneNode(true)); 58 t.add_cleanup(() => main.replaceChildren()); 59 assert_equals(getComputedStyle(animating).backgroundColor, 'rgb(0, 128, 0)'); 60 }, '@keyframes is unaffected by non-matching @scope'); 61 </script> 62 63 <template id=test_property> 64 <style> 65 @scope (#inner) { 66 @property --my-prop { 67 syntax: "<length>"; 68 initial-value: 1px; 69 inherits: false; 70 } 71 } 72 @scope (#outer) { 73 @property --my-prop { 74 syntax: "<length>"; 75 initial-value: 2px; 76 inherits: false; 77 } 78 } 79 </style> 80 <div id=outer> 81 <div id=inner> 82 <div id=subject></div> 83 <div> 84 </div> 85 </template> 86 <script> 87 test((t) => { 88 main.append(test_property.content.cloneNode(true)); 89 t.add_cleanup(() => main.replaceChildren()); 90 assert_equals(getComputedStyle(subject).getPropertyValue('--my-prop'), '2px'); 91 }, '@property is unaffected by @scope'); 92 </script> 93 94 <template id=test_property_non_matching> 95 <style> 96 @scope (#nomatch) { 97 @property --my-prop { 98 syntax: "<length>"; 99 initial-value: 2px; 100 inherits: false; 101 } 102 } 103 </style> 104 <div id=subject></div> 105 </template> 106 <script> 107 test((t) => { 108 main.append(test_property_non_matching.content.cloneNode(true)); 109 t.add_cleanup(() => main.replaceChildren()); 110 assert_equals(getComputedStyle(subject).getPropertyValue('--my-prop'), '2px'); 111 }, '@property is unaffected by non-matching @scope'); 112 </script>