Apply limit direction when ticking keyframed animation in cc

When ticking an animation, we trim to the current iteration. The trim process snaps the iteration time to the boundary of the active interval if outside the interval. This snapping prevents us from applying the correct limit direction when using a step timing function. During the trim process, we now compute the limit direction to apply if needed. We have two sets of animation curves in use: keyframed animation curves, and animation curve adapters. The former apply timing functions while the later do linear interpolation. To keep things simple, we now have 2 curve sampling functions: GetValue and GetTransformedValue. NOTREACHED added to the branch that should not be used for each of the animation curves. Bug: 40870829 Change-Id: I2ede2242fb270464626b84766e17665215dd9c72 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5689318 Reviewed-by: Robert Flack <[email protected]> Commit-Queue: Kevin Ellis <[email protected]> Cr-Commit-Position: refs/heads/main@{#1330344}
web-platform-tests · Jul 19, 2024 · e8b8d20 · e8b8d20
1 parent 3874eb9
commit e8b8d20
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 0 deletions.
diff --git a/css/css-animations/jump-start-animation-before-phase-ref.html b/css/css-animations/jump-start-animation-before-phase-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<title>Validates rendering of an animated element with jump-start in the before phase</title>
+<style type="text/css" media="screen">
+  body {
+    margin: 0;
+  }
+
+  #target {
+    height: 100px;
+    width: 100px;
+    margin: 0;
+    background-color: green;
+    transform: translateX(100px);
+  }
+</style>
+<body>
+  <div id="target"></div>
+</body>
+</html>
diff --git a/css/css-animations/jump-start-animation-before-phase.html b/css/css-animations/jump-start-animation-before-phase.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<title>Validates rendering of an animated element with jump-start in the before phase</title>
+<link rel="help" href="https://www.w3.org/TR/css-animations-1">
+<link rel="help" href="https://www.w3.org/TR/web-animations-1/#calculating-the-transformed-progress">
+<link rel="match" href="jump-start-animation-before-phase-ref.html">
+<style type="text/css" media="screen">
+  body {
+    margin: 0;
+  }
+
+  @keyframes slide {
+    from { transform: translateX(100px); }
+    to { transform: translateX(200px); }
+  }
+
+  #target {
+    background-color: green;
+    height: 100px;
+    width: 100px;
+    margin: 0;
+    animation: slide 10000s 5000s steps(1, jump-start) backwards;
+  }
+</style>
+<body>
+  <div id="target"></div>
+</body>
+<script src="/common/reftest-wait.js"></script>
+<script src="support/testcommon.js"></script>
+<script type="text/javascript">
+  window.onload = async () => {
+    await document.getAnimations()[0].ready;
+    await waitForNextFrame();
+    takeScreenshot();
+  }
+</script>