mixin-from-import-with-media-queries.html (801B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Mixins: @import with media queries</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 <style> 9 @import 'resources/imported-sheet-with-mixin.css' (width < 10000px); 10 @import 'resources/imported-sheet-with-red-mixin.css' (width > 10000px); 11 div { 12 color: red; 13 @apply --m1; 14 } 15 </style> 16 </head> 17 <body> 18 <div id="target">This text should be green.</div> 19 <script> 20 test(() => { 21 let target = document.getElementById('target'); 22 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 23 }); 24 </script> 25 </body> 26 </html>