Make some scroll-timelines 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 test changes here make them valid both when timelines are updated
before the rendering update, and when they are only updated post-layout.

[1] whatwg/html#11613

Bug: 384523570
Change-Id: I9435a897fa9fd758ed96bb3c5af373f5b274a463
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6950416
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1516451}

Author: lilles

scroll-animations/scroll-timelines/current-time-writing-modes.html

@@ -38,13 +38,14 @@
   assert_percents_equal(verticalScrollTimeline.currentTime, 0,
                         'Unscrolled vertical timeline');
 
-  // The offset in the inline/horizontal direction should be inverted. The
-  // block/vertical direction should be unaffected.
-  scroller.scrollTop = 0.1 * verticalScrollRange;
-  scroller.scrollLeft = -0.8 * horizontalScrollRange;
   // Wait for new animation frame  which allows the timeline to compute new
   // current time.
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    // The offset in the inline/horizontal direction should be inverted. The
+    // block/vertical direction should be unaffected.
+    scroller.scrollTop = 0.1 * verticalScrollRange;
+    scroller.scrollLeft = -0.8 * horizontalScrollRange;
+  });
 
   assert_percents_equal(blockScrollTimeline.currentTime, 10,
                         'Scrolled block timeline');

scroll-animations/scroll-timelines/effect-updateTiming.html

@@ -460,8 +460,9 @@
   const maxScroll = scroller.scrollHeight - scroller.clientHeight;
   anim.play();
   await anim.ready;
-  scroller.scrollTop = maxScroll * 0.07
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    scroller.scrollTop = maxScroll * 0.07;
+  });
 
   assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.07,
                              'progress before updating direction');
@@ -514,8 +515,9 @@
   const maxScroll = scroller.scrollHeight - scroller.clientHeight;
   anim.play();
   await anim.ready;
-  scroller.scrollTop = maxScroll * 0.17 // 34% through first iteration
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    scroller.scrollTop = maxScroll * 0.17; // 34% through first iteration
+  });
 
   assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.34,
                              'progress before updating direction');
@@ -535,8 +537,9 @@
   const maxScroll = scroller.scrollHeight - scroller.clientHeight;
   anim.play();
   await anim.ready;
-  scroller.scrollTop = maxScroll * 0.17
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    scroller.scrollTop = maxScroll * 0.17;
+  });
   // anim.currentTime = 17000; // 34% through first iteration
   assert_time_equals_literal(anim.effect.getComputedTiming().progress, 0.34,
                              'progress before updating direction');
@@ -556,8 +559,9 @@
 async function assert_progress(animation, scrollPercent, easingFunction) {
   const scroller = animation.timeline.source;
   const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-  scroller.scrollTop = maxScroll * scrollPercent
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    scroller.scrollTop = maxScroll * scrollPercent;
+  });
   assert_approx_equals(animation.effect.getComputedTiming().progress,
                        easingFunction(scrollPercent),
                        0.01,
@@ -610,8 +614,9 @@
   assert_equals(anim.effect.getComputedTiming().progress, 0,
                 'easing replace to steps(2, end) at before phase');
 
-  scroller.scrollTop = maxScroll * 0.875
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    scroller.scrollTop = maxScroll * 0.875;
+  });
 
   assert_equals(anim.effect.getComputedTiming().progress, 0.5,
                 'change currentTime to active phase');
@@ -620,8 +625,9 @@
   assert_equals(anim.effect.getComputedTiming().progress, 1,
                 'easing replace to steps(2, start) at active phase');
 
-  scroller.scrollTop = maxScroll * 1.25
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    scroller.scrollTop = maxScroll * 1.25;
+  });
 
   anim.effect.updateTiming({ easing: 'steps(2, end)' });
   assert_equals(anim.effect.getComputedTiming().progress, 1,

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

@@ -213,10 +213,11 @@
   const animation = createScrollLinkedAnimation(t);
   const scroller = animation.timeline.source;
   const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-  scroller.scrollTop = 0.25 * maxScroll;
   // Wait for new animation frame which allows the timeline to compute new
   // current time.
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    scroller.scrollTop = 0.25 * maxScroll;
+  });
 
   const eventWatcher = new EventWatcher(t, animation, 'finish');
   animation.finish();
@@ -277,10 +278,10 @@
   animation.play();
   await animation.ready;
 
-  // Make the scroll timeline inactive.
-  scroller.style.overflow = 'visible';
-  scroller.scrollTop;
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    // Make the scroll timeline inactive.
+    scroller.style.overflow = 'visible';
+  });
   assert_equals(animation.timeline.currentTime, null,
                 'Sanity check the timeline is inactive.');
   assert_equals(animation.playState, 'running',

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

@@ -89,8 +89,9 @@
 
   const currentTimeAfterPausing = animation.currentTime;
 
-  scroller.scrollTop = 0.2 * maxScroll;
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    scroller.scrollTop = 0.2 * maxScroll;
+  });
   assert_percents_equal(animation.timeline.currentTime, 20,
                         'Sanity check timeline time changed');
 
@@ -126,12 +127,12 @@
 promise_test(async t => {
   const animation = createScrollLinkedAnimation(t);
   const scroller = animation.timeline.source;
-  // Make the scroll timeline inactive.
-  scroller.style.overflow = 'visible';
-  scroller.scrollTop;
   // Wait for new animation frame which allows the timeline to compute new
   // current time.
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    // Make the scroll timeline inactive.
+    scroller.style.overflow = 'visible';
+  });
   assert_equals(animation.timeline.currentTime, null,
                 'Sanity check the timeline is inactive.');
   // Pause the animation when the timeline is inactive.
@@ -152,12 +153,12 @@
   const scroller = animation.timeline.source;
   const maxScroll = scroller.scrollHeight - scroller.clientHeight;
   scroller.scrollTop = 0.2 * maxScroll;
-  // Make the scroll timeline inactive.
-  scroller.style.overflow = 'visible';
-  scroller.scrollTop;
   // Wait for new animation frame which allows the timeline to compute new
   // current time.
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    // Make the scroll timeline inactive.
+    scroller.style.overflow = 'visible';
+  });
   assert_equals(animation.timeline.currentTime, null,
                 'Sanity check the timeline is inactive.');
   // Play the animation when the timeline is inactive.

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

@@ -128,10 +128,10 @@
 promise_test(async t => {
   const animation = createScrollLinkedAnimation(t);
   const scroller = animation.timeline.source;
-  // Make the scroll timeline inactive.
-  scroller.style.overflow = 'visible';
-  scroller.scrollTop;
-  await waitForNextFrame();
+  await runAndWaitForFrameUpdate(() => {
+    // Make the scroll timeline inactive.
+    scroller.style.overflow = 'visible';
+  });
 
   assert_throws_dom('InvalidStateError', () => { animation.reverse(); });
 }, 'Reversing an animation without an active timeline throws an ' +

scroll-animations/scroll-timelines/scroll-timeline-range.html

@@ -71,8 +71,9 @@
       anim.cancel();
     });
     await anim.ready;
-    scroller.scrollTop = 600;
-    await waitForNextFrame();
+    await runAndWaitForFrameUpdate(() => {
+      scroller.scrollTop = 600;
+    });
 
     const expectedProgress =
         (600 - options.startOffset) / (options.endOffset - options.startOffset);