[animation-trigger] Implement replay behavior for compositor triggers

Bug: 451238244, 390314945
Change-Id: I354e2d64be254f4cde413643ae9d301e703a83fb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7860380
Reviewed-by: Robert Flack <flackr@chromium.org>
Commit-Queue: David A <awogbemila@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1637300}

Author: DavMila

scroll-animations/animation-trigger/animation-trigger-replay.tentative.html

@@ -57,17 +57,19 @@
       const ACTIVATION_RANGE_START_PX = COVER_START_OFFSET + CSS_TRIGGER_START_PX;
       const ACTIVATION_RANGE_END_PX = COVER_START_OFFSET + CSS_TRIGGER_END_PX;
 
+      // TODO(crbug.com/451238244): Replace these with common methods in
+      // support.js.
       const enter = () => {
-        return runAndWaitForFrameUpdate(async () => {
+        return runAndWaitForFrameUpdate(() => {
           scroller.scrollTop =
               (ACTIVATION_RANGE_START_PX + ACTIVATION_RANGE_END_PX) / 2;
-        });
+        }).then(waitForCompositorCommit);
       }
 
       const exit = () => {
-        return runAndWaitForFrameUpdate(async () => {
+        return runAndWaitForFrameUpdate(() => {
           scroller.scrollTop = ACTIVATION_RANGE_END_PX + 100;
-        });
+        }).then(waitForCompositorCommit);
       }
 
       const reset = () => {
@@ -84,7 +86,6 @@
         // Entering the activation range should result in playing.
         await enter();
         assert_equals(animation.playState, "running");
-
         animation.pause();
         animation.currentTime = CSS_ANIMATION_DURATION / 2;
         assert_times_equal(animation.currentTime, CSS_ANIMATION_DURATION / 2);