[web-animations-1] Play state should use the effective playback rate #3190
Description
A pending animation's play state should reflect the play state it is entering.
For example, a play-pending animation will report 'running' (not idle), a pause-pending animation will report 'paused'.
Likewise for finished animations, we should determine if the animation is finished or not based on the outcome once any pending playback rate is applied.
Consider the following example
const animation = div.animate({}, 1000);
// playState: running
// pending: true
animation.updatePlaybackRate(-1);
// playState: running
// pending: true
/* Use play() to skip to the end of the animation */
animation.play();
// playState: finished
// pending: true
await animation.ready;
// playState: running
// pending: trueAs you can see, the animation reports 'finished' even though it is about to enter the 'running' state.
By making the algorithm for calculating the play state use the effective playback rate, this will return 'running' instead.