Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<head>
<title>CSS Mixins: Media Queries and invalidation</title>
<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>