1 files changed, 34 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-used-in-shorthand.html b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-used-in-shorthand.html
new file mode 100644
index 0000000000..63f7fd3fe7
--- /dev/null
+++ b/testing/web-platform/tests/css/css-properties-values-api/animation/custom-property-animation-used-in-shorthand.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+
+@property --angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@keyframes angle-animation {
+  from { --angle: 0deg }
+  to { --angle: 180deg }
+}
+
+#target {
+  animation: angle-animation 1000s linear -500s;
+  background: linear-gradient(var(--angle), black, white);
+}
+
+</style>
+
+<div id="target"></div>
+
+<script>
+
+test(() => {
+    assert_equals(getComputedStyle(target).backgroundImage, 'linear-gradient(90deg, rgb(0, 0, 0), rgb(255, 255, 255))')
+}, "Animated custom property is applied in a shorthand property.");
+
+</script>