[web-animations-2] Preserve animation progress when setting the timeline (w3c#6475)

When switching to a non-monotonic timeline on a paused animation, we set the hold time to preserve the previous progress of the animation to prevent the animation from visually jumping until the animation is unpaused.

Co-authored-by: Kevin Ellis <kevers@chromium.org>

Author: kevers-google

web-animations-2/Overview.bs

@@ -213,6 +213,22 @@ follows:
     abort this procedure.
 1.  Let |previous play state| be |animation|'s [=play state=].
 1.  Let |previous current time| be the |animation|'s [=current time=].
+1.  Set |previous progress| based in the first condition that applies:
+    <div class="switch">
+
+    : If |previous current time| is unresolved:
+
+    :: Set |previous progress| to unresolved.
+
+    : If [=end time=] is zero:
+
+    :: Set |previous progress| to zero.
+
+    : Otherwise
+
+    :: Set |previous progress| = <code>|previous current time| /
+    [=end time=]</code>
+    </div>
 1.  Let |from finite timeline| be true if |old timeline| is not null and
     not [=monotonically increasing=].
 1.  Let |to finite timeline| be true if |timeline| is not null and not
@@ -241,14 +257,14 @@ follows:
 
             :   If |previous play state| is 'paused':
 
-            :: If |previous current time| is resolved:
+            :: If |previous progress| is resolved:
 
                 1.  Set the flag |reset current time on resume| to true.
                 1.  Set [=start time=] to unresolved.
-                1.  Set [=hold time=] to |previous current time|.
+                1.  Set [=hold time=] to |previous progress| * [=end time=].
 
                 <p class="note">
-                This step ensures that the [=current time=] is preserved
+                This step ensures that |previous progress| is preserved
                 even in the case of a pause-pending animation with a resolved [=start time=].
                 <p>
 
@@ -258,10 +274,10 @@ follows:
 
             </div>
 
-    :   If |from finite timeline| and |previous current time| is resolved,
+    :   If |from finite timeline| and |previous progress| is resolved,
 
     ::  Run the procedure to <a>set the current time</a> to
-        |previous current time|.
+        |previous progress| * [=end time=].
 
     </div>