From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 ...nimation-css-variable-in-keyframe-adjusted.html | 68 ++++++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-animations/animation-css-variable-in-keyframe-adjusted.html

(limited to 'testing/web-platform/tests/css/css-animations/animation-css-variable-in-keyframe-adjusted.html')
diff --git a/testing/web-platform/tests/css/css-animations/animation-css-variable-in-keyframe-adjusted.html b/testing/web-platform/tests/css/css-animations/animation-css-variable-in-keyframe-adjusted.html
new file mode 100644
index 0000000000..f8e760c8ff
--- /dev/null
+++ b/testing/web-platform/tests/css/css-animations/animation-css-variable-in-keyframe-adjusted.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Animations: adjust value of CSS variable used in keyframes</title>
+<link rel="help" href="https://drafts.csswg.org/css-animations/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/testcommon.js"></script>
+<style>
+
+@keyframes anim {
+    from { margin-left: var(--margin-left) }
+    to   { margin-left: calc(var(--margin-left) * 2) }
+}
+
+</style>
+<div id="log"></div>
+<script>
+
+test(t => {
+  const div = addDiv(t);
+  div.style.setProperty('--margin-left', '100px');
+
+  div.style.animation = 'anim 1s linear';
+  const animation = div.getAnimations()[0];
+  animation.currentTime = 500;
+
+  assert_equals(
+    getComputedStyle(div).marginLeft,
+    '150px',
+    'Animated value before updating variable'
+  );
+
+  div.style.setProperty('--margin-left', '200px');
+
+  assert_equals(
+    getComputedStyle(div).marginLeft,
+    '300px',
+    'Animated value after updating variable'
+  );
+}, 'Animations reflect changes to variables on element');
+
+test(t => {
+  const parentDiv = addDiv(t);
+  const div = addDiv(t);
+  parentDiv.appendChild(div);
+  parentDiv.style.setProperty('--margin-left', '100px');
+
+  div.style.animation = 'anim 1s linear';
+  const animation = div.getAnimations()[0];
+  animation.currentTime = 500;
+
+  assert_equals(
+    getComputedStyle(div).marginLeft,
+    '150px',
+    'Animated value before updating variable'
+  );
+
+  parentDiv.style.setProperty('--margin-left', '200px');
+
+  assert_equals(
+    getComputedStyle(div).marginLeft,
+    '300px',
+    'Animated value after updating variable'
+  );
+}, 'Animations reflect changes to variables on parent element');
+
+
+</script>
-- 
cgit v1.2.3

