[@scroll-timeline] Effectively pause animations in flaky WPT

The last test in at-scroll-timeline-dynamic.tentative.html expects
*zero* time to have passed between the first and second calls to
'await assert_width(...)', when in reality several frames worth of
time has passed. This causes flakiness on bots.

We don't actually care about exactly where we're at on the document
timeline in this test file, only whether or not we are currently on
that timeline. Hence this CL uses the steps() function to effectively
"stop" document-timeline-attached animations for a full minute.

Fixed: 1248912
Change-Id: I53b0c4319daf306c0e664454b1b48208c384c657
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3158007
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/main@{#921117}

scroll-animations/css/at-scroll-timeline-dynamic.tentative.html

@@ -20,8 +20,11 @@
     width: 0px;
     height: 20px;
     animation-name: expand;
-    animation-duration: 1e10s;
-    animation-timing-function: linear;
+    /* Some of the tests in this file assume animations attached to the
+       DocumentTimeline are "stopped" without actually being paused.
+       Using 600s + steps(10, end) achieves this for one minute.*/
+    animation-duration: 600s;
+    animation-timing-function: steps(10, end);
   }
 </style>
 <div id=scrollers>
@@ -34,6 +37,8 @@
   scroller1.offsetTop;
   scroller2.offsetTop;
 
+  // Note the steps(10, end) timing function and height:100px. (10px scroll
+  // resolution).
   scroller1.scrollTop = 20;
   scroller2.scrollTop = 40;
 
@@ -98,19 +103,13 @@
 
     // Verify that the computed style after scrolling a bit.
     instantiate(async (element, expected) => {
-      scroller1.scrollTop = scroller1.scrollTop + 1;
-      scroller2.scrollTop = scroller2.scrollTop + 1;
+      scroller1.scrollTop = scroller1.scrollTop + 10;
+      scroller2.scrollTop = scroller2.scrollTop + 10;
       await waitForNextFrame();
-      scroller1.scrollTop = scroller1.scrollTop - 1;
-      scroller2.scrollTop = scroller2.scrollTop - 1;
+      scroller1.scrollTop = scroller1.scrollTop - 10;
+      scroller2.scrollTop = scroller2.scrollTop - 10;
       await waitForNextFrame();
-      assert_approx_equals(
-          parseFloat(getComputedStyle(element).width),
-          parseFloat(expected),
-          // converting between progress based scroll timelines and document
-          // timelines has some margin of rounding error, this check makes sure
-          // values are within 1/10th of a pixel.
-          0.1);
+      assert_equals(getComputedStyle(element).width, expected);
     }, description + ' [scroll]');
   }