mixin-media-query-invalidation.html (1345B)
1 <!DOCTYPE html> 2 <head> 3 <title>CSS Mixins: Media Queries and invalidation</title> 4 <link rel="help" href="https://drafts.csswg.org/css-mixins/#mixin-rule"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 </head> 8 <body> 9 <iframe id="iframe" width="500" height="300" srcdoc=" 10 <style> 11 @mixin --m1() { 12 color: tomato; 13 } 14 @media (width >= 50px) { 15 @mixin --m1() { 16 color: cornsilk; 17 } 18 } 19 @media (width < 50px) { 20 @mixin --m1() { 21 color: mediumvioletred; 22 } 23 } 24 </style> 25 <style> 26 /* Invalidated by a mixin in a different style sheet. */ 27 #target { 28 @apply --m1; 29 } 30 </style> 31 <div id='target'>Text should be a different color when narrowed.</div> 32 "></iframe> 33 <script> 34 promise_test(async () => { 35 await new Promise(r => iframe.addEventListener('load', r)); 36 37 let target = iframe.contentDocument.getElementById('target'); 38 assert_equals(getComputedStyle(target).color, "rgb(255, 248, 220)"); // cornsilk 39 iframe.width = 30; 40 assert_equals(getComputedStyle(target).color, "rgb(199, 21, 133)"); // mediumvioletred 41 }); 42 </script> 43 </body> 44 </html>