mixin-layers.html (1928B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Mixins: @layer</title> 5 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#mixin-preamble"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 <body> 10 11 <!-- Note that the layer order is fixed across all sub-tests: --> 12 <style> 13 @layer one, two; 14 </style> 15 16 17 <style> 18 @layer one { 19 @mixin --m1() { 20 color: green; 21 } 22 } 23 24 #e1 { 25 @apply --m1(); 26 } 27 </style> 28 <div id="e1">This text should be green.</div> 29 <script> 30 test(() => { 31 assert_equals(getComputedStyle(e1).color, 'rgb(0, 128, 0)'); 32 }, 'Mixins work inside layers'); 33 </script> 34 35 36 <style> 37 @layer { 38 @mixin --m2() { 39 color: green; 40 } 41 } 42 43 #e2 { 44 @apply --m2(); 45 } 46 </style> 47 <div id="e2">This text should be green.</div> 48 <script> 49 test(() => { 50 assert_equals(getComputedStyle(e2).color, 'rgb(0, 128, 0)'); 51 }, 'Mixins work inside layers (anonymous)'); 52 </script> 53 54 55 <style> 56 @layer two { 57 @mixin --m3() { 58 color: green; 59 } 60 } 61 62 @layer one { 63 @mixin --m3() { 64 color: red; 65 } 66 } 67 68 #e3 { 69 @apply --m3(); 70 } 71 </style> 72 <div id="e3">This text should be green.</div> 73 <script> 74 test(() => { 75 assert_equals(getComputedStyle(e3).color, 'rgb(0, 128, 0)'); 76 }, 'Mixins in stronger layer wins'); 77 </script> 78 79 80 <style> 81 @layer one { 82 @mixin --m4() { 83 color: red; 84 } 85 } 86 87 @layer two { 88 @mixin --m4() { 89 color: green; 90 } 91 } 92 93 #e4 { 94 @apply --m4(); 95 } 96 </style> 97 <div id="e4">This text should be green.</div> 98 <script> 99 test(() => { 100 assert_equals(getComputedStyle(e4).color, 'rgb(0, 128, 0)'); 101 }, 'Mixins in stronger layer wins (source order matching layer order)'); 102 </script> 103 104 </body> 105 </html>