Support interpolation of animatable shorthand properties containing var()

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

Index: third_party/WebKit/LayoutTests/animations/animate-shorthand-var.html
diff --git a/third_party/WebKit/LayoutTests/animations/animate-shorthand-var.html b/third_party/WebKit/LayoutTests/animations/animate-shorthand-var.html
new file mode 100644
index 0000000000000000000000000000000000000000..089ec3be2641718526e2de5e011c52dffaefa03a
--- /dev/null
+++ b/third_party/WebKit/LayoutTests/animations/animate-shorthand-var.html
@@ -0,0 +1,28 @@
+<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>