mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-09 21:00:42 +02:00
85821d52f1
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
293 lines
10 KiB
HTML
293 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>Setting the current time of an animation</title>
|
|
<link rel="help" href="https://drafts.csswg.org/web-animations-1/#setting-the-current-time-of-an-animation">
|
|
<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: 200px;
|
|
width: 100px;
|
|
}
|
|
.contents {
|
|
height: 1000px;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div id="log"></div>
|
|
<script>
|
|
'use strict';
|
|
promise_test(async t => {
|
|
const animation = createScrollLinkedAnimation(t);
|
|
const scroller = animation.timeline.scrollSource;
|
|
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
|
scroller.scrollTop = 0.25 * maxScroll;
|
|
// Wait for new animation frame which allows the timeline to compute new
|
|
// current time.
|
|
await waitForNextFrame();
|
|
animation.play();
|
|
|
|
await animation.ready;
|
|
|
|
assert_throws_js(TypeError, () => {
|
|
animation.currentTime = null;
|
|
});
|
|
}, 'Setting animation current time to null throws TypeError.');
|
|
|
|
promise_test(async t => {
|
|
const animation = createScrollLinkedAnimation(t);
|
|
const scroller = animation.timeline.scrollSource;
|
|
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
|
scroller.scrollTop = 0.25 * maxScroll;
|
|
// Wait for new animation frame which allows the timeline to compute new
|
|
// current time.
|
|
await waitForNextFrame();
|
|
|
|
animation.currentTime = 333;
|
|
|
|
assert_times_equal(
|
|
animation.currentTime,
|
|
333,
|
|
"Animation current time should be equal to the set value."
|
|
);
|
|
}, 'Set animation current time to a valid value without playing.');
|
|
|
|
promise_test(async t => {
|
|
const animation = createScrollLinkedAnimation(t);
|
|
const scroller = animation.timeline.scrollSource;
|
|
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
|
scroller.scrollTop = 0.25 * maxScroll;
|
|
// Wait for new animation frame which allows the timeline to compute new
|
|
// current time.
|
|
await waitForNextFrame();
|
|
animation.play();
|
|
|
|
await animation.ready;
|
|
animation.currentTime = 333;
|
|
|
|
assert_times_equal(
|
|
animation.currentTime,
|
|
333,
|
|
"Animation current time should be equal to the set value."
|
|
);
|
|
}, 'Set animation current time to a valid value while playing.');
|
|
|
|
promise_test(async t => {
|
|
const animation = createScrollLinkedAnimation(t);
|
|
const scroller = animation.timeline.scrollSource;
|
|
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
|
const range = animation.timeline.timeRange;
|
|
scroller.scrollTop = 0.25 * maxScroll;
|
|
// Wait for new animation frame which allows the timeline to compute new
|
|
// current time.
|
|
await waitForNextFrame();
|
|
animation.play();
|
|
|
|
await animation.ready;
|
|
const largerThanDuration = animation.effect.getTiming().duration * 2;
|
|
animation.currentTime = largerThanDuration;
|
|
|
|
assert_greater_than_equal(largerThanDuration, range, "Make sure that the" +
|
|
" test value is after the end of the effect and the timeline");
|
|
assert_equals(animation.playState, "finished");
|
|
assert_times_equal(
|
|
animation.currentTime,
|
|
largerThanDuration,
|
|
"Animation current time should be equal to the set value."
|
|
);
|
|
}, 'Set animation current time to a value beyond effect end.');
|
|
|
|
promise_test(async t => {
|
|
const animation = createScrollLinkedAnimation(t);
|
|
const scroller = animation.timeline.scrollSource;
|
|
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
|
const range = animation.timeline.timeRange;
|
|
scroller.scrollTop = 0.25 * maxScroll;
|
|
// Wait for new animation frame which allows the timeline to compute new
|
|
// current time.
|
|
await waitForNextFrame();
|
|
animation.play();
|
|
|
|
await animation.ready;
|
|
animation.currentTime = -100;
|
|
|
|
assert_equals(animation.playState, "running");
|
|
assert_times_equal(
|
|
animation.currentTime,
|
|
-100,
|
|
"Animation current time should be equal to the set value."
|
|
);
|
|
}, 'Set animation current time to a negative value.');
|
|
|
|
promise_test(async t => {
|
|
const animation = createScrollLinkedAnimation(t);
|
|
const scroller = animation.timeline.scrollSource;
|
|
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
|
scroller.scrollTop = 0.25 * maxScroll;
|
|
// Wait for new animation frame which allows the timeline to compute new
|
|
// current time.
|
|
await waitForNextFrame();
|
|
animation.play();
|
|
|
|
animation.currentTime = 300;
|
|
|
|
assert_equals(animation.playState, "running");
|
|
assert_true(animation.pending);
|
|
assert_time_equals_literal(animation.currentTime, 300);
|
|
}, "Setting current time while play pending overrides the current time");
|
|
|
|
promise_test(async t => {
|
|
const animation = createScrollLinkedAnimation(t);
|
|
const scroller = animation.timeline.scrollSource;
|
|
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
|
scroller.scrollTop = 0.25 * maxScroll;
|
|
// Wait for new animation frame which allows the timeline to compute new
|
|
// current time.
|
|
await waitForNextFrame();
|
|
animation.play();
|
|
|
|
await animation.ready;
|
|
animation.currentTime = 333;
|
|
|
|
assert_times_equal(
|
|
animation.currentTime,
|
|
333,
|
|
"Animation current time should be equal to the set value."
|
|
);
|
|
|
|
// Cancel the animation and play it again, check that current time has reset
|
|
// to scroll offset based current time.
|
|
animation.cancel();
|
|
animation.play();
|
|
await animation.ready;
|
|
|
|
assert_times_equal(
|
|
animation.currentTime,
|
|
animation.timeline.currentTime,
|
|
"Animation current time should return to a value matching its" +
|
|
" timeline current time after animation is cancelled and played again."
|
|
);
|
|
}, 'Setting animation.currentTime then restarting the animation should' +
|
|
' reset the current time.');
|
|
|
|
promise_test(async t => {
|
|
const animation = createScrollLinkedAnimation(t);
|
|
const scroller = animation.timeline.scrollSource;
|
|
const maxScroll = scroller.scrollHeight - scroller.clientHeight;
|
|
scroller.scrollTop = 0.25 * maxScroll;
|
|
// Wait for new animation frame which allows the timeline to compute new
|
|
// current time.
|
|
await waitForNextFrame();
|
|
animation.play();
|
|
|
|
await animation.ready;
|
|
const originalCurrentTime = animation.currentTime;
|
|
|
|
// Set the current time to something other than where the scroll offset.
|
|
animation.currentTime = 500;
|
|
|
|
// Setting current time is internally setting the start time to
|
|
// scrollTimeline.currentTime - newAnimationCurrentTime.
|
|
// Which results in current time of (timeline.currentTime - start_time).
|
|
// This behavior puts the animation in a strange "out of sync" state between
|
|
// the scroller and the animation effect, this is currently expected
|
|
// behavior.
|
|
|
|
const expectedStartTime = originalCurrentTime - animation.currentTime;
|
|
assert_times_equal(
|
|
animation.startTime,
|
|
expectedStartTime,
|
|
"Animation current time should be updated when setting the current time" +
|
|
" to a time within the range of the animation.");
|
|
|
|
scroller.scrollTop = 0.7 * maxScroll;
|
|
// Wait for new animation frame which allows the timeline to compute new
|
|
// current time.
|
|
await waitForNextFrame();
|
|
|
|
assert_times_equal(
|
|
animation.startTime,
|
|
expectedStartTime,
|
|
"Animation start time should remain unchanged when the scroller changes" +
|
|
" position."
|
|
);
|
|
assert_times_equal(
|
|
animation.currentTime,
|
|
animation.timeline.currentTime - animation.startTime,
|
|
"Animation current time should return to a value equal to" +
|
|
" (timeline.currentTime - animation.startTime) after timeline scroll" +
|
|
" 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>
|