Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 11 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-mixins/mixin-parsing.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<title>CSS Mixins: Parsing</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<script>
function test_child(css, is_valid, description) {
test(() => {
let sheet = new CSSStyleSheet();
sheet.replaceSync(css);
assert_equals(sheet.cssRules.length, 1, 'mixin is present'); // @mixin
assert_equals(sheet.cssRules[0].cssRules.length, (is_valid ? 1 : 0), 'child count');
}, `${description} is ${is_valid ? 'valid' : 'invalid'} in @mixin`);
}
function test_valid_child(css, description) {
return test_child(css, /*is_valid=*/true, description);
}
function test_invalid_child(css, description) {
return test_child(css, /*is_valid=*/false, description);
}
test_invalid_child('@mixin --m() { @layer bar; }', '@layer (statement)');
test_invalid_child('@mixin --m() { @layer bar {} }', '@layer (block)');
test_invalid_child('@mixin --m() { @layer {} }', '@layer (anonymous)');
test_valid_child('@mixin --m() { div {} }', 'style rule');
test_valid_child('@mixin --m() { > div {} }', 'style rule (relative)');
test_valid_child('@mixin --m() { @media (width) {} }', '@media');
test_valid_child('@mixin --m() { @supports (width:0) {} }', '@supports');
test_valid_child('@mixin --m() { @container (width) {} }', '@container');
test_valid_child('@mixin --m() { @starting-style {} }', '@starting-style');
test_valid_child('@mixin --m() { @scope (.foo) {} }', '@scope');
test_valid_child('@mixin --m() { @scope {} }', '@scope (implicit)');
</script>
</body>
</html>