mixin-parsing.html (1865B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Mixins: Parsing</title> 5 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#defining-mixins"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12417"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 </head> 10 <body> 11 12 <script> 13 function test_child(css, is_valid, description) { 14 test(() => { 15 let sheet = new CSSStyleSheet(); 16 sheet.replaceSync(css); 17 assert_equals(sheet.cssRules.length, 1, 'mixin is present'); // @mixin 18 assert_equals(sheet.cssRules[0].cssRules.length, (is_valid ? 1 : 0), 'child count'); 19 }, `${description} is ${is_valid ? 'valid' : 'invalid'} in @mixin`); 20 } 21 function test_valid_child(css, description) { 22 return test_child(css, /*is_valid=*/true, description); 23 } 24 function test_invalid_child(css, description) { 25 return test_child(css, /*is_valid=*/false, description); 26 } 27 28 test_invalid_child('@mixin --m() { @layer bar; }', '@layer (statement)'); 29 test_invalid_child('@mixin --m() { @layer bar {} }', '@layer (block)'); 30 test_invalid_child('@mixin --m() { @layer {} }', '@layer (anonymous)'); 31 test_valid_child('@mixin --m() { div {} }', 'style rule'); 32 test_valid_child('@mixin --m() { > div {} }', 'style rule (relative)'); 33 test_valid_child('@mixin --m() { @media (width) {} }', '@media'); 34 test_valid_child('@mixin --m() { @supports (width:0) {} }', '@supports'); 35 test_valid_child('@mixin --m() { @container (width) {} }', '@container'); 36 test_valid_child('@mixin --m() { @starting-style {} }', '@starting-style'); 37 test_valid_child('@mixin --m() { @scope (.foo) {} }', '@scope'); 38 test_valid_child('@mixin --m() { @scope {} }', '@scope (implicit)'); 39 </script> 40 41 </body> 42 </html>