Make some scroll-animation tests not rely on dirty-tree snapshot

An HTML PR[1] is attempting to move snapshotting of post-layout state
to where the layout tree is actually clean. The plan is for the
scroll-animations spec to also be expressed in terms of post-layout
state snapshotting.

The test changes here makes them valid both when timelines are updated
before the rendering update, and when they are only updated post-layout.

This CL starts with a few edits to check if this is an acceptable
approach.

[1] whatwg/html#11613

Bug: 384523570
Change-Id: I29c9d7d22c5abf481117857e9463b37413ef5a92
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6947907
Reviewed-by: Kevin Ellis <[email protected]>
Commit-Queue: Rune Lillesveen <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1515714}

Author: lilles

scroll-animations/css/animation-range-ignored.html

@@ -63,8 +63,9 @@
       const anim = startAnimation(t);
       await anim.ready;
 
-      scroller.scrollTop = 650;
-      await waitForNextFrame();
+      await runAndWaitForFrameUpdate(() => {
+        scroller.scrollTop = 650;
+      });
 
       // Timline time = (scroll pos - cover 0%) / (cover 100% - cover 0%) * 100%
       //              = (650 - 600)/(900 - 600) * 100% = 100/6%

scroll-animations/css/animation-range-normal-matches-cover.html

@@ -70,8 +70,9 @@
       assert_range_equals(anims[1].rangeEnd,
                           { rangeName: 'cover', offset: CSS.percent(100) });
 
-      scroller.scrollTop = 600;  // Start boundary for cover range.
-      await waitForNextFrame();
+      await runAndWaitForFrameUpdate(() => {
+        scroller.scrollTop = 600;  // Start boundary for cover range.
+      });
 
       assert_percents_equal(anims[0].currentTime, 0,
                             'currentTime at start of normal range');

scroll-animations/css/progress-based-animation-timeline.html

@@ -48,8 +48,9 @@
       await waitForNextFrame();
       const anim = document.getAnimations()[0];
       await anim.ready;
-      scroller1.scrollTop = 20;
-      await waitForNextFrame();
+      await runAndWaitForFrameUpdate(() => {
+        scroller1.scrollTop = 20;
+      });
       assert_equals(getComputedStyle(element).top, '120px');
     }, 'progress based animation timeline works');
   };

scroll-animations/scroll-timelines/cancel-animation.html

@@ -25,10 +25,12 @@
 'use strict';
 
 promise_test(async t => {
-  const animation = createScrollLinkedAnimation(t);
+  let animation;
   // Wait for new animation frame which allows the timeline to compute new
   // current time.
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    animation = createScrollLinkedAnimation(t);
+  });
   animation.play();
   animation.cancel();
 
@@ -170,9 +172,9 @@
   await animation.ready;
 
   // Make the scroll timeline inactive.
-  scroller.style.overflow = 'visible';
-  scroller.scrollTop;
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    scroller.style.overflow = 'visible';
+  });
   assert_equals(animation.timeline.currentTime, null,
                 'Sanity check the timeline is inactive.');
   animation.cancel();
@@ -194,9 +196,9 @@
   await animation.ready;
 
   // Make the scroll timeline inactive.
-  scroller.style.overflow = 'visible';
-  scroller.scrollTop;
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    scroller.style.overflow = 'visible';
+  });
   assert_equals(animation.timeline.currentTime, null,
                 'Sanity check the timeline is inactive.');