chromium/src/third_party/blink/web_tests/external/wpt/scroll-animations/setting-current-time.html - manifest_repos/chromium_src - Git at Google

 <!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.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>
	<!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.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>