Update set-current-time-before-play.html

Based on the image mismatch, this appears to be a case of the screenshots being taken too soon. In the virtual threaded environment, we need to wait for the compositor to be ready before proceeding with the test. Bug: 1450302 Change-Id: I540b62f067bf586f0bdda130b6fd3a0ccb0fbbee Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4585044 Commit-Queue: Kevin Ellis <[email protected]> Reviewed-by: David Awogbemila <[email protected]> Cr-Commit-Position: refs/heads/main@{#1152705}
web-platform-tests · Jul 31, 2023 · 1056055 · 1056055
1 parent 237cad3
commit 1056055
Showing 1 changed file with 28 additions and 22 deletions.
diff --git a/scroll-animations/scroll-timelines/set-current-time-before-play.html b/scroll-animations/scroll-timelines/set-current-time-before-play.html
@@ -40,30 +40,36 @@
 </div>
 
 <script>
-  const box = document.getElementById('box');
-  const effect = new KeyframeEffect(box,
-    [
-    { transform: 'translateY(0)', opacity: 1},
-    { transform: 'translateY(200px)', opacity: 0}
-    ], {
-      duration: 1000,
-    }
-  );
+  async function runTest() {
+    await waitForCompositorReady();
 
-  const scroller = document.getElementById('scroller');
-  const timeline = new ScrollTimeline(
-      { source: scroller, orientation: 'block' });
-  const animation = new Animation(effect, timeline);
-  animation.currentTime = CSS.percent(0);
-  animation.play();
+    const box = document.getElementById('box');
+    const effect = new KeyframeEffect(box,
+      [
+      { transform: 'translateY(0)', opacity: 1},
+      { transform: 'translateY(200px)', opacity: 0}
+      ], {
+        duration: 1000,
+      }
+    );
 
-  animation.ready.then(() => {
-    // Move the scroller to the halfway point.
-    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-    scroller.scrollTop = 0.5 * maxScroll;
+    const scroller = document.getElementById('scroller');
+    const timeline = new ScrollTimeline(
+        { source: scroller, orientation: 'block' });
+    const animation = new Animation(effect, timeline);
+    animation.currentTime = CSS.percent(0);
+    animation.play();
 
-    waitForAnimationFrames(2).then(_ => {
-      takeScreenshot();
+    animation.ready.then(() => {
+      // Move the scroller to the halfway point.
+      const maxScroll = scroller.scrollHeight - scroller.clientHeight;
+      scroller.scrollTop = 0.5 * maxScroll;
+
+      waitForAnimationFrames(2).then(_ => {
+        takeScreenshot();
+      });
     });
-  });
+  }
+
+  window.onload = runTest;
 </script>