Initialize start time of scroll animations to zero.

Implemented web-animations-1 spec changes introduces in [1].

- Update play and pause procedures to initialize start time of scroll
  animations to zero.
- Updated calculate play state procedure to return "running" state for
  animations that has start time resolved.
- Added/modified tests reflecting spec changes.


[1] https://github.com/w3c/csswg-drafts/pull/4842

Bug: 1070637
Change-Id: Ic83995899b2f3f8d8f985f84b8a2b438bbad7c35
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2150687
Commit-Queue: Olga Gerchikov <gerchiko@microsoft.com>
Reviewed-by: Majid Valipour <majidvp@chromium.org>
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#761974}

third_party/blink/renderer/core/animation/animation.h

@@ -250,7 +250,7 @@ class CORE_EXPORT Animation : public EventTargetWithInlineData,
   bool PreCommit(int compositor_group,
                  const PaintArtifactCompositor*,
                  bool start_on_compositor);
-  void PostCommit(double timeline_time);
+  void PostCommit();
 
   unsigned SequenceNumber() const override { return sequence_number_; }
 

third_party/blink/renderer/core/animation/animation_test.cc

@@ -1439,7 +1439,7 @@ TEST_F(AnimationAnimationTestNoCompositing, ScrollLinkedAnimationCreation) {
   scroll_animation->play();
 
   // Verify start and current times in Pending state.
-  EXPECT_FALSE(scroll_animation->startTime().has_value());
+  EXPECT_EQ(0, scroll_animation->startTime());
   EXPECT_EQ(20, scroll_animation->currentTime());
 
   UpdateAllLifecyclePhasesForTest();

third_party/blink/renderer/core/animation/pending_animations.cc

@@ -95,6 +95,8 @@ bool PendingAnimations::Update(
       if (animation->Playing() && !animation->startTime()) {
         waiting_for_start_time.push_back(animation.Get());
       } else if (animation->PendingInternal()) {
+        DCHECK(animation->timeline()->IsActive() &&
+               animation->timeline()->CurrentTimeSeconds());
         // A pending animation that is not waiting on a start time does not need
         // to be synchronized with animations that are starting up. Nonetheless,
         // it needs to notify the animation to resolve the ready promise and
@@ -117,18 +119,16 @@ bool PendingAnimations::Update(
   } else {
     for (auto& animation : waiting_for_start_time) {
       DCHECK(!animation->startTime());
-      // TODO(crbug.com/916117): Handle start time of scroll-linked animations.
+      DCHECK(animation->timeline()->IsActive() &&
+             animation->timeline()->CurrentTimeSeconds());
       animation->NotifyReady(
           animation->timeline()->CurrentTimeSeconds().value_or(0));
     }
   }
 
   // FIXME: The postCommit should happen *after* the commit, not before.
-  for (auto& animation : animations) {
-    // TODO(crbug.com/916117): Handle NaN current time of scroll timeline.
-    animation->PostCommit(
-        animation->timeline()->CurrentTimeSeconds().value_or(0));
-  }
+  for (auto& animation : animations)
+    animation->PostCommit();
 
   DCHECK(pending_.IsEmpty());
   for (auto& animation : deferred)
@@ -208,8 +208,8 @@ void PendingAnimations::FlushWaitingNonCompositedAnimations() {
     if (animation->HasActiveAnimationsOnCompositor()) {
       waiting_for_compositor_animation_start_.push_back(animation);
     } else {
-      // TODO(crbug.com/916117): Handle start time of scroll-linked
-      // animations.
+      DCHECK(animation->timeline()->IsActive() &&
+             animation->timeline()->CurrentTimeSeconds());
       animation->NotifyReady(
           animation->timeline()->CurrentTimeSeconds().value_or(0));
     }

third_party/blink/web_tests/external/wpt/scroll-animations/element-based-offset.html

@@ -89,6 +89,10 @@
         endScrollOffset: {target: end, ...config.end }
       });
 
+      // Wait for new animation frame  which allows the timeline to compute new
+      // current time.
+      await waitForNextFrame();
+
       const animation = createScrollLinkedAnimation(t, timeline);
       const scrollRange = end.offsetTop - start.offsetTop;
       const timeRange = animation.timeline.timeRange;
@@ -100,11 +104,12 @@
         "The start time is null in Idle state.");
 
       animation.play();
+      assert_true(animation.pending, "Animation is in pending state.");
       // Verify initial start and current times in Pending state.
       assert_times_equal(animation.currentTime, 0,
-        "The current time is a hold time in Pending state.");
-      assert_equals(animation.startTime, null,
-        "The start time is null in Pending state.");
+        "The current time is zero in Pending state.");
+      assert_equals(animation.startTime, 0,
+        "The start time is zero in Pending state.");
 
       await animation.ready;
       // Verify initial start and current times in Playing state.

