var-in-css-keyframe.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#target {
  --x: rgb(0, 100, 0);
  --red: 0;
  --green: 100;
  --blue: 200;
  background-color: black;
}
</style>
<div id="target"></div>
<script>
test(() => {
  var animation = target.animate({backgroundColor: 'var(--x)'}, 1);
  animation.pause();
  animation.currentTime = 0.25;
  assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 25, 0)');
  animation.currentTime = 0.5;
  assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 50, 0)');
  animation.currentTime = 0.75;
  assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 75, 0)');
}, 'var() references can be used for smoothly interpolated animations.');

test(() => {
  var animation = target.animate({color: 'rgb(var(--red), var(--green), var(--blue))'}, 1);
  animation.pause();
  animation.currentTime = 0.25;
  assert_equals(getComputedStyle(target).color, 'rgb(0, 25, 50)');
  animation.currentTime = 0.5;
  assert_equals(getComputedStyle(target).color, 'rgb(0, 50, 100)');
  animation.currentTime = 0.75;
  assert_equals(getComputedStyle(target).color, 'rgb(0, 75, 150)');
}, 'Multiple var() references can be used for smoothly interpolated animations.');
</script>
chromium/third_party/blink/web_tests/fast/css/variables/var-in-css-keyframe.html
