From 843e77d4c6817a15fa85d98973651be15417578c Mon Sep 17 00:00:00 2001 From: Marco Castelluccio Date: Sun, 3 May 2020 16:21:20 +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 UltraBlame original commit: e563517d3d930c71fde7bffe58aa64a68dce2d15 --- .../element-based-offset.html | 47 +- .../scroll-animation-inactive-timeline.html | 1134 +++++++++++++++++ .../scroll-animations/scroll-animation.html | 292 +---- .../setting-current-time.html | 473 +++++++ .../tests/scroll-animations/testcommon.js | 2 +- .../interfaces/Animation/pending.html | 138 ++ .../setting-the-timeline-of-an-animation.html | 4 +- 7 files changed, 1834 insertions(+), 256 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 f1c1940db4cb9..f079d6be70bd1 100644 --- a/testing/web-platform/tests/scroll-animations/element-based-offset.html +++ b/testing/web-platform/tests/scroll-animations/element-based-offset.html @@ -486,6 +486,30 @@ } ) ; +/ +/ +Wait +for +new +animation +frame +which +allows +the +timeline +to +compute +new +/ +/ +current +time +. +await +waitForNextFrame +( +) +; const animation = @@ -571,6 +595,21 @@ ( ) ; +assert_true +( +animation +. +pending +" +Animation +is +in +pending +state +. +" +) +; / / Verify @@ -594,9 +633,7 @@ current time is -a -hold -time +zero in Pending state @@ -609,13 +646,13 @@ animation . startTime -null +0 " The start time is -null +zero in Pending 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..1d09d88e261df --- /dev/null +++ b/testing/web-platform/tests/scroll-animations/scroll-animation-inactive-timeline.html @@ -0,0 +1,1134 @@ +< +! +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 +> diff --git a/testing/web-platform/tests/scroll-animations/scroll-animation.html b/testing/web-platform/tests/scroll-animations/scroll-animation.html index e1673238fc8f7..80599c26963ef 100644 --- a/testing/web-platform/tests/scroll-animations/scroll-animation.html +++ b/testing/web-platform/tests/scroll-animations/scroll-animation.html @@ -184,14 +184,29 @@ . clientHeight ; -const -timeRange -= +/ +/ +Wait +for +new animation -. +frame +which +allows +the timeline +to +compute +new +/ +/ +current +time . -timeRange +await +waitForNextFrame +( +) ; / / @@ -249,6 +264,21 @@ ( ) ; +assert_true +( +animation +. +pending +" +Animation +is +in +pending +state +. +" +) +; / / Verify @@ -272,9 +302,7 @@ current time is -a -hold -time +zero in Pending state @@ -287,13 +315,13 @@ animation . startTime -null +0 " The start time is -null +zero in Pending state @@ -519,15 +547,6 @@ . clientHeight ; -const -timeRange -= -animation -. -timeline -. -timeRange -; / / Advance @@ -666,13 +685,13 @@ animation . startTime -null +0 " The start time is -null +zero in Pending state @@ -820,13 +839,6 @@ . clientHeight ; -const -timeRange -= -timeline -. -timeRange -; / / Advance @@ -1014,13 +1026,13 @@ animation1 . startTime -null +0 " The start time is -null +zero in Pending state @@ -1063,13 +1075,13 @@ animation2 . startTime -null +0 " The start time is -null +zero in Pending state @@ -1232,222 +1244,6 @@ . 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 -; const maxScroll = 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 040241672e578..4ecd4c796f364 100644 --- a/testing/web-platform/tests/scroll-animations/setting-current-time.html +++ b/testing/web-platform/tests/scroll-animations/setting-current-time.html @@ -1536,6 +1536,479 @@ ' ) ; +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 diff --git a/testing/web-platform/tests/scroll-animations/testcommon.js b/testing/web-platform/tests/scroll-animations/testcommon.js index 1427217f66689..55deab77b6998 100644 --- a/testing/web-platform/tests/scroll-animations/testcommon.js +++ b/testing/web-platform/tests/scroll-animations/testcommon.js @@ -148,8 +148,8 @@ KEYFRAMES opacity : [ -1 0 +1 ] } ; 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 2ffcb46ecd13a..5506e3132d072 100644 --- a/testing/web-platform/tests/web-animations/interfaces/Animation/pending.html +++ b/testing/web-platform/tests/web-animations/interfaces/Animation/pending.html @@ -275,6 +275,144 @@ ' ) ; +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 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 ebea0c9490e6d..a9691e0a66eca 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 @@ -590,7 +590,7 @@ . playState ' -idle +running ' ) ; @@ -681,7 +681,7 @@ . playState ' -idle +running ' ) ;