tor-browser

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

animation-css-variable-dependent-property.html (1131B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Animations: Dependent property updates correctly when animating a declared custom property</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-animations/">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="support/testcommon.js"></script>
      8 <style>
      9 @property --c {
     10  syntax: "<color>";
     11  inherits: true;
     12  initial-value: black;
     13 }
     14 @keyframes color-shift {
     15    0% {
     16        --c: black;
     17    }
     18    100% {
     19        --c: white;
     20    }
     21 }
     22 #target {
     23    color: var(--c);
     24    animation: color-shift 1s linear 1 forwards paused
     25 }
     26 </style>
     27 <div id=target></div>
     28 <div id="log"></div>
     29 <script>
     30 
     31 test(t => {
     32  const animation = target.getAnimations()[0];
     33 
     34  assert_equals(
     35    getComputedStyle(target).color,
     36    'rgb(0, 0, 0)'
     37  );
     38 
     39  animation.currentTime = 500;
     40 
     41  assert_equals(
     42    getComputedStyle(target).color,
     43    'rgb(128, 128, 128)'
     44  );
     45 
     46  animation.currentTime = 1000;
     47 
     48  assert_equals(
     49    getComputedStyle(target).color,
     50    'rgb(255, 255, 255)'
     51  );
     52 
     53 }, 'Dependent property updates correctly');
     54 
     55 </script>