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