tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

mixin-cssom.tentative.html (2300B)

      1 <!DOCTYPE html>
      2 <html>
      3  <head>
      4    <title>CSS Mixins: CSSOM support</title>
      5    <link rel="help" href="https://drafts.csswg.org/css-mixins/#cssom">
      6    <script src="/resources/testharness.js"></script>
      7    <script src="/resources/testharnessreport.js"></script>
      8  </head>
      9  <body>
     10    <style id=style1>
     11      @mixin --m1() {
     12        color: green;
     13        & {
     14          --foo: bar;
     15        }
     16      }
     17    </style>
     18    <script>
     19      test(() => {
     20        let ss = style1.sheet;
     21        assert_equals(ss.cssRules.length, 1);
     22        assert_equals(ss.cssRules[0].cssText,
     23 `@mixin --m1() {
     24  color: green;
     25  & { --foo: bar; }
     26 }`);
     27       }, 'serialization of @mixin');
     28    </script>
     29 
     30 
     31    <style id=style2>
     32       #foo {
     33         @apply --m1;
     34       }
     35    </style>
     36    <script>
     37      test(() => {
     38        let ss = style2.sheet;
     39        assert_equals(ss.cssRules[0].cssText,
     40 `#foo {
     41  @apply --m1;
     42 }`);
     43      }, 'serialization of rule with @apply');
     44    </script>
     45 
     46 
     47    <style id=style3>
     48      @mixin --m2() {
     49       @contents
     50      }
     51    </style>
     52    <script>
     53      test(() => {
     54        let ss = style3.sheet;
     55        assert_equals(ss.cssRules[0].cssText,
     56 `@mixin --m2() {
     57  @contents;
     58 }`);
     59      }, 'serialization of @mixin with @contents');
     60    </script>
     61 
     62 
     63    <style id=style4>
     64      #foo {
     65        color: red;
     66        @apply --m2 { color: green; }
     67      }
     68    </style>
     69    <script>
     70      test(() => {
     71        let ss = style4.sheet;
     72        assert_equals(ss.cssRules[0].cssText,
     73 `#foo {
     74  color: red;
     75  @apply --m2 { color: green; }
     76 }`);
     77        }, 'serialization of rule with @apply and contents argument');
     78    </script>
     79 
     80 
     81    <style id=style5>
     82    </style>
     83    <script>
     84      test(() => {
     85        assert_throws_dom('SyntaxError', () => {
     86          let ss = style5.sheet;
     87          ss.insertRule('@apply --m1();');
     88        });
     89      }, '@apply is not legal at top level');
     90    </script>
     91 
     92 
     93    <style id=style6>
     94      @mixin --m3(--arg type(<length>): 1em, --other-arg) {
     95        margin-left: var(--arg);
     96      }
     97    </style>
     98    <script>
     99      test(() => {
    100        let ss = style6.sheet;
    101        assert_equals(ss.cssRules[0].cssText,
    102 `@mixin --m3(--arg <length>: 1em, --other-arg) {
    103  margin-left: var(--arg);
    104 }`);
    105      }, 'serialization of @mixin with parameters');
    106    </script>
    107  </body>
    108 </html>