contents-nested-declarations.html (1256B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Mixins: @contents rules 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 } 15 #e1::after { 16 content: "AFTER"; 17 @apply --m1 { 18 color: green; 19 } 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 } 34 /* Should match <div id=e2> with the specificity of :where(#e2) (zero), 35 not with the specificity of :is(:where(#e2), #u1). */ 36 :where(#e2), #u1 { 37 @apply --m2 { 38 color: red; 39 } 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>