Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 7 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-mixins/mixin-conditionals.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>CSS Mixins: Conditionals within mixins</title>
<link rel="help" href="https://drafts.csswg.org/css-mixins-1/#defining-mixins">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<style>
@mixin --m1() {
@result {
color: red;
--custom-property: wrong;
}
@media (width < 1000px) {
@result {
color: green;
}
}
@supports (color: green) {
@result {
--custom-property: exists;
}
}
@media (width > 1000px) {
@result {
color: red;
}
}
}
#e1 {
@apply --m1;
}
</style>
<div id="e1">This text should be green.</div>
<script>
test(() => {
let e1 = document.getElementById('e1');
assert_equals(getComputedStyle(e1).color, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(e1).getPropertyValue('--custom-property'), 'exists');
}, '@media and @supports wrapping @result');
</script>
<style>
#container2 {
container-type: size;
width: 100px;
height: 50px;
}
@mixin --m2() {
@container (width = 50px) {
@result {
color: red;
}
}
@container (width = 100px) {
@result {
color: green;
}
}
@container (width = 200px) {
@result {
color: red;
}
}
}
#e2 {
@apply --m2;
}
</style>
<div id="container2"><div id="e2">This text should be green.</div></div>
<script>
test(() => {
let e2 = document.getElementById('e2');
assert_equals(getComputedStyle(e2).color, 'rgb(0, 128, 0)');
}, '@container wrapping @result');
</script>
<style>
@mixin --m3() {
--some-color: red;
@media (width < 3000px) {
--some-color: green;
}
@supports (color: green) {
--some-other-color: blue;
}
@media (width > 3000px) {
--some-color: red;
}
@result {
color: var(--some-color);
--custom-property: var(--some-other-color);
}
}
#e3 {
@apply --m3;
}
</style>
<div id="e3">This text should be green.</div>
<script>
test(() => {
let e3 = document.getElementById('e3');
assert_equals(getComputedStyle(e3).color, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(e3).getPropertyValue('--custom-property'), 'blue');
}, '@media and @supports wrapping locals');
</script>
<style>
#container4 {
container-type: size;
width: 100px;
height: 50px;
}
@mixin --m4() {
--some-color: red;
@container (width = 50px) {
--some-color: pink;
}
@container (width = 100px) {
--some-color: pink;
}
@container (width = 100px) {
--some-color: green;
}
@container (width = 400px) {
--some-color: blue;
}
@result {
color: var(--some-color);
}
}
#e4 {
@apply --m4;
}
</style>
<div id="container4"><div id="e4">This text should be green.</div></div>
<script>
test(() => {
let e4 = document.getElementById('e4');
assert_equals(getComputedStyle(e4).color, 'rgb(0, 128, 0)');
}, '@container wrapping locals');
</script>
<style>
#container4b {
container-type: size;
width: 400px;
height: 50px;
}
#e4b {
@apply --m4;
}
</style>
<div id="container4b"><div id="e4b">This text should be blue (not green).</div></div>
<script>
test(() => {
let e4b = document.getElementById('e4b');
assert_equals(getComputedStyle(e4b).color, 'rgb(0, 0, 255)');
}, '@container wrapping locals with different container is not cached');
</script>
<style>
@mixin --m5() {
@media (screen) {
--some-color: pink;
}
@supports (color: green) {
--some-color: fuchsia;
}
--some-color: green;
@result {
color: var(--some-color);
}
}
#e5 {
@apply --m5;
}
</style>
<div id="container5"><div id="e5">This text should be green.</div></div>
<script>
test(() => {
let e5 = document.getElementById('e5');
assert_equals(getComputedStyle(e5).color, 'rgb(0, 128, 0)');
}, 'Bare locals overriding earlier conditional-wrapped locals');
</script>
<style>
#container6 {
container-type: size;
width: 100px;
height: 50px;
}
@mixin --m6() {
--some-color: red;
@media (width < 3000px) {
@container (width = 50px) {
--some-color: pink;
}
}
@container (width = 100px) {
@media (width > 3000px) {
--some-color: violet;
}
}
@container (width = 100px) {
@media (width < 4000px) {
--some-color: green;
}
}
@media (width < 2000px) {
@container (width = 100px) {
@result {
color: var(--some-color);
}
}
}
}
#e6 {
@apply --m6;
}
</style>
<div id="container6"><div id="e6">This text should be green.</div></div>
<script>
test(() => {
let e6 = document.getElementById('e6');
assert_equals(getComputedStyle(e6).color, 'rgb(0, 128, 0)');
}, 'Nested @media and @container locals');
</script>
</body>
</html>