tor-browser

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

layer-keyframes-override.html (2902B)

      1 <!DOCTYPE html>
      2 <title>Resolving @keyframe 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: '@keyframes unlayered overrides layered',
     27    style: `
     28      #target {
     29        animation: anim 1s paused;
     30      }
     31 
     32      @keyframes anim {
     33        from { background-color: green; }
     34      }
     35 
     36      @layer {
     37        @keyframes anim {
     38          from { background-color: red; }
     39        }
     40      }
     41    `
     42  },
     43 
     44  {
     45    title: '@keyframes override between layers',
     46    style: `
     47      @layer base, override;
     48 
     49      #target {
     50        animation: anim 1s paused;
     51      }
     52 
     53      @layer override {
     54        @keyframes anim {
     55          from { background-color: green; }
     56        }
     57      }
     58 
     59      @layer base {
     60        @keyframes anim {
     61          from { background-color: red; }
     62        }
     63      }
     64    `
     65  },
     66 
     67  {
     68    title: '@keyframes override update with appended sheet 1',
     69    style: `
     70      @layer base, override;
     71 
     72      #target {
     73        animation: anim 1s paused;
     74      }
     75 
     76      @layer override {
     77        @keyframes anim {
     78          from { background-color: green; }
     79        }
     80      }
     81    `,
     82    append: `
     83      @layer base {
     84        @keyframes anim {
     85          from { background-color: red; }
     86        }
     87      }
     88    `
     89  },
     90 
     91  {
     92    title: '@keyframes override update with appended sheet 2',
     93    style: `
     94      @layer base, override;
     95 
     96      #target {
     97        animation: anim 1s paused;
     98      }
     99 
    100      @layer base {
    101        @keyframes anim {
    102          from { background-color: red; }
    103        }
    104      }
    105    `,
    106    append: `
    107      @layer override {
    108        @keyframes anim {
    109          from { background-color: green; }
    110        }
    111      }
    112    `
    113  },
    114 ];
    115 
    116 for (let testCase of testCases) {
    117  var documentStyle = document.createElement('style');
    118  documentStyle.appendChild(document.createTextNode(testCase['style']));
    119  document.head.appendChild(documentStyle);
    120 
    121  var appendedStyle;
    122  if (testCase['append']) {
    123    document.body.offsetLeft;  // Force style update
    124    appendedStyle = document.createElement('style');
    125    appendedStyle.appendChild(document.createTextNode(testCase['append']));
    126    document.head.appendChild(appendedStyle);
    127  }
    128 
    129  test(function () {
    130    assert_equals(getComputedStyle(target).backgroundColor,
    131                  getComputedStyle(reference).backgroundColor);
    132  }, testCase['title']);
    133 
    134  if (appendedStyle)
    135    appendedStyle.remove();
    136  documentStyle.remove();
    137 }
    138 </script>