Bug 1637940 [wpt PR 23597] - [ScrollTimeline] Ensure composited animations notify blink upon starting, a=testonly

Automatic update from web-platform-tests [ScrollTimeline] Ensure composited animations notify blink upon starting KeyframeEffect is paused with local time for scroll-linked animations when ticking. To make sure the start event of a keyframe model is sent to blink, we should not set its run state to PAUSED until such event is sent. Worklet animation is also paused with local time but there is no need to hold setting the run state to PAUSED because sending start event is not applicable to worklet animations. A regression test is added to make sure that blink gets notified so the test won't timeout. Bug: 1082351 Change-Id: I6224cdab3eb46cadb6b84fcb1c0de50f3f3d816c Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2199405 Reviewed-by: Majid Valipour <majidvp@chromium.org> Commit-Queue: Yi Gu <yigu@chromium.org> Cr-Commit-Position: refs/heads/master@{#769274} -- wpt-commits: a190a45479f2cfab891e45b49f43c0542b1f9b16 wpt-pr: 23597
2020-05-21 10:22:16 +00:00 · 2020-05-21 10:22:16 +00:00 · 5d74689ad5
--- a/testing/web-platform/tests/scroll-animations/set-current-time-before-play.html
+++ b/testing/web-platform/tests/scroll-animations/set-current-time-before-play.html
@ -0,0 +1,68 @@
+<html class="reftest-wait">
+<title>Setting current time before play should not timeout</title>
+<link rel="help" href="https://drafts.csswg.org/scroll-animations/">
+<meta name="assert" content="Regression test to make sure the ready promise is correctly resolved">
+<link rel="match" href="animation-ref.html">
+
+<script src="/web-animations/testcommon.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+  #box {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+  }
+
+  #covered {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+  }
+
+  #scroller {
+    overflow: auto;
+    height: 100px;
+    width: 100px;
+    will-change: transform; /* force compositing */
+  }
+
+  #contents {
+    height: 1000px;
+    width: 100%;
+  }
+</style>
+
+<div id="box"></div>
+<div id="covered"></div>
+<div id="scroller">
+  <div id="contents"></div>
+</div>
+
+<script>
+  const box = document.getElementById('box');
+  const effect = new KeyframeEffect(box,
+    [
+    { transform: 'translateY(0)', opacity: 1},
+    { transform: 'translateY(200px)', opacity: 0}
+    ], {
+      duration: 1000,
+    }
+  );
+
+  const scroller = document.getElementById('scroller');
+  const timeline = new ScrollTimeline({ scrollSource: scroller, timeRange: 1000, orientation: 'block' });
+  const animation = new Animation(effect, timeline);
+  animation.currentTime = 0;
+  animation.play();
+
+  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();
+    });
+  });
+</script>