wpt/css/css-mixins/mixin-cssom.tentative.html at 8b3d7ec5d33f1ad2ff943e1a97b9e652a0f218e2 · 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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
  <head>
    <title>CSS Mixins: CSSOM support</title>
    <link rel="help" href="https://drafts.csswg.org/css-mixins/#cssom">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
  </head>
  <body>
    <style id=style1>
      @mixin --m1() {
        color: green;
        & {
          --foo: bar;
        }
      }
    </style>
    <script>
      test(() => {
        let ss = style1.sheet;
        assert_equals(ss.cssRules.length, 1);
        assert_equals(ss.cssRules[0].cssText,
`@mixin --m1() {
  color: green;
  & { --foo: bar; }
}`);
       }, 'serialization of @mixin');
    </script>


    <style id=style2>
       #foo {
         @apply --m1;
       }
    </style>
    <script>
      test(() => {
        let ss = style2.sheet;
        assert_equals(ss.cssRules[0].cssText,
`#foo {
  @apply --m1;
}`);
      }, 'serialization of rule with @apply');
    </script>


    <style id=style3>
      @mixin --m2() {
       @contents
      }
    </style>
    <script>
      test(() => {
        let ss = style3.sheet;
        assert_equals(ss.cssRules[0].cssText,
`@mixin --m2() {
  @contents;
}`);
      }, 'serialization of @mixin with @contents');
    </script>


    <style id=style4>
      #foo {
        color: red;
        @apply --m2 { color: green; }
      }
    </style>
    <script>
      test(() => {
        let ss = style4.sheet;
        assert_equals(ss.cssRules[0].cssText,
`#foo {
  color: red;
  @apply --m2 { color: green; }
}`);
        }, 'serialization of rule with @apply and contents argument');
    </script>


    <style id=style5>
    </style>
    <script>
      test(() => {
        assert_throws_dom('SyntaxError', () => {
          let ss = style5.sheet;
          ss.insertRule('@apply --m1();');
        });
      }, '@apply is not legal at top level');
    </script>


    <style id=style6>
      @mixin --m3(--arg type(<length>): 1em, --other-arg) {
        margin-left: var(--arg);
      }
    </style>
    <script>
      test(() => {
        let ss = style6.sheet;
        assert_equals(ss.cssRules[0].cssText,
`@mixin --m3(--arg <length>: 1em, --other-arg) {
  margin-left: var(--arg);
}`);
      }, 'serialization of @mixin with parameters');
    </script>
  </body>
</html>