[web-animations-1] Calculate the play state using an animation's effective playback rate (#3191)

This fixes #3190.

Author: birtles

web-animations-1/Overview.bs

@@ -1800,6 +1800,16 @@ The procedure to <dfn>seamlessly update the playback rate</dfn> an
 [=animation=], |animation|, to |new playback rate| preserving its [=current
 time=] is as follows:
 
+1.  Let |previous play state| be |animation|'s [=play state=].
+
+    Note: It is necessary to record the play state
+    before updating |animation|'s [=effective playback rate=] since,
+    in the following logic,
+    we want to immediately apply the [=pending playback rate=] of |animation|
+    if it is <em>currently</em> <a lt="finished play state">finished</a>
+    regardless of whether or not it will still be finished after we
+    apply the [=pending playback rate=].
+
 1.  Let |animation|'s [=pending playback rate=] be |new playback rate|.
 
 1.  Perform the steps corresponding to the first matching condition from below:
@@ -1814,13 +1824,12 @@ time=] is as follows:
         playback rate=] when they run so there is no further action required in
         this case.
 
-    :   If |animation|'s [=play state=] is <a lt="idle play state">idle</a>
+    :   If |previous play state| is <a lt="idle play state">idle</a>
         or <a lt="paused play state">paused</a>,
 
     ::  [=Apply any pending playback rate=] on |animation|.
 
-    :   If |animation|'s [=play state=] is <a lt="finished play
-        state">finished</a>,
+    :   If |previous play state| is <a lt="finished play state">finished</a>,
 
     ::  1.  Let the |unconstrained current time| be the result of calculating
             the [=current time=] of |animation| substituting an [=unresolved=]
@@ -1922,9 +1931,9 @@ condition from the following:
 :   For <var>animation</var>, <a>current time</a> is <a
     lt=unresolved>resolved</a> and <em>either</em> of the following conditions
     are true:
-    *   [=playback rate=] &gt; 0 and
+    *   |animation|'s [=effective playback rate=] &gt; 0 and
         <a>current time</a> &ge; <a>target effect end</a>; <em>or</em>
-    *   [=playback rate=] &lt; 0 and
+    *   |animation|'s [=effective playback rate=] &lt; 0 and
         <a>current time</a> &le; 0,
 ::  &rarr; <dfn lt="finished play state">finished</dfn>
 :   Otherwise,