From ab6f21a7b70ad680d5a3583e6ef43bb1c6d851f3 Mon Sep 17 00:00:00 2001 From: Johannes Odland Date: Thu, 8 Feb 2024 22:36:06 +0100 Subject: [PATCH 1/2] Realign start time if finite timeline and auto-rewind is true --- src/proxy-animation.js | 5 ++++- test/expected.txt | 4 ++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/proxy-animation.js b/src/proxy-animation.js index 0c13bc3..417d9e5 100644 --- a/src/proxy-animation.js +++ b/src/proxy-animation.js @@ -572,10 +572,13 @@ function playInternal(details, autoRewind) { } // Not by spec, but required by tests in play-animation.html: + // – Playing a running animation resets a sticky start time // - Playing a finished animation restarts the animation aligned at the start // - Playing a pause-pending but previously finished animation realigns with the scroll position // - Playing a finished animation clears the start time - if (details.proxy.playState === 'finished' || abortedPause) { + // - Resuming an animation from paused realigns with scroll position. + // These tests suggest that the start time should always be auto aligned when auto-rewind and finite timeline is true + if (autoRewind) { details.holdTime = null details.startTime = null details.autoAlignStartTime = true; diff --git a/test/expected.txt b/test/expected.txt index 2382c52..84d7f50 100644 --- a/test/expected.txt +++ b/test/expected.txt @@ -829,14 +829,14 @@ FAIL /scroll-animations/scroll-timelines/play-animation.html Playing an animatio PASS /scroll-animations/scroll-timelines/play-animation.html Playing an animations with a negative playback rate aligns the start time with the end of the active range PASS /scroll-animations/scroll-timelines/play-animation.html Start time set while play pending is preserved. PASS /scroll-animations/scroll-timelines/play-animation.html Current time set while play pending is preserved. -FAIL /scroll-animations/scroll-timelines/play-animation.html Playing a running animation resets a sticky start time +PASS /scroll-animations/scroll-timelines/play-animation.html Playing a running animation resets a sticky start time PASS /scroll-animations/scroll-timelines/play-animation.html Playing a finished animation restarts the animation aligned at the start PASS /scroll-animations/scroll-timelines/play-animation.html Playing a finished and reversed animation restarts the animation aligned at the end PASS /scroll-animations/scroll-timelines/play-animation.html Playing a pause-pending but previously finished animation realigns with the scroll position PASS /scroll-animations/scroll-timelines/play-animation.html Playing a finished animation clears the start time PASS /scroll-animations/scroll-timelines/play-animation.html The ready promise should be replaced if the animation is not already pending PASS /scroll-animations/scroll-timelines/play-animation.html A pending ready promise should be resolved and not replaced when the animation enters the running state -FAIL /scroll-animations/scroll-timelines/play-animation.html Resuming an animation from paused realigns with scroll position. +PASS /scroll-animations/scroll-timelines/play-animation.html Resuming an animation from paused realigns with scroll position. PASS /scroll-animations/scroll-timelines/play-animation.html If a pause operation is interrupted, the ready promise is reused FAIL /scroll-animations/scroll-timelines/play-animation.html A pending playback rate is used when determining timeline range alignment PASS /scroll-animations/scroll-timelines/play-animation.html Playing a canceled animation sets the start time From 2ce10d118f380805de64278e2887842e5eb47f07 Mon Sep 17 00:00:00 2001 From: Johannes Odland Date: Sat, 10 Feb 2024 17:20:54 +0100 Subject: [PATCH 2/2] Commit the pending playback rate when auto aligning the start time --- src/proxy-animation.js | 4 +++- test/expected.txt | 4 ++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/proxy-animation.js b/src/proxy-animation.js index 417d9e5..c7bcc9f 100644 --- a/src/proxy-animation.js +++ b/src/proxy-animation.js @@ -921,7 +921,9 @@ function autoAlignStartTime(details) { // TODO: Clarify how range duration should be resolved details.rangeDuration = endOffset.value - startOffset.value; // 7. Set start time to start offset if effective playback rate ≥ 0, and end offset otherwise. - const playbackRate = effectivePlaybackRate(details); + // Not by spec: Applying the pending playback rate. If not, the start time will be re-aligned in `commitPendingPlay()` + applyPendingPlaybackRate(details); + const playbackRate = details.animation.playbackRate; details.startTime = fromCssNumberish(details,playbackRate >= 0 ? startOffset : endOffset); // 8. Clear hold time. diff --git a/test/expected.txt b/test/expected.txt index 84d7f50..cf676bc 100644 --- a/test/expected.txt +++ b/test/expected.txt @@ -838,12 +838,12 @@ PASS /scroll-animations/scroll-timelines/play-animation.html The ready promise s PASS /scroll-animations/scroll-timelines/play-animation.html A pending ready promise should be resolved and not replaced when the animation enters the running state PASS /scroll-animations/scroll-timelines/play-animation.html Resuming an animation from paused realigns with scroll position. PASS /scroll-animations/scroll-timelines/play-animation.html If a pause operation is interrupted, the ready promise is reused -FAIL /scroll-animations/scroll-timelines/play-animation.html A pending playback rate is used when determining timeline range alignment +PASS /scroll-animations/scroll-timelines/play-animation.html A pending playback rate is used when determining timeline range alignment PASS /scroll-animations/scroll-timelines/play-animation.html Playing a canceled animation sets the start time PASS /scroll-animations/scroll-timelines/play-animation.html Playing a canceled animation backwards sets the start time PASS /scroll-animations/scroll-timelines/reverse-animation.html Setting current time while reverse-pending preserves currentTime PASS /scroll-animations/scroll-timelines/reverse-animation.html Reversing an animation inverts the playback rate -FAIL /scroll-animations/scroll-timelines/reverse-animation.html Reversing an animation resets a sticky start time. +PASS /scroll-animations/scroll-timelines/reverse-animation.html Reversing an animation resets a sticky start time. PASS /scroll-animations/scroll-timelines/reverse-animation.html Reversing an animation does not cause it to leave the pending state PASS /scroll-animations/scroll-timelines/reverse-animation.html Reversing an animation does not cause it to resolve the ready promise PASS /scroll-animations/scroll-timelines/reverse-animation.html Reversing an animation with a negative playback rate should cause the animation to play in a forward direction