mixin-basic.html (1103B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Mixins: Basic test</title> 5 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#defining-mixins"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 @mixin --m1() { /* Will be overwritten. */ 10 .cls { 11 color: red; 12 } 13 } 14 @mixin --m1() { 15 .cls { 16 color: green; 17 } 18 } 19 @mixin invalid-name() { 20 .cls { 21 color: red; 22 } 23 } 24 @mixin missing-argument-list { 25 .cls { 26 color: red; 27 } 28 } 29 @mixin --empty() {} 30 div { 31 @apply --m1; 32 @apply invalid-name; 33 @apply missing-argument-list; 34 @apply --empty; 35 } 36 </style> 37 </head> 38 <body> 39 <div><div class="cls" id="target">This text should be green.</div></div> 40 <script> 41 test(() => { 42 let target = document.getElementById('target'); 43 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 44 }); 45 </script> 46 </body> 47 </html>