Fix toggling animation-play-state on a finished animation

This patch addresses the following problems:
* Previously could only toggle the play state between running and
  paused. Should also be able to toggle between finished and paused.
* Cross-talk between tests due to not waiting for an animation frame
  after resetting the scroll position.
* Tests did not wait for an animation after changing the scroll position
  and testing the expected style.
* Test did not use fill-forward for an animation that was at the end-
  boundary. Though this should be inclusive (separate bug), it is not
  the theme of this test, since it has no bearing on whether the pause
  took effect.

Bug: 1335132
Change-Id: I9b7be64f08e2af5340447aec99053978e73d27ea
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3696791
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1013169}

scroll-animations/css/at-scroll-timeline-paused-animations.html

@@ -5,6 +5,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-animations/#animation-play-state">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="/scroll-animations/scroll-timelines/testcommon.js"></script>
 <script src="/css/css-animations/support/testcommon.js"></script>
 <style>
   @keyframes anim {
@@ -27,40 +28,62 @@
 <script>
 'use strict';
 
-test(t => {
+async function resetScrollPosition() {
+  // Reset to 0 so we don't affect following tests.
+  document.scrollingElement.scrollTop = 0;
+  return waitForNextFrame();
+}
+
+promise_test(async t => {
   const div = addDiv(t, { style: 'width: 50px; height: 100px;' });
   const filling = addDiv(t, { class: 'fill-vh' });
   const scroller = document.scrollingElement;
-  getComputedStyle(document.scrollingElement).height
+  t.add_cleanup(resetScrollPosition);
 
   div.style.animation = 'anim 100s linear timeline paused';
+  const anim = div.getAnimations()[0];
+  await anim.ready;
+  assert_percents_equal(anim.currentTime, 0, 'timeline time reset');
   assert_equals(getComputedStyle(div).width, '100px');
 
   const maxScroll = scroller.scrollHeight - scroller.clientHeight;
   scroller.scrollTop = maxScroll;
+  await waitForNextFrame();
   assert_equals(getComputedStyle(div).width, '100px');
 
-  // Reset to 0 so we don't affect following tests.
-  document.scrollingElement.scrollTop = 0;
 }, 'Test that the scroll animation is paused');
 
-test(t => {
+promise_test(async t => {
   const div = addDiv(t, { style: 'width: 50px; height: 100px;' });
   const filling = addDiv(t, { class: 'fill-vh' });
   const scroller = document.scrollingElement;
-  getComputedStyle(document.scrollingElement).height
+  await waitForNextFrame();
 
-  div.style.animation = 'anim 100s linear timeline';
+  div.style.animation = 'anim 100s linear forwards timeline';
+  const anim = div.getAnimations()[0];
+  await anim.ready;
+  assert_percents_equal(anim.currentTime, 0, 'timeline time reset');
   assert_equals(getComputedStyle(div).width, '100px');
 
+  await waitForNextFrame();
   const maxScroll = scroller.scrollHeight - scroller.clientHeight;
   scroller.scrollTop = maxScroll;
+  await waitForNextFrame();
   assert_equals(getComputedStyle(div).width, '200px');
 
-  div.style.animationPlayState = "paused";
-  getComputedStyle(div).animationPlayState;
-
+  div.style.animationPlayState = 'paused';
+  assert_equals(anim.playState, 'paused');
+  assert_equals(getComputedStyle(div).width, '200px',
+                'Current time preserved when pause-pending.');
+  assert_true(anim.pending,
+              'Pending state after changing animationPlayState');
+  await anim.ready;
+  assert_equals(getComputedStyle(div).width, '200px',
+                'Current time preserved when paused.');
+  assert_percents_equal(anim.timeline.currentTime, 100);
   document.scrollingElement.scrollTop = 0;
+  await waitForNextFrame();
+  assert_percents_equal(anim.timeline.currentTime, 0);
   assert_equals(getComputedStyle(div).width, '200px');
 }, 'Test that the scroll animation is paused by updating animation-play-state');