tor-browser

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

layer-cssom-order-reverse-at-property.html (2389B)

      1 <!DOCTYPE html>
      2 <title>CSS Cascade Layers: @property rule invalidation on layer order changes</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering">
      4 <link rel="author" href="mailto:xiaochengh@chromium.org">
      5 <link rel="stylesheet" href="/fonts/ahem.css">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <style>
      9 #reference {
     10  color: green;
     11  --foo: green;
     12 }
     13 </style>
     14 
     15 <div id=target>Lorem ipsum</div>
     16 <div id=reference>Lorem ipsum</div>
     17 
     18 <script>
     19 const testCases = [
     20  {
     21    title: 'Insert layer invalidates @property',
     22    sheets: [
     23      '',
     24      `
     25        @layer first {
     26          @property --foo {
     27            syntax: '<color>';
     28            inherits: false;
     29            initial-value: green;
     30          }
     31        }
     32        @layer second {
     33          @property --foo {
     34            syntax: '<color>';
     35            inherits: false;
     36            initial-value: red;
     37          }
     38        }
     39      `,
     40    ],
     41    update: function(sheets) {
     42      sheets[0].insertRule('@layer second {}', 0);
     43    },
     44    property: '--foo',
     45  },
     46  {
     47    title: 'Delete layer invalidates @property',
     48    sheets: [
     49      '@layer second {}',
     50      `
     51        @layer first {
     52          @property --foo {
     53            syntax: '<color>';
     54            inherits: false;
     55            initial-value: red;
     56          }
     57        }
     58        @layer second {
     59          @property --foo {
     60            syntax: '<color>';
     61            inherits: false;
     62            initial-value: green;
     63          }
     64        }
     65      `,
     66    ],
     67    update: function(sheets) {
     68      sheets[0].deleteRule(0);
     69    },
     70    property: '--foo',
     71  },
     72 ];
     73 
     74 for (let testCase of testCases) {
     75  test(testObj => {
     76    const styleElements = testCase.sheets.map(sheet => {
     77      const element = document.createElement('style');
     78      element.appendChild(document.createTextNode(sheet));
     79      document.head.appendChild(element);
     80      return element;
     81    });
     82    testObj.add_cleanup(() => {
     83      for (let element of styleElements)
     84        element.remove();
     85    });
     86 
     87    const sheets = styleElements.map(element => element.sheet);
     88    testCase.update(sheets);
     89    const actual = getComputedStyle(target).getPropertyValue(testCase.property);
     90    const expected = getComputedStyle(reference).getPropertyValue(testCase.property);
     91    assert_equals(actual, expected);
     92  }, testCase.title);
     93 }
     94 </script>