Bug 1631850 [wpt PR 23145] - Initialize start time of scroll animations to zero., a=testonly

Automatic update from web-platform-tests 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} -- wpt-commits: 46978682c5d3e2ff08468be05564307a9a75e06b wpt-pr: 23145
2020-04-28 11:41:34 +00:00 · 2020-04-28 11:41:34 +00:00 · 00cc16b293
--- a/testing/web-platform/tests/scroll-animations/element-based-offset.html
+++ b/testing/web-platform/tests/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.
--- a/testing/web-platform/tests/scroll-animations/scroll-animation-inactive-timeline.html
+++ b/testing/web-platform/tests/scroll-animations/scroll-animation-inactive-timeline.html
@ -0,0 +1,144 @@
+<!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>
--- a/testing/web-platform/tests/scroll-animations/scroll-animation.html
+++ b/testing/web-platform/tests/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;
--- a/testing/web-platform/tests/scroll-animations/setting-current-time.html
+++ b/testing/web-platform/tests/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>
--- a/testing/web-platform/tests/scroll-animations/testcommon.js
+++ b/testing/web-platform/tests/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);
 }
--- a/testing/web-platform/tests/web-animations/interfaces/Animation/pending.html
+++ b/testing/web-platform/tests/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>
--- a/testing/web-platform/tests/web-animations/timing-model/animations/setting-the-timeline-of-an-animation.html
+++ b/testing/web-platform/tests/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;