Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-mixins/mixins/important.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>CSS Mixins: !important</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="result"></div>
<style>
div {
color: red !important;
}
@mixin --result-important() {
@result {
color: green !important;
}
}
#result {
@apply --result-important;
}
</style>
<script>
test(() => {
let target = document.getElementById('result');
assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)');
}, '!important is valid in mixin result declarations');
test(() => {
let sheet = new CSSStyleSheet();
sheet.replaceSync(`
@mixin --m(--x: red !important) {
@result {
color: var(--x);
}
}
`);
assert_equals(sheet.cssRules.length, 0);
}, '!important invalidates mixin parameter defaults');
for (let argument of ['red !important', '{red !important}']) {
test(() => {
let sheet = new CSSStyleSheet();
sheet.replaceSync(`
#target {
@apply --m(${argument});
}
`);
assert_equals(sheet.cssRules.length, 1);
assert_equals(sheet.cssRules[0].cssRules.length, 0);
}, `!important invalidates mixin argument "${argument}"`);
}
</script>