<!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>