third_party/blink/web_tests/external/wpt/scroll-animations/scroll-animation-inactive-timeline.html

+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Test basic functionality of scroll linked animation.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script src="testcommon.js"></script>
+<style>
+  .scroller {
+    overflow: auto;
+    height: 100px;
+    width: 100px;
+  }
+  .contents {
+    height: 1000px;
+    width: 100%;
+  }
+</style>
+<div id="log"></div>
+<script>
+  'use strict';
+
+promise_test(async t => {
+    const animation = createScrollLinkedAnimation(t);
+    const scroller = animation.timeline.scrollSource;
+    // Make the scroll timeline inactive.
+    scroller.style.overflow = 'visible';
+    // Wait for new animation frame which allows the timeline to compute new
+    // current time.
+    await waitForNextFrame();
+    // Play the animation when the timeline is inactive.
+    animation.play();
+    assert_equals(animation.currentTime, null,
+      'The current time is null when the timeline is inactive.');
+    assert_equals(animation.startTime, 0,
+      'The start time is zero in Pending state.');
+    await waitForNextFrame();
+    assert_true(animation.pending,
+      'Animation has play pending task while the timeline is inactive.');
+    assert_equals(animation.playState, 'running',
+      'State is \'running\' in Pending state.');
+}, 'Play pending task doesn\'t run when the timeline is inactive.');
+
+promise_test(async t => {
+    const animation = createScrollLinkedAnimation(t);
+    const scroller = animation.timeline.scrollSource;
+    // Make the scroll timeline inactive.
+    scroller.style.overflow = 'visible';
+    // Wait for new animation frame which allows the timeline to compute new
+    // current time.
+    await waitForNextFrame();
+    // Play the animation when the timeline is inactive.
+    animation.play();
+
+    // Make the scroll timeline active.
+    scroller.style.overflow = 'auto';
+    await animation.ready;
+    // Ready promise is resolved as a result of the timeline becoming active.
+    assert_equals(animation.currentTime, 0,
+      'Animation current time is resolved when the animation is ready.');
+    assert_equals(animation.startTime, 0,
+      'Animation start time is resolved when the animation is ready.');
+}, 'Animation start and current times are correct if scroll timeline is ' +
+   'activated after animation.play call.');
+
+promise_test(async t => {
+    const animation = createScrollLinkedAnimation(t);
+    const scroller = animation.timeline.scrollSource;
+    const maxScroll = scroller.scrollHeight - scroller.clientHeight;
+    const target = animation.effect.target;
+    // Advance the scroller.
+    scroller.scrollTop = 0.2 * maxScroll;
+
+    // Wait for new animation frame which allows the timeline to compute new
+    // current time.
+    await waitForNextFrame();
+    // Play the animation when the timeline is active.
+    animation.play();
+    await animation.ready;
+
+    // Make the scroll timeline inactive.
+    scroller.style.overflow = 'visible';
+    scroller.scrollTop;
+    await waitForNextFrame();
+    assert_equals(animation.playState, 'running',
+      'State is \'running\' when the timeline is inactive.');
+    assert_equals(animation.currentTime, null,
+      'Current time is unresolved when the timeline is inactive.');
+    assert_equals(animation.startTime, 0,
+      'Start time is zero when the timeline is inactive.');
+    assert_equals(
+      animation.effect.getComputedTiming().localTime,
+      null,
+      'Effect local time is null when the timeline is inactive.');
+    assert_equals(Number(getComputedStyle(target).opacity), 1,
+      'Animation does not have an effect when the timeline is inactive.');
+
+    // Make the scroll timeline active.
+    scroller.style.overflow = 'auto';
+    await waitForNextFrame();
+
+    assert_equals(animation.playState, 'running',
+      'State is \'running\' when the timeline is active.');
+    assert_equals(animation.currentTime, 200,
+      'Current time is resolved when the timeline is active.');
+    assert_equals(animation.startTime, 0,
+      'Start time is zero when the timeline is active.');
+    assert_times_equal(
+      animation.effect.getComputedTiming().localTime,
+      200,
+      'Effect local time is resolved when the timeline is active.');
+    assert_equals(Number(getComputedStyle(target).opacity), 0.2,
+      'Animation has an effect when the timeline is active.');
+}, 'Animation current time is correct when the timeline becomes newly ' +
+   'inactive and then active again.');
+
+promise_test(async t => {
+  const animation = createScrollLinkedAnimation(t);
+  const scroller = animation.timeline.scrollSource;
+  scroller.scrollTop;
+
+  // Wait for new animation frame which allows the timeline to compute new
+  // current time.
+  await waitForNextFrame();
+  animation.play();
+  await animation.ready;
+
+  // Make the scroll timeline inactive.
+  scroller.style.overflow = 'visible';
+  scroller.scrollTop;
+  await waitForNextFrame();
+
+  const eventWatcher = new EventWatcher(t, animation, 'cancel');
+  animation.cancel();
+  const cancelEvent = await eventWatcher.wait_for('cancel');
+
+  assert_equals(cancelEvent.currentTime, null,
+      'event.currentTime should be unresolved when the timeline is inactive.');
+  assert_equals(cancelEvent.timelineTime, null,
+      'event.timelineTime should be unresolved when the timeline is inactive');
+}, 'oncancel event is fired when the timeline is inactive.');
+
+
+</script>
\ No newline at end of file

third_party/blink/web_tests/external/wpt/scroll-animations/scroll-animation.html

@@ -23,7 +23,10 @@
     const animation = createScrollLinkedAnimation(t);
     const scroller = animation.timeline.scrollSource;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-    const timeRange = animation.timeline.timeRange;
+
+    // Wait for new animation frame  which allows the timeline to compute new
+    // current time.
+    await waitForNextFrame();
 
     // Verify initial start and current times in Idle state.
     assert_equals(animation.currentTime, null,
@@ -31,11 +34,12 @@
     assert_equals(animation.startTime, null,
       "The start time is null in Idle state.");
     animation.play();
+    assert_true(animation.pending, "Animation is in pending state.");
     // Verify initial start and current times in Pending state.
     assert_equals(animation.currentTime, 0,
-      "The current time is a hold time in Pending state.");
-    assert_equals(animation.startTime, null,
-      "The start time is null in Pending state.");
+      "The current time is zero in Pending state.");
+    assert_equals(animation.startTime, 0,
+      "The start time is zero in Pending state.");
 
     await animation.ready;
     // Verify initial start and current times in Playing state.
@@ -62,7 +66,7 @@ promise_test(async t => {
     const animation = createScrollLinkedAnimation(t);
     const scroller = animation.timeline.scrollSource;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-    const timeRange = animation.timeline.timeRange;
+
     // Advance the scroller.
     scroller.scrollTop = 0.2 * maxScroll;
     // Wait for new animation frame  which allows the timeline to compute new
@@ -78,8 +82,8 @@ promise_test(async t => {
     // Verify initial start and current times in Pending state.
     assert_equals(animation.currentTime, animation.timeline.currentTime,
       "The current time is a hold time in Pending state.");
-    assert_equals(animation.startTime, null,
-      "The start time is null in Pending state.");
+    assert_equals(animation.startTime, 0,
+      "The start time is zero in Pending state.");
 
     await animation.ready;
     // Verify initial start and current times in Playing state.
@@ -96,7 +100,7 @@ promise_test(async t => {
     const animation2 = createScrollLinkedAnimation(t, timeline);
     const scroller = timeline.scrollSource;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;
-    const timeRange = timeline.timeRange;
+
     // Advance the scroller.
     scroller.scrollTop = 0.2 * maxScroll;
     // Wait for new animation frame  which allows the timeline to compute new
@@ -118,13 +122,13 @@ promise_test(async t => {
     assert_equals(animation1.currentTime, timeline.currentTime,
       "The current time corresponds to the scroll position of the scroller" +
         " in Pending state.");
-    assert_equals(animation1.startTime, null,
-      "The start time is null in Pending state.");
+    assert_equals(animation1.startTime, 0,
+      "The start time is zero in Pending state.");
     assert_equals(animation2.currentTime, timeline.currentTime,
       "The current time corresponds to the scroll position of the scroller" +
         " in Pending state.");
-    assert_equals(animation2.startTime, null,
-      "The start time is null in Pending state.");
+    assert_equals(animation2.startTime, 0,
+      "The start time is zero in Pending state.");
 
     await animation1.ready;
     await animation2.ready;
@@ -140,30 +144,6 @@ promise_test(async t => {
 }, 'Animation start and current times are correct when multiple animations' +
     ' are attached to the same timeline.');
 
-promise_test(async t => {
-    const animation = createScrollLinkedAnimation(t);
-    const scroller = animation.timeline.scrollSource;
-    // Make the scroll timeline inactive.
-    scroller.style.overflow = "visible";
-    // Trigger layout;
-    scroller.scrollTop;
-    assert_equals(animation.timeline.currentTime, null,
-      "Timeline current time is null in inactive state.");
-    // Play the animation when the timeline is inactive.
-    animation.play();
-    // Make the scroll timeline active.
-    scroller.style.overflow = "auto";
-    await animation.ready;
-    // Ready promise is resolved as a result of the timeline becoming active.
-    assert_equals(animation.timeline.currentTime, 0,
-      "Timeline current time is resolved in active state.");
-    assert_equals(animation.currentTime, 0,
-      "Animation current time is resolved when the animation is ready.");
-    assert_equals(animation.startTime, 0,
-      "Animation start time is resolved when the animation is ready.");
-}, 'Animation start and current times are correct if scroll timeline is ' +
-   'activated after animation.play call.');
-
 promise_test(async t => {
     const animation = createScrollLinkedAnimation(t);
     const scroller = animation.timeline.scrollSource;

third_party/blink/web_tests/external/wpt/scroll-animations/setting-current-time.html

@@ -223,5 +223,71 @@
       " source has been scrolled."
     );
   }, 'Set Animation current time then scroll.');
+
+  promise_test(async t => {
+    const animation = createScrollLinkedAnimation(t);
+    const scroller = animation.timeline.scrollSource;
+
+    // Wait for new animation frame which allows the timeline to compute new
+    // current time.
+    await waitForNextFrame();
+    animation.play();
+    await animation.ready;
+
+    // Make the timeline inactive.
+    scroller.style.overflow = 'visible';
+    scroller.scrollTop;
+    await waitForNextFrame();
+
+    assert_equals(animation.currentTime, null,
+      'Current time is unresolved when the timeline is inactive.');
+
+    animation.currentTime = 300;
+    assert_equals(animation.currentTime, 300,
+      'Animation current time should be equal to the set value.');
+    assert_equals(animation.playState, 'paused',
+      'Animation play state is \'paused\' when current time is set and ' +
+      'timeline is inactive.');
+}, 'Animation current time and play state are correct when current time is ' +
+   'set while the timeline is inactive.');
+
+promise_test(async t => {
+    const animation = createScrollLinkedAnimation(t);
+    const scroller = animation.timeline.scrollSource;
+
+    // Wait for new animation frame which allows the timeline to compute new
+    // current time.
+    await waitForNextFrame();
+    animation.play();
+    await animation.ready;
+
+    // Make the timeline inactive.
+    scroller.style.overflow = 'visible';
+    scroller.scrollTop;
+    await waitForNextFrame();
+
+    assert_equals(animation.timeline.currentTime, null,
+      'Current time is unresolved when the timeline is inactive.');
+
+    animation.currentTime = 300;
+    assert_equals(animation.currentTime, 300,
+      'Animation current time should be equal to the set value.');
+    assert_equals(animation.playState, 'paused',
+      'Animation play state is \'paused\' when current time is set and ' +
+      'timeline is inactive.');
+
+    // Make the timeline active.
+    scroller.style.overflow = 'auto';
+    scroller.scrollTop;
+    await waitForNextFrame();
+
+    assert_equals(animation.timeline.currentTime, 0,
+      'Current time is resolved when the timeline is active.');
+    assert_equals(animation.currentTime, 300,
+      'Animation current time holds the set value.');
+    assert_equals(animation.playState, 'paused',
+      'Animation holds \'paused\' state.');
+}, 'Animation current time set while the timeline is inactive holds when the ' +
+   'timeline becomes active again.');
 </script>
 </body>

third_party/blink/web_tests/external/wpt/scroll-animations/testcommon.js

@@ -27,7 +27,7 @@ function createScrollLinkedAnimation(test, timeline) {
   if (timeline === undefined)
     timeline = createScrollTimeline(test);
   const DURATION = 1000; // ms
-  const KEYFRAMES = { opacity: [1, 0] };
+  const KEYFRAMES = { opacity: [0, 1] };
   return new Animation(
     new KeyframeEffect(createDiv(test), KEYFRAMES, DURATION), timeline);
 }

third_party/blink/web_tests/external/wpt/web-animations/interfaces/Animation/pending.html

@@ -31,5 +31,25 @@ promise_test(t => {
   });
 }, 'reports true -> false when paused');
 
+promise_test(async t => {
+  const animation =
+    new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
+                  null);
+  animation.play();
+  assert_true(animation.pending);
+  await waitForAnimationFrames(2);
+  assert_true(animation.pending);
+}, 'reports true -> true when played without a timeline');
+
+promise_test(async t => {
+  const animation =
+    new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
+                  null);
+  animation.pause();
+  assert_true(animation.pending);
+  await waitForAnimationFrames(2);
+  assert_true(animation.pending);
+}, 'reports true -> true when paused without a timeline');
+
 </script>
 </body>

third_party/blink/web_tests/external/wpt/web-animations/timing-model/animations/setting-the-timeline-of-an-animation.html

@@ -60,7 +60,7 @@ test(t => {
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
   animation.startTime = document.timeline.currentTime;
-  assert_equals(animation.playState, 'idle');
+  assert_equals(animation.playState, 'running');
 
   animation.timeline = document.timeline;
 
@@ -73,7 +73,7 @@ test(t => {
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);
   animation.startTime = document.timeline.currentTime - 200 * MS_PER_SEC;
-  assert_equals(animation.playState, 'idle');
+  assert_equals(animation.playState, 'running');
 
   animation.timeline = document.timeline;