tor-browser

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

layer-property-override.html (3257B)

      1 <!DOCTYPE html>
      2 <title>Resolving @property name conflicts with cascade layers</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering">
      4 <link rel="author" href="mailto:xiaochengh@chromium.org">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <style>
      8 #target, #reference {
      9  width: 100px;
     10  height: 100px;
     11 }
     12 
     13 #reference {
     14  background-color: green;
     15 }
     16 </style>
     17 
     18 <div id="target"></div>
     19 <div id="reference"></div>
     20 
     21 <script>
     22 // In all tests, background color of #target should be green, same as #reference
     23 
     24 const testCases = [
     25  {
     26    title: '@property unlayered overrides layered',
     27    style: `
     28      #target {
     29        background-color: var(--foo);
     30      }
     31 
     32      @property --foo {
     33        syntax: '<color>';
     34        inherits: false;
     35        initial-value: green;
     36      }
     37 
     38      @layer {
     39        @property --foo {
     40          syntax: '<color>';
     41          inherits: false;
     42          initial-value: red;
     43        }
     44      }
     45   `
     46  },
     47 
     48  {
     49    title: '@property override between layers',
     50    style: `
     51      @layer base, override;
     52 
     53      #target {
     54        background-color: var(--foo);
     55      }
     56 
     57      @layer override {
     58        @property --foo {
     59          syntax: '<color>';
     60          inherits: false;
     61          initial-value: green;
     62        }
     63      }
     64 
     65      @layer base {
     66        @property --foo {
     67          syntax: '<color>';
     68          inherits: false;
     69          initial-value: red;
     70        }
     71      }
     72    `
     73  },
     74 
     75  {
     76    title: '@property override update with appended sheet 1',
     77    style: `
     78      @layer base, override;
     79 
     80      #target {
     81        background-color: var(--foo);
     82      }
     83 
     84      @layer override {
     85        @property --foo {
     86          syntax: '<color>';
     87          inherits: false;
     88          initial-value: green;
     89        }
     90      }
     91    `,
     92    append: `
     93      @layer base {
     94        @property --foo {
     95          syntax: '<color>';
     96          inherits: false;
     97          initial-value: red;
     98        }
     99      }
    100    `
    101  },
    102 
    103  {
    104    title: '@property override update with appended sheet 2',
    105    style: `
    106      @layer base, override;
    107 
    108      #target {
    109        background-color: var(--foo);
    110      }
    111 
    112      @layer base {
    113        @property --foo {
    114          syntax: '<color>';
    115          inherits: false;
    116          initial-value: red;
    117        }
    118      }
    119    `,
    120    append: `
    121      @layer override {
    122        @property --foo {
    123          syntax: '<color>';
    124          inherits: false;
    125          initial-value: green;
    126        }
    127      }
    128    `
    129  },
    130 ];
    131 
    132 for (let testCase of testCases) {
    133  var documentStyle = document.createElement('style');
    134  documentStyle.appendChild(document.createTextNode(testCase['style']));
    135  document.head.appendChild(documentStyle);
    136 
    137  var appendedStyle;
    138  if (testCase['append']) {
    139    document.body.offsetLeft;  // Force style update
    140    appendedStyle = document.createElement('style');
    141    appendedStyle.appendChild(document.createTextNode(testCase['append']));
    142    document.head.appendChild(appendedStyle);
    143  }
    144 
    145  test(function () {
    146    assert_equals(getComputedStyle(target).backgroundColor,
    147                  getComputedStyle(reference).backgroundColor);
    148  }, testCase['title']);
    149 
    150  if (appendedStyle)
    151    appendedStyle.remove();
    152  documentStyle.remove();
    153 }
    154 </script>