animation-css-variable-in-keyframe-adjusted.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-animations/animation-css-variable-in-keyframe-adjusted.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>CSS Animations: adjust value of CSS variable used in keyframes</title>

<link rel="help" href="https://drafts.csswg.org/css-animations/">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="support/testcommon.js"></script>

<style>

@keyframes anim {

    from { margin-left: var(--margin-left) }

    to   { margin-left: calc(var(--margin-left) * 2) }

</style>

<div id="log"></div>

<script>

test(t => {

  const div = addDiv(t);

  div.style.setProperty('--margin-left', '100px');

  div.style.animation = 'anim 1s linear';

  const animation = div.getAnimations()[0];

  animation.currentTime = 500;

  assert_equals(

    getComputedStyle(div).marginLeft,

    '150px',

    'Animated value before updating variable'

);

  div.style.setProperty('--margin-left', '200px');

  assert_equals(

    getComputedStyle(div).marginLeft,

    '300px',

    'Animated value after updating variable'

);

}, 'Animations reflect changes to variables on element');

test(t => {

  const parentDiv = addDiv(t);

  const div = addDiv(t);

  parentDiv.appendChild(div);

  parentDiv.style.setProperty('--margin-left', '100px');

  div.style.animation = 'anim 1s linear';

  const animation = div.getAnimations()[0];

  animation.currentTime = 500;

  assert_equals(

    getComputedStyle(div).marginLeft,

    '150px',

    'Animated value before updating variable'

);

  parentDiv.style.setProperty('--margin-left', '200px');

  assert_equals(

    getComputedStyle(div).marginLeft,

    '300px',

    'Animated value after updating variable'

);

}, 'Animations reflect changes to variables on parent element');

</script>