tor-browser

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

animation-css-variable-in-keyframe-adjusted.html (1708B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CSS Animations: adjust value of CSS variable used in keyframes</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 
     10 @keyframes anim {
     11    from { margin-left: var(--margin-left) }
     12    to   { margin-left: calc(var(--margin-left) * 2) }
     13 }
     14 
     15 </style>
     16 <div id="log"></div>
     17 <script>
     18 
     19 test(t => {
     20  const div = addDiv(t);
     21  div.style.setProperty('--margin-left', '100px');
     22 
     23  div.style.animation = 'anim 1s linear';
     24  const animation = div.getAnimations()[0];
     25  animation.currentTime = 500;
     26 
     27  assert_equals(
     28    getComputedStyle(div).marginLeft,
     29    '150px',
     30    'Animated value before updating variable'
     31  );
     32 
     33  div.style.setProperty('--margin-left', '200px');
     34 
     35  assert_equals(
     36    getComputedStyle(div).marginLeft,
     37    '300px',
     38    'Animated value after updating variable'
     39  );
     40 }, 'Animations reflect changes to variables on element');
     41 
     42 test(t => {
     43  const parentDiv = addDiv(t);
     44  const div = addDiv(t);
     45  parentDiv.appendChild(div);
     46  parentDiv.style.setProperty('--margin-left', '100px');
     47 
     48  div.style.animation = 'anim 1s linear';
     49  const animation = div.getAnimations()[0];
     50  animation.currentTime = 500;
     51 
     52  assert_equals(
     53    getComputedStyle(div).marginLeft,
     54    '150px',
     55    'Animated value before updating variable'
     56  );
     57 
     58  parentDiv.style.setProperty('--margin-left', '200px');
     59 
     60  assert_equals(
     61    getComputedStyle(div).marginLeft,
     62    '300px',
     63    'Animated value after updating variable'
     64  );
     65 }, 'Animations reflect changes to variables on parent element');
     66 
     67 
     68 </script>