tor-browser

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

animation-important-001.html (4392B)

      1 <!DOCTYPE html>
      2 <title>Test !important declarations vs. animation effects</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-cascade/#cascade-origin">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script>
      7  CSS.registerProperty({
      8    name: "--length-1",
      9    syntax: "<length>",
     10    initialValue: "0px",
     11    inherits: false
     12  });
     13  CSS.registerProperty({
     14    name: "--length-2",
     15    syntax: "<length>",
     16    initialValue: "0px",
     17    inherits: false
     18  });
     19 </script>
     20 <style>
     21  @keyframes bgcolor_animation {
     22    from { background-color: rgb(10, 10, 10); }
     23    to { background-color: rgb(20, 20, 20); }
     24  }
     25  @keyframes color_and_bg_animation {
     26    from { background-color: rgb(10, 10, 10); color: rgb(10, 10, 10); }
     27    to { background-color: rgb(20, 20, 20); color: rgb(20, 20, 20); }
     28  }
     29  a, div, ::before{
     30    animation-duration: 1000s;
     31    animation-delay: -500s;
     32    animation-timing-function: steps(2, end);
     33  }
     34  #target1 {
     35    animation-name: bgcolor_animation;
     36  }
     37  #target2 {
     38    background-color: rgb(0, 128, 0) !important;
     39    animation-name: bgcolor_animation;
     40  }
     41  #target3 {
     42    color: rgb(0, 128, 0) !important;
     43    animation-name: color_and_bg_animation;
     44  }
     45  #target4::before {
     46    color: rgb(0, 128, 0) !important;
     47    animation-name: color_and_bg_animation;
     48    content: " ";
     49  }
     50  #target5 {
     51    animation-name: color_and_bg_animation;
     52  }
     53  #target5:visited {
     54    color: rgb(0, 128, 0) !important;
     55  }
     56  #target6 {
     57    background-color: white;
     58    color: white !important;
     59  }
     60  #target7 {
     61    --length-1: 10px;
     62    --length-2: 10px !important;
     63  }
     64 </style>
     65 <div id="target1"></div>
     66 <div id="target2"></div>
     67 <div id="target3"></div>
     68 <div id="target4"></div>
     69 <a href="" id="target5"></a>
     70 <span id="target6"></span>
     71 <span id="target7"></span>
     72 <script>
     73 test(() => {
     74  assert_equals(getComputedStyle(target1).backgroundColor, 'rgb(15, 15, 15)');
     75 }, 'Interpolated value is observable');
     76 
     77 test(() => {
     78  assert_equals(getComputedStyle(target2).backgroundColor, 'rgb(0, 128, 0)');
     79 }, 'Important rules override animations');
     80 
     81 test(() => {
     82  assert_equals(getComputedStyle(target3).color, 'rgb(0, 128, 0)');
     83  assert_equals(getComputedStyle(target3).backgroundColor, 'rgb(15, 15, 15)');
     84 }, 'Non-overriden interpolations are observable');
     85 
     86 test(() => {
     87  assert_equals(getComputedStyle(target4, '::before').color, 'rgb(0, 128, 0)');
     88  assert_equals(getComputedStyle(target4, '::before').backgroundColor, 'rgb(15, 15, 15)');
     89 }, 'Important rules override animations (::before)');
     90 
     91 test(() => {
     92  assert_equals(getComputedStyle(target5).color, 'rgb(15, 15, 15)');
     93  assert_equals(getComputedStyle(target5).backgroundColor, 'rgb(15, 15, 15)');
     94 }, 'Important rules do not override animations on :visited as seen from JS');
     95 
     96 test(() => {
     97  getComputedStyle(target6).backgroundColor;
     98 
     99  let animation = target6.animate([
    100    { backgroundColor: 'rgb(10, 10, 10)' },
    101    { backgroundColor: 'rgb(20, 20, 20)' },
    102  ], {
    103    duration: 1000000,
    104    delay: -500000,
    105    easing: 'steps(2, end)'
    106  });
    107 
    108  assert_equals(getComputedStyle(target6).backgroundColor, 'rgb(15, 15, 15)');
    109  assert_equals(getComputedStyle(target6).color, 'rgb(255, 255, 255)');
    110 
    111  animation.effect.setKeyframes([
    112    { color: 'rgb(10, 10, 10)' },
    113    { color: 'rgb(20, 20, 20)' },
    114  ]);
    115 
    116  assert_equals(getComputedStyle(target6).backgroundColor, 'rgb(255, 255, 255)');
    117  assert_equals(getComputedStyle(target6).color, 'rgb(255, 255, 255)');
    118 }, 'Standard property animations appearing via setKeyframes do not override important declarations');
    119 
    120 test(() => {
    121  getComputedStyle(target7).getPropertyValue('--length-1');
    122 
    123  let animation = target7.animate([
    124    { '--length-1': '100px' },
    125    { '--length-1': '200px' },
    126  ], {
    127    duration: 1000000,
    128    delay: -500000,
    129    easing: 'steps(2, end)'
    130  });
    131 
    132  assert_equals(getComputedStyle(target7).getPropertyValue('--length-1'), '150px');
    133  assert_equals(getComputedStyle(target7).getPropertyValue('--length-2'), '10px');
    134 
    135  animation.effect.setKeyframes([
    136    { '--length-2': '100px' },
    137    { '--length-2': '200px' },
    138  ]);
    139 
    140  assert_equals(getComputedStyle(target7).getPropertyValue('--length-1'), '10px');
    141  assert_equals(getComputedStyle(target7).getPropertyValue('--length-2'), '10px');
    142 }, 'Custom property animations appearing via setKeyframes do not override important declarations');
    143 
    144 </script>