tor-browser

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

layer-counter-style-override.html (3255B)

      1 <!DOCTYPE html>
      2 <title>Resolving @counter-style 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  font-family: monospace;
     10  width: min-content;
     11 }
     12 
     13 #reference::before {
     14  content: '0000';
     15 }
     16 
     17 @counter-style three {
     18  system: cyclic;
     19  symbols: '000';
     20 }
     21 
     22 @counter-style four {
     23  system: cyclic;
     24  symbols: '0000';
     25 }
     26 </style>
     27 
     28 <ul>
     29  <li id="target"></li>
     30  <li id="reference"></li>
     31 </ul>
     32 
     33 <script>
     34 // In all tests, #target::before should have 4 characters, same as #reference.
     35 
     36 const testCases = [
     37  {
     38    title: '@counter-style unlayered overrides layered',
     39    style: `
     40      #target::before {
     41        content: counter(dont-care, custom-counter-style);
     42      }
     43 
     44      @counter-style custom-counter-style {
     45        system: extends four;
     46      }
     47 
     48      @layer {
     49        @counter-style custom-counter-style {
     50          system: extends three;
     51        }
     52      }
     53    `
     54  },
     55 
     56  {
     57    title: '@counter-style override between layers',
     58    style: `
     59      @layer base, override;
     60 
     61      #target::before {
     62        content: counter(dont-care, custom-counter-style);
     63      }
     64 
     65      @layer override {
     66        @counter-style custom-counter-style {
     67          system: extends four;
     68        }
     69      }
     70 
     71      @layer base {
     72        @counter-style custom-counter-style {
     73          system: extends three;
     74        }
     75      }
     76    `
     77  },
     78 
     79  {
     80    title: '@counter-style override update with appended sheet 1',
     81    style: `
     82      @layer base, override;
     83 
     84      #target::before {
     85        content: counter(dont-care, custom-counter-style);
     86      }
     87 
     88      @layer override {
     89        @counter-style custom-counter-style {
     90          system: extends four;
     91        }
     92      }
     93    `,
     94    append: `
     95      @layer base {
     96        @counter-style custom-counter-style {
     97          system: extends three;
     98        }
     99      }
    100    `
    101  },
    102 
    103  {
    104    title: '@counter-style override update with appended sheet 2',
    105    style: `
    106      @layer base, override;
    107 
    108      #target::before {
    109        content: counter(dont-care, custom-counter-style);
    110      }
    111 
    112      @layer base {
    113        @counter-style custom-counter-style {
    114          system: extends three;
    115        }
    116      }
    117    `,
    118    append: `
    119      @layer override {
    120        @counter-style custom-counter-style {
    121          system: extends four;
    122        }
    123      }
    124    `
    125  },
    126 ];
    127 
    128 for (let testCase of testCases) {
    129  var documentStyle = document.createElement('style');
    130  documentStyle.appendChild(document.createTextNode(testCase['style']));
    131  document.head.appendChild(documentStyle);
    132 
    133  var appendedStyle;
    134  if (testCase['append']) {
    135    document.body.offsetLeft;  // Force style update
    136    appendedStyle = document.createElement('style');
    137    appendedStyle.appendChild(document.createTextNode(testCase['append']));
    138    document.head.appendChild(appendedStyle);
    139  }
    140 
    141  test(function () {
    142    assert_equals(getComputedStyle(target).width,
    143                  getComputedStyle(reference).width);
    144  }, testCase['title']);
    145 
    146  if (appendedStyle)
    147    appendedStyle.remove();
    148  documentStyle.remove();
    149 }
    150 </script>