var-in-css-keyframe-responsive.html

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#target {
  --x: rgb(0, 100, 0);
  --green: 100;
  --y: rgb(0, var(--green), 0);
  background-color: black;
}
</style>
<div id="target"></div>
<script>
test(() => {
  var animation = target.animate({backgroundColor: 'var(--x)'}, 1);
  animation.pause();
  animation.currentTime = 0.5;
  assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 50, 0)');
  target.style.setProperty('--x', 'rgb(0, 50, 0)');
  assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 25, 0)');
}, 'Uses of var() in CSS keyframes are responsive to changes in custom properties.');

test(() => {
  var animation = target.animate({color: 'var(--y)'}, 1);
  animation.pause();
  animation.currentTime = 0.5;
  assert_equals(getComputedStyle(target).color, 'rgb(0, 50, 0)');
  target.style.setProperty('--green', '50');
  assert_equals(getComputedStyle(target).color, 'rgb(0, 25, 0)');
}, 'Uses of var() in CSS keyframes are responsive to changes in custom properties.');
</script>

chromium/third_party/blink/web_tests/fast/css/variables/var-in-css-keyframe-responsive.html