wpt/css/css-mixins/mixins/mixin-parsing.html at master · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!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)');

    // @layer is invalid inside mixins, so it must be dropped at any depth. The
    // green sibling rule must survive, proving only the @layer was dropped and
    // not its enclosing container.
    function test_layer_dropped(css, description) {
      test(() => {
        let sheet = new CSSStyleSheet();
        sheet.replaceSync(css);
        assert_equals(sheet.cssRules.length, 1, 'mixin is present');
        let mixin_text = sheet.cssRules[0].cssText;
        assert_true(mixin_text.includes('color: green'), `sibling rule retained: ${mixin_text}`);
        assert_false(/@layer/i.test(mixin_text), `@layer dropped: ${mixin_text}`);
      }, `@layer is dropped within ${description}`);
    }

    test_layer_dropped('@mixin --m() { @result { @layer bar; div { color: green } } }', '@result (statement)');
    test_layer_dropped('@mixin --m() { @result { @layer bar {} div { color: green } } }', '@result (block)');
    test_layer_dropped('@mixin --m() { @result { div { @layer bar; color: green } } }', 'a nested style rule');
    test_layer_dropped('@mixin --m() { @result { @media (width) { @layer bar; div { color: green } } } }', '@media');
    test_layer_dropped('@mixin --m() { @result { @supports (width: 0) { @layer bar; div { color: green } } } }', '@supports');
    test_layer_dropped('@mixin --m() { @result { @container (width) { @layer bar; div { color: green } } } }', '@container');
    test_layer_dropped('@mixin --m() { @result { @scope (.foo) { @layer bar; div { color: green } } } }', '@scope');
    test_layer_dropped('@mixin --m() { @media (width) { @layer bar; @result { div { color: green } } } }', 'a body-level @media');
    test_layer_dropped('@mixin --m() { @supports (width: 0) { @layer bar; @result { div { color: green } } } }', 'a body-level @supports');
    test_layer_dropped('@mixin --m() { @container (width) { @layer bar; @result { div { color: green } } } }', 'a body-level @container');
  </script>

  </body>
</html>