Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<title>CSS Mixins: Mixins depending on other mixins</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@mixin --m1(@contents) {
@contents;
}
#e1 {
color: red;
@apply --m1 { color: green; }
}
@mixin --m2(@contents) {
@contents
}
#e2 {
color: red;
@apply --m1 { color: green; }
}
@mixin --m3(@contents) {
&.a {
@contents { color: blue; }
}
}
.b {
color: red;
@apply --m3 { color: green; }
}
@mixin --m4(@contents) {
&.c {
@contents { color: green; }
}
}
.d {
color: red;
@apply --m4;
}
@mixin --m5 {
@contents { color: red !important; }
color: green;
}
#e4 {
@apply --m5 { color: red !important; }
}
</style>
</head>
<body>
<div id="e1">This text should be green.</div>
<div id="e2">This text should be green.</div>
<div class="a b" id="e3">This text should be green.</div>
<div class="c d" id="e4">This text should be green.</div>
<div id="e5">This text should be green.</div>
<script>
test(() => {
let target = document.getElementById('e1');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'Simple @contents with no fallback');
test(() => {
let target = document.getElementById('e2');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'Implicit semicolon after @contents, at end of block');
test(() => {
let target = document.getElementById('e3');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'Block in @apply overrides fallback');
test(() => {
let target = document.getElementById('e4');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, 'Fallback is used if @apply has no block');
test(() => {
let target = document.getElementById('e5');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, '@contents is ignored if there is no @contents parameter');
</script>
</body>
</html>