Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 11 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /scroll-animations/scroll-timelines/setting-current-time.html - WPT Dashboard Interop Dashboard
<!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;
will-change: transform;
}
.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.source;
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);
assert_throws_dom('NotSupportedError', () => {
animation.currentTime = CSSNumericValue.parse("300");
});
assert_throws_dom('NotSupportedError', () => {
animation.currentTime = CSSNumericValue.parse("300ms");
});
assert_throws_dom('NotSupportedError', () => {
animation.currentTime = CSSNumericValue.parse("0.3s");
});
}, 'Setting the current time to an absolute time value throws exception');
promise_test(async t => {
const animation = createScrollLinkedAnimation(t);
const scroller = animation.timeline.source;
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 = CSSNumericValue.parse("33.3%");
assert_percents_equal(animation.currentTime, 33.3,
"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.source;
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 = CSSNumericValue.parse("33.3%");
assert_percents_equal(animation.currentTime, 33.3,
"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.source;
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 = CSSNumericValue.parse("200%");
assert_equals(animation.playState, "finished");
assert_percents_equal(animation.currentTime, 200,
"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.source;
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 = CSSNumericValue.parse("-10%");
assert_equals(animation.playState, "running");
assert_percents_equal(animation.currentTime, -10,
"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.source;
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 = CSSNumericValue.parse("30%");
assert_equals(animation.playState, "running");
assert_true(animation.pending);
assert_percents_equal(animation.currentTime, 30);
}, "Setting current time while play pending overrides the current time");
promise_test(async t => {
const animation = createScrollLinkedAnimation(t);
const scroller = animation.timeline.source;
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 = CSSNumericValue.parse("33.3%");
assert_percents_equal(animation.currentTime, 33.3,
"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_percents_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.source;
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.value;
// Set the current time to something other than where the scroll offset.
animation.currentTime = CSSNumericValue.parse("50%");
// 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.value;
assert_percents_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_percents_equal(animation.startTime, expectedStartTime,
"Animation start time should remain unchanged when the scroller changes" +
" position."
);
assert_percents_equal(animation.currentTime,
animation.timeline.currentTime.value - animation.startTime.value,
"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.source;
// 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 = CSSNumericValue.parse("30%");
assert_percents_equal(animation.currentTime, 30,
'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.source;
// 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 = CSSNumericValue.parse("30%");
assert_percents_equal(animation.currentTime, 30,
'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_percents_equal(animation.timeline.currentTime, 0,
'Current time is resolved when the timeline is active.');
assert_percents_equal(animation.currentTime, 30,
'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>