[web-animations-1] Play state should use the effective playback rate

[birtles]

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: true

As 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.

[birtles]

I'm going to go ahead and merge the PR for this since I don't expect this change to be controversial. If there are any concerns, please let me know and I'll back it out.

[birtles]

Tests for this will be updated in Mozilla bug 1495647.