| <!DOCTYPE html> |
| <head> |
| <title>CSS Mixins: Media Queries and invalidation</title> |
| <link rel="help" href="https://drafts.csswg.org/css-mixins/#mixin-rule"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <iframe id="iframe" width="500" height="300" srcdoc=" |
| <style> |
| @mixin --m1() { |
| color: tomato; |
| } |
| @media (width >= 50px) { |
| @mixin --m1() { |
| color: cornsilk; |
| } |
| } |
| @media (width < 50px) { |
| @mixin --m1() { |
| color: mediumvioletred; |
| } |
| } |
| </style> |
| <style> |
| /* Invalidated by a mixin in a different style sheet. */ |
| #target { |
| @apply --m1; |
| } |
| </style> |
| <div id='target'>Text should be a different color when narrowed.</div> |
| "></iframe> |
| <script> |
| promise_test(async () => { |
| await new Promise(r => iframe.addEventListener('load', r)); |
| |
| let target = iframe.contentDocument.getElementById('target'); |
| assert_equals(getComputedStyle(target).color, "rgb(255, 248, 220)"); // cornsilk |
| iframe.width = 30; |
| assert_equals(getComputedStyle(target).color, "rgb(199, 21, 133)"); // mediumvioletred |
| }); |
| </script> |
| </body> |
| </html> |
