mixin-media-query-invalidation-2.html (1198B)
1 <!DOCTYPE html> 2 <head> 3 <title>CSS Mixins: Invalidates on negative media query becoming positive</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: red; 13 } 14 @media (width < 50px) { 15 @mixin --m1() { 16 color: green; 17 } 18 } 19 </style> 20 <style> 21 /* Invalidated by a mixin in a different style sheet. */ 22 #target { 23 @apply --m1; 24 } 25 </style> 26 <div id='target'>This text should be green once narrowed.</div> 27 "></iframe> 28 <script> 29 promise_test(async () => { 30 await new Promise(r => iframe.addEventListener('load', r)); 31 32 let target = iframe.contentDocument.getElementById('target'); 33 assert_equals(getComputedStyle(target).color, "rgb(255, 0, 0)"); 34 iframe.width = 30; 35 assert_equals(getComputedStyle(target).color, "rgb(0, 128, 0)"); 36 }); 37 </script> 38 </body> 39 </html>