[web-animations-1] Swap start time position when playback rate is flipped on non-monotonic timeline (#8146)

When updating the playback rate of a non-monotonically increasing
timeline we want to preserve the effective start time behavior of
playing the animation. If the playback rate flips directions this
requires flipping the start time to the other end of the effect. See
discussion on #2075.

Author: flackr

web-animations-1/Overview.bs

@@ -1838,12 +1838,37 @@ is as follows:
     [=animation/current time=] of <var>animation</var> before changing the
     [=playback rate=].
 
+1.  Let <var>previous playback rate</var> be the current
+    [=effective playback rate=] of <var>animation</var>.
+
 1.  Set the [=playback rate=] to <var>new playback rate</var>.
 
-1.  If the <var>animation</var> is associated with a [=monotonically increasing=]
-    [=timeline=] and <var>previous time</var> is <a lt="unresolved">resolved</a>,
-    <a>set the current time</a> of <var>animation</var> to
-    <var>previous time</var>
+1.  Perform the steps corresponding to the <em>first</em> matching condition
+    from the following, if any:
+
+    <div class="switch">
+
+    :   If <var>animation</var> is associated with a [=monotonically increasing=]
+        [=timeline=] and the <var>previous time</var> is <a lt="unresolved">resolved</a>,
+
+    ::  <a>set the current time</a> of <var>animation</var> to
+        <var>previous time</var>.
+
+    :   If <var>animation</var> is associated with a non-null [=timeline=]
+        that is not [=monotonically increasing=],
+        the <a>start time</a> of <var>animation</var> is <a lt=unresolved>resolved</a>,
+        [=associated effect end=] is not infinity, and *either*:
+
+        *   the <var>previous playback rate</var> &lt; 0 and the <var>new playback rate</var> &ge; 0, or
+        *   the <var>previous playback rate</var> &ge; 0 and the <var>new playback rate</var> &lt; 0,
+
+    ::  Set <var>animation</var>'s <a>start time</a> to the result of evaluating
+        <code>[=associated effect end=] - [=start time=]</code> for <var>animation</var>.
+
+        Note: This effectively flips the animation start/end times on non-monotonic timelines
+        preserving the relative offset of the start time from the other direction.
+
+    </div>
 
 #### Seamlessly updating the playback rate of an animation #### {#seamlessly-updating-the-playback-rate-of-an-animation}