apply-nested-declarations.html (1167B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Mixins: @apply rules become nested declarations</title> 5 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#using-mixins"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 <body> 10 11 <style> 12 @mixin --m1() { 13 color: green; 14 } 15 #e1::after { 16 content: "AFTER"; 17 @apply --m1; 18 } 19 </style> 20 <div id="e1"></div> 21 <script> 22 test(() => { 23 assert_equals(getComputedStyle(e1, '::after').color, 'rgb(0, 128, 0)'); 24 }, 'Can mix declarations into pseudo-elements'); 25 </script> 26 27 28 <style> 29 @mixin --m2() { 30 color: red; 31 } 32 /* Should match <div id=e2> with the specificity of :where(#e2) (zero), 33 not with the specificity of :is(:where(#e2), #u1). */ 34 :where(#e2), #u1 { 35 @apply --m2; 36 } 37 :where(#e2) { 38 color: green; /* Wins. */ 39 } 40 </style> 41 <div id="e2"></div> 42 <script> 43 test(() => { 44 assert_equals(getComputedStyle(e2).color, 'rgb(0, 128, 0)'); 45 }, 'Nested declarations have top-level specificity behavior'); 46 </script> 47 48 </body> 49 </html>