From b47c91b48ac2c09de9a9676e78025bf214ec2f2d Mon Sep 17 00:00:00 2001 From: Olga Gerchikov Date: Tue, 28 Apr 2020 11:41:34 +0000 Subject: [PATCH] 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 Reviewed-by: Majid Valipour Reviewed-by: Kevin Ellis Cr-Commit-Position: refs/heads/master@{#761974} -- wpt-commits: 46978682c5d3e2ff08468be05564307a9a75e06b wpt-pr: 23145 --- .../element-based-offset.html | 11 +- .../scroll-animation-inactive-timeline.html | 144 ++++++++++++++++++ .../scroll-animations/scroll-animation.html | 52 ++----- .../setting-current-time.html | 66 ++++++++ .../tests/scroll-animations/testcommon.js | 2 +- .../interfaces/Animation/pending.html | 20 +++ .../setting-the-timeline-of-an-animation.html | 4 +- 7 files changed, 257 insertions(+), 42 deletions(-) create mode 100644 testing/web-platform/tests/scroll-animations/scroll-animation-inactive-timeline.html diff --git a/testing/web-platform/tests/scroll-animations/element-based-offset.html b/testing/web-platform/tests/scroll-animations/element-based-offset.html index 1c7d99822855e..064ab4c5f3ae4 100644 --- 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. diff --git a/testing/web-platform/tests/scroll-animations/scroll-animation-inactive-timeline.html b/testing/web-platform/tests/scroll-animations/scroll-animation-inactive-timeline.html new file mode 100644 index 0000000000000..07dae95692eb5 --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/scroll-animation-inactive-timeline.html @@ -0,0 +1,144 @@ + + +Test basic functionality of scroll linked animation. + + + + + +
+ \ No newline at end of file diff --git a/testing/web-platform/tests/scroll-animations/scroll-animation.html b/testing/web-platform/tests/scroll-animations/scroll-animation.html index 901549e7a4454..cb270d52f7c40 100644 --- 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 @@ 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 @@ // 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 @@ 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 @@ 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 @@ }, '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; diff --git a/testing/web-platform/tests/scroll-animations/setting-current-time.html b/testing/web-platform/tests/scroll-animations/setting-current-time.html index 0b7dcc60034d1..d46206d825770 100644 --- 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.'); diff --git a/testing/web-platform/tests/scroll-animations/testcommon.js b/testing/web-platform/tests/scroll-animations/testcommon.js index 2a89d8e022f2e..733b5f9f643ee 100644 --- 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); } diff --git a/testing/web-platform/tests/web-animations/interfaces/Animation/pending.html b/testing/web-platform/tests/web-animations/interfaces/Animation/pending.html index fe7efe05aafa9..c200f9e97739e 100644 --- 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 @@ }); }, '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'); + diff --git 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 index dd8617503951a..7e98ef4260f77 100644 --- 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 @@ 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 @@ 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;