mixin-parsing.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 14 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>

    <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#defining-mixins">

    <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12417">

    <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)');

    // NOTE: The @layer rule will be dropped, leaving a valid but empty @mixin body.

    test_valid_child('@mixin --m() { @result { @layer bar; } }', '@layer (statement) within @result');

    test_valid_child('@mixin --m() { @result { @layer bar {} } }', '@layer (block) within @result');

    test_valid_child('@mixin --m() { @result { @layer {} } }', '@layer (anonymous) within @result');

    test_valid_child('@mixin --m() { @result { div {} } }', 'style rule');

    test_valid_child('@mixin --m() { @result { > div {} } }', 'style rule (relative)');

    test_valid_child('@mixin --m() { @result { @media (width) {} } }', '@media');

    test_valid_child('@mixin --m() { @result { @supports (width:0) {} } }', '@supports');

    test_valid_child('@mixin --m() { @result { @container (width) {} } }', '@container');

    test_valid_child('@mixin --m() { @result { @starting-style {} } }', '@starting-style');

    test_valid_child('@mixin --m() { @result { @scope (.foo) {} } }', '@scope');

    test_valid_child('@mixin --m() { @result { @scope {} } }', '@scope (implicit)');

  </script>

  </body>

</html>