Make SVG 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 test changes here makes 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: I3332e29c26171815c50fe2a0f16be56fd47276be
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6950754
Reviewed-by: Kevin Ellis <[email protected]>
Commit-Queue: Rune Lillesveen <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1516452}

Author: lilles

scroll-animations/view-timelines/svg-graphics-element-001.html

@@ -36,9 +36,10 @@
     const anim = target.getAnimations()[0];
     await anim.ready;
     assert_equals(getComputedStyle(target).stroke, 'rgb(0, 0, 254)');
-    scroller.scrollTop =
-        0.5*(scroller.scrollHeight - scroller.clientHeight);
-    await waitForNextFrame();
+    await runAndWaitForFrameUpdate(() => {
+      scroller.scrollTop =
+          0.5*(scroller.scrollHeight - scroller.clientHeight);
+    });
     assert_equals(getComputedStyle(target).stroke, 'rgb(0, 64, 127)');
   }, 'View timeline attached to SVG graphics element');
 </script>

scroll-animations/view-timelines/svg-graphics-element-002.html

@@ -38,9 +38,10 @@
     const anim = target.getAnimations()[0];
     await anim.ready;
     assert_equals(getComputedStyle(target).stroke, 'rgb(0, 0, 254)');
-    scroller.scrollTop =
-        0.5*(scroller.scrollHeight - scroller.clientHeight);
-    await waitForNextFrame();
+    await runAndWaitForFrameUpdate(() => {
+      scroller.scrollTop =
+          0.5*(scroller.scrollHeight - scroller.clientHeight);
+    });
     assert_equals(getComputedStyle(target).stroke, 'rgb(0, 64, 127)');
   }, 'View timeline attached to SVG graphics element');
 </script>

scroll-animations/view-timelines/svg-graphics-element-003.html

@@ -39,9 +39,10 @@
     const anim = target.getAnimations()[0];
     await anim.ready;
     assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 254)');
-    scroller.scrollTop =
-        0.5*(scroller.scrollHeight - scroller.clientHeight);
-    await waitForNextFrame();
+    await runAndWaitForFrameUpdate(() => {
+      scroller.scrollTop =
+          0.5*(scroller.scrollHeight - scroller.clientHeight);
+    });
     assert_equals(getComputedStyle(target).color, 'rgb(0, 64, 127)');
   }, 'View timeline attached to SVG graphics element');
 </script>