third_party/WebKit/LayoutTests/animations/custom-properties/animate-shorthand-var.html

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
body {
  --x: green;
  --y: lime;
}
@keyframes test {
  from { background: var(--x); }
  to { background: var(--y); }
}
#cssAnimations {
  animation: test 1s -0.5s linear paused;
}
</style>
<div id="cssAnimations"></div>
<div id="webAnimations"></div>
<script>
test(() => {
  assert_equals(getComputedStyle(cssAnimations).backgroundColor, 'rgb(0, 192, 0)');
}, 'CSS Animations should interpolate shorthand properties with variable references in them.');

test(() => {
  var animation = webAnimations.animate({background: ['var(--x)', 'var(--y)']}, 1);
  animation.currentTime = 0.5;
  assert_equals(getComputedStyle(webAnimations).backgroundColor, 'rgb(0, 192, 0)');
}, 'Web Animations should interpolate shorthand properties with variable references in them.');
</script>