| <!DOCTYPE html> |
| <meta charset=utf-8> |
| <title>Setting the timeline of scroll animation</title> |
| <link rel="help" |
| href="https://drafts.csswg.org/web-animations-1/#setting-the-timeline"> |
| <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-x: hidden; |
| overflow-y: auto; |
| height: 200px; |
| width: 100px; |
| will-change: transform; |
| } |
| .contents { |
| /* The height is set to align scrolling in pixels with logical time in ms */ |
| height: 1200px; |
| width: 100%; |
| } |
| @keyframes anim { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| .anim { |
| animation: anim 1s paused linear; |
| } |
| #target { |
| height: 100px; |
| width: 100px; |
| background-color: green; |
| margin-top: -1000px; |
| } |
| </style> |
| <body> |
| <script> |
| 'use strict'; |
| |
| function createAnimation(t) { |
| const elem = createDiv(t); |
| const animation = elem.animate({ opacity: [1, 0] }, 1000); |
| return animation; |
| } |
| |
| function createPausedCssAnimation(t) { |
| const elem = createDiv(t); |
| elem.classList.add('anim'); |
| return elem.getAnimations()[0]; |
| } |
| |
| function updateScrollPosition(timeline, offset) { |
| const scroller = timeline.source; |
| assert_true(!!scroller, 'source is resolved'); |
| scroller.scrollTop = offset; |
| // Wait for new animation frame which allows the timeline to compute new |
| // current time. |
| return waitForNextFrame(); |
| } |
| |
| function assert_timeline_current_time(animation, timeline_current_time) { |
| if (animation.currentTime instanceof CSSUnitValue){ |
| assert_percents_equal(animation.timeline.currentTime, timeline_current_time, |
| `Timeline's currentTime aligns with the scroll ` + |
| `position even when paused`); |
| } |
| else { |
| assert_times_equal(animation.timeline.currentTime, timeline_current_time, |
| `Timeline's currentTime aligns with the scroll ` + |
| `position even when paused`); |
| } |
| } |
| |
| function assert_scroll_synced_times(animation, timeline_current_time, |
| animation_current_time) { |
| assert_timeline_current_time(animation, timeline_current_time); |
| if (animation.currentTime instanceof CSSUnitValue){ |
| assert_percents_equal(animation.currentTime, animation_current_time, |
| `Animation's currentTime aligns with the scroll position`); |
| } |
| else { |
| assert_times_equal(animation.currentTime, animation_current_time, |
| `Animation's currentTime aligns with the scroll position`); |
| } |
| } |
| |
| function assert_paused_times(animation, timeline_current_time, |
| animation_current_time) { |
| assert_timeline_current_time(animation, timeline_current_time); |
| if (animation.currentTime instanceof CSSUnitValue){ |
| assert_percents_equal(animation.currentTime, animation_current_time, |
| `Animation's currentTime is fixed while paused`); |
| } |
| else { |
| assert_times_equal(animation.currentTime, animation_current_time, |
| `Animation's currentTime is fixed while paused`); |
| } |
| } |
| |
| promise_test(async t => { |
| const scrollTimeline = createScrollTimeline(t); |
| await updateScrollPosition(scrollTimeline, 100); |
| |
| const animation = createAnimation(t); |
| animation.timeline = scrollTimeline; |
| assert_true(animation.pending); |
| await animation.ready; |
| |
| assert_equals(animation.playState, 'running'); |
| assert_scroll_synced_times(animation, 10, 10); |
| }, 'Setting a scroll timeline on a play-pending animation synchronizes ' + |
| 'currentTime of the animation with the scroll position.'); |
| |
| promise_test(async t => { |
| const scrollTimeline = createScrollTimeline(t); |
| await updateScrollPosition(scrollTimeline, 100); |
| |
| const animation = createAnimation(t); |
| animation.pause(); |
| animation.timeline = scrollTimeline; |
| assert_true(animation.pending); |
| await animation.ready; |
| |
| assert_equals(animation.playState, 'paused'); |
| assert_paused_times(animation, 10, 0); |
| |
| await updateScrollPosition(animation.timeline, 200); |
| |
| assert_equals(animation.playState, 'paused'); |
| assert_paused_times(animation, 20, 0); |
| |
| animation.play(); |
| await animation.ready; |
| |
| assert_scroll_synced_times(animation, 20, 20); |
| }, 'Setting a scroll timeline on a pause-pending animation fixes the ' + |
| 'currentTime of the animation based on the scroll position once resumed'); |
| |
| promise_test(async t => { |
| const scrollTimeline = createScrollTimeline(t); |
| await updateScrollPosition(scrollTimeline, 100); |
| |
| const animation = createAnimation(t); |
| animation.reverse(); |
| animation.timeline = scrollTimeline; |
| await animation.ready; |
| |
| assert_equals(animation.playState, 'running'); |
| assert_scroll_synced_times(animation, 10, 90); |
| }, 'Setting a scroll timeline on a reversed play-pending animation ' + |
| 'synchronizes the currentTime of the animation with the scroll ' + |
| 'position.'); |
| |
| promise_test(async t => { |
| const scrollTimeline = createScrollTimeline(t); |
| await updateScrollPosition(scrollTimeline, 100); |
| |
| const animation = createAnimation(t); |
| await animation.ready; |
| |
| animation.timeline = scrollTimeline; |
| assert_true(animation.pending); |
| assert_equals(animation.playState, 'running'); |
| await animation.ready; |
| assert_scroll_synced_times(animation, 10, 10); |
| }, 'Setting a scroll timeline on a running animation synchronizes the ' + |
| 'currentTime of the animation with the scroll position.'); |
| |
| promise_test(async t => { |
| const scrollTimeline = createScrollTimeline(t); |
| await updateScrollPosition(scrollTimeline, 100); |
| |
| const animation = createAnimation(t); |
| animation.pause(); |
| await animation.ready; |
| |
| animation.timeline = scrollTimeline; |
| assert_false(animation.pending); |
| assert_equals(animation.playState, 'paused'); |
| assert_paused_times(animation, 10, 0); |
| |
| animation.play(); |
| await animation.ready; |
| |
| assert_scroll_synced_times(animation, 10, 10); |
| }, 'Setting a scroll timeline on a paused animation fixes the currentTime of ' + |
| 'the animation based on the scroll position when resumed'); |
| |
| promise_test(async t => { |
| const scrollTimeline = createScrollTimeline(t); |
| await updateScrollPosition(scrollTimeline, 100); |
| |
| const animation = createAnimation(t); |
| animation.reverse(); |
| animation.pause(); |
| await animation.ready; |
| |
| animation.timeline = scrollTimeline; |
| assert_false(animation.pending); |
| assert_equals(animation.playState, 'paused'); |
| assert_paused_times(animation, 10, 100); |
| |
| animation.play(); |
| await animation.ready; |
| |
| assert_scroll_synced_times(animation, 10, 90); |
| }, 'Setting a scroll timeline on a reversed paused animation ' + |
| 'fixes the currentTime of the animation based on the scroll ' + |
| 'position when resumed'); |
| |
| promise_test(async t => { |
| const animation = createAnimation(t); |
| const scrollTimeline = createScrollTimeline(t); |
| animation.timeline = scrollTimeline; |
| await animation.ready; |
| await updateScrollPosition(scrollTimeline, 100); |
| |
| animation.timeline = document.timeline; |
| assert_times_equal(animation.currentTime, 100); |
| }, 'Transitioning from a scroll timeline to a document timeline on a running ' + |
| 'animation preserves currentTime'); |
| |
| promise_test(async t => { |
| const animation = createAnimation(t); |
| const scrollTimeline = createScrollTimeline(t); |
| animation.timeline = scrollTimeline; |
| await animation.ready; |
| await updateScrollPosition(scrollTimeline, 100); |
| |
| animation.pause(); |
| animation.timeline = document.timeline; |
| |
| await animation.ready; |
| assert_times_equal(animation.currentTime, 100); |
| }, 'Transitioning from a scroll timeline to a document timeline on a ' + |
| 'pause-pending animation preserves currentTime'); |
| |
| promise_test(async t => { |
| const animation = createAnimation(t); |
| const scrollTimeline = createScrollTimeline(t); |
| animation.timeline = scrollTimeline; |
| |
| animation.reverse(); |
| await animation.ready; |
| await updateScrollPosition(scrollTimeline, 100); |
| |
| animation.pause(); |
| await animation.ready; |
| |
| assert_scroll_synced_times(animation, 10, 90); |
| |
| animation.timeline = document.timeline; |
| assert_false(animation.pending); |
| assert_equals(animation.playState, 'paused'); |
| assert_times_equal(animation.currentTime, 900); |
| }, 'Transition from a scroll timeline to a document timeline on a reversed ' + |
| 'paused animation maintains correct currentTime'); |
| |
| promise_test(async t => { |
| const animation = createAnimation(t); |
| const scrollTimeline = createScrollTimeline(t); |
| animation.timeline = scrollTimeline; |
| await animation.ready; |
| await updateScrollPosition(scrollTimeline, 100); |
| |
| const progress = animation.currentTime.value / 100; |
| const duration = animation.effect.getTiming().duration; |
| animation.timeline = null; |
| |
| const expectedCurrentTime = progress * duration; |
| assert_times_equal(animation.currentTime, expectedCurrentTime); |
| }, 'Transitioning from a scroll timeline to a null timeline on a running ' + |
| 'animation preserves current progress.'); |
| |
| promise_test(async t => { |
| const keyframeEfect = new KeyframeEffect(createDiv(t), |
| { opacity: [0, 1] }, |
| 1000); |
| const animation = new Animation(keyframeEfect, null); |
| animation.startTime = 0; |
| assert_equals(animation.playState, 'running'); |
| |
| const scrollTimeline = createScrollTimeline(t); |
| await updateScrollPosition(scrollTimeline, 100); |
| |
| animation.timeline = scrollTimeline; |
| assert_equals(animation.playState, 'running'); |
| await animation.ready; |
| |
| assert_percents_equal(animation.currentTime, 10); |
| }, 'Switching from a null timeline to a scroll timeline on an animation with ' + |
| 'a resolved start time preserved the play state'); |
| |
| promise_test(async t => { |
| const firstScrollTimeline = createScrollTimeline(t); |
| await updateScrollPosition(firstScrollTimeline, 100); |
| |
| const secondScrollTimeline = createScrollTimeline(t); |
| await updateScrollPosition(secondScrollTimeline, 200); |
| |
| const animation = createAnimation(t); |
| animation.timeline = firstScrollTimeline; |
| await animation.ready; |
| assert_percents_equal(animation.currentTime, 10); |
| |
| animation.timeline = secondScrollTimeline; |
| await animation.ready; |
| |
| assert_percents_equal(animation.currentTime, 20); |
| }, 'Switching from one scroll timeline to another updates currentTime'); |
| |
| promise_test(async t => { |
| const scrollTimeline = createScrollTimeline(t); |
| await updateScrollPosition(scrollTimeline, 100); |
| |
| const animation = createPausedCssAnimation(t); |
| animation.timeline = scrollTimeline; |
| await animation.ready; |
| assert_equals(animation.playState, 'paused'); |
| assert_percents_equal(animation.currentTime, 0); |
| |
| const target = animation.effect.target; |
| target.style.animationPlayState = 'running'; |
| await animation.ready; |
| |
| assert_percents_equal(animation.currentTime, 10); |
| }, 'Switching from a document timeline to a scroll timeline updates ' + |
| 'currentTime when unpaused via CSS.'); |
| |
| promise_test(async t => { |
| const scrollTimeline = createScrollTimeline(t); |
| await updateScrollPosition(scrollTimeline, 100); |
| |
| const animation = createAnimation(t); |
| animation.pause(); |
| animation.currentTime = 500; // 50% |
| animation.timeline = scrollTimeline; |
| await animation.ready; |
| assert_percents_equal(animation.currentTime, 50); |
| |
| animation.play(); |
| await animation.ready; |
| assert_percents_equal(animation.currentTime, 10); |
| }, 'Switching from a document timeline to a scroll timeline and updating ' + |
| 'currentTime preserves the progress while paused.'); |
| |
| promise_test(async t => { |
| const elem = createDiv(t); |
| const animation = elem.animate(null, Infinity); |
| await animation.ready; |
| |
| animation.timeline = new ScrollTimeline(); |
| let timing = animation.effect.getComputedTiming(); |
| assert_percents_equal(timing.endTime, 100); |
| assert_percents_equal(timing.activeDuration, 100); |
| assert_percents_equal(timing.duration, 100); |
| |
| animation.effect.updateTiming({ iterations: 2 }); |
| timing = animation.effect.getComputedTiming(); |
| assert_percents_equal(timing.endTime, 100); |
| assert_percents_equal(timing.activeDuration, 100); |
| assert_percents_equal(timing.duration, 50); |
| |
| // Blink implementation does not permit setting an infinite number of |
| // iterations on a scroll-linked animation. Workaround by temporarily |
| // switching back to a document timeline. |
| animation.timeline = document.timeline; |
| animation.effect.updateTiming({ iterations: Infinity }); |
| animation.timeline = new ScrollTimeline(); |
| timing = animation.effect.getComputedTiming(); |
| // Having an infinite number of iterations with a finite timeline results in |
| // each iteration having zero duration. |
| assert_percents_equal(timing.duration, 0); |
| // If either the iteration duration or iteration count is zero, the active |
| // duration is always zero. |
| assert_percents_equal(timing.activeDuration, 0); |
| assert_percents_equal(timing.endTime, 0); |
| |
| }, 'Switching from a document timeline to a scroll timeline on an infinite ' + |
| 'duration animation.'); |
| |
| |
| promise_test(async t => { |
| const scrollTimeline = createScrollTimeline(t); |
| const view_timeline = createViewTimeline(t); |
| await updateScrollPosition(scrollTimeline, 100); |
| const animation = createAnimation(t); |
| animation.timeline = scrollTimeline; |
| // Range name is ignored while attached to a non-view scroll-timeline. |
| // Offsets are still applied to the scroll-timeline. |
| animation.rangeStart = { rangeName: 'contain', offset: CSS.percent(10) }; |
| animation.rangeEnd = { rangeName: 'contain', offset: CSS.percent(90) }; |
| await animation.ready; |
| |
| assert_scroll_synced_times(animation, 10, 0); |
| assert_percents_equal(animation.startTime, 10); |
| |
| animation.timeline = view_timeline; |
| assert_true(animation.pending); |
| await animation.ready; |
| |
| // Cover range is [0px, 300px] |
| // Contain range is [100px, 200px] |
| // start time = (contain 10% pos - cover start pos) / cover range * 100% |
| const expected_start_time = 110 / 300 * 100; |
| // timeline time = (scroll pos - cover start pos) / cover range * 100% |
| const expected_timeline_time = 100 / 300 * 100; |
| // current time = timeline time - start time. |
| const expected_current_time = expected_timeline_time - expected_start_time; |
| |
| assert_percents_equal(animation.startTime, expected_start_time); |
| assert_percents_equal(animation.timeline.currentTime, expected_timeline_time); |
| assert_percents_equal(animation.currentTime, expected_current_time); |
| }, 'Changing from a scroll-timeline to a view-timeline updates start time.'); |
| |
| </script> |
| </body> |
