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

 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>Setting the playback rate of an animation that is using a ScrollTimeline</title>
 <link rel="help" href="https://drafts.csswg.org/web-animations/#setting-the-playback-rate-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: 100px;
   width: 100px;
   will-change: transform;
 }
 .contents {
   height: 1000px;
   width: 100%;
 }
 </style>
 <body>
 <script>
 'use strict';
   promise_test(async t => {
     const animation = createScrollLinkedAnimation(t);
     const scroller = animation.timeline.scrollSource;
     // this forces a layout which results in an active timeline
     scroller.scrollTop = 0;
     // Wait for new animation frame  which allows the timeline to compute new
     // current time.
     await waitForNextFrame();

     animation.playbackRate = 0.5;
     animation.play();

     assert_equals(animation.currentTime, 0,
       'Zero current time is not affected by playbackRate change.');
   }, 'Zero current time is not affected by playbackRate set while the ' +
        'animation is in idle state.');

   promise_test(async t => {
     const animation = createScrollLinkedAnimation(t);
     const scroller = animation.timeline.scrollSource;
     // this forces a layout which results in an active timeline
     scroller.scrollTop = 0;
     // Wait for new animation frame  which allows the timeline to compute new
     // current time.
     await waitForNextFrame();

     animation.play();
     animation.playbackRate = 0.5;

     assert_equals(animation.currentTime, 0,
       'Zero current time is not affected by playbackRate change.');
   }, 'Zero current time is not affected by playbackRate set while the ' +
       'animation is in play-pending state.');

   promise_test(async t => {
     const animation = createScrollLinkedAnimation(t);
     const scroller = animation.timeline.scrollSource;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;
     const timeRange = animation.timeline.timeRange;
     scroller.scrollTop = 0.2 * maxScroll;
     // Wait for new animation frame  which allows the timeline to compute new
     // current time.
     await waitForNextFrame();

     animation.playbackRate = 0.5;
     animation.play();
     await animation.ready;
     assert_equals(animation.currentTime, 0.2 * timeRange * 0.5,
       'Initial current time is scaled by playbackRate change.');
   }, 'Initial current time is scaled by playbackRate set while ' +
       'scroll-linked animation is in running state.');

   promise_test(async t => {
     const animation = createScrollLinkedAnimation(t);
     const scroller = animation.timeline.scrollSource;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;
     const timeRange = animation.timeline.timeRange;
     const playbackRate = 2;

     scroller.scrollTop = 0.2 * maxScroll;
     // Wait for new animation frame  which allows the timeline to compute new
     // current time.
     await waitForNextFrame();

     animation.play();
     await animation.ready;
     // Set playback rate while the animation is playing.
     animation.playbackRate = playbackRate;
     assert_times_equal(animation.currentTime, 0.2 * timeRange,
       'The current time should stay unaffected by setting playback rate.');
   }, 'The current time is not affected by playbackRate set while the ' +
       'scroll-linked animation is in play state.');

   promise_test(async t => {
     const animation = createScrollLinkedAnimation(t);
     const scroller = animation.timeline.scrollSource;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;
     const timeRange = animation.timeline.timeRange;

     // Set playback rate while the animation is in 'idle' state.
     animation.playbackRate = 2;
     animation.play();
     await animation.ready;
     scroller.scrollTop = 0.2 * maxScroll;
     // Wait for new animation frame  which allows the timeline to compute new
     // current time.
     await waitForNextFrame();

     assert_times_equal(animation.currentTime, 0.2 * timeRange * 2,
       'The current time should increase two times faster than timeline time.');
   }, 'The playback rate set before scroll-linked animation started playing ' +
       'affects the rate of progress of the current time');

   promise_test(async t => {
     const animation = createScrollLinkedAnimation(t);
     const scroller = animation.timeline.scrollSource;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;
     animation.play();

     await animation.ready;

     animation.playbackRate = 2;
     scroller.scrollTop = 0.25 * maxScroll;
     // Wait for new animation frame  which allows the timeline to compute new
     // current time.
     await waitForNextFrame();

     assert_times_equal(
       animation.currentTime,
       animation.timeline.currentTime * animation.playbackRate,
       'The current time should increase two times faster than timeline time'
     );
   }, 'The playback rate affects the rate of progress of the current time' +
     ' when scrolling');

     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.playbackRate = 2;

     assert_equals(animation.playState, "running");
     assert_true(animation.pending);
     assert_times_equal(animation.currentTime, animation.timeline.currentTime);
   }, 'Setting the playback rate while play-pending preserves the current time' +
     ' from scrollTimeline.');

   test(t => {
     const animation = createScrollLinkedAnimation(t);
     animation.play();
     animation.currentTime = 250;
     animation.playbackRate = 2;

     assert_equals(animation.playState, "running");
     assert_true(animation.pending);
     assert_times_equal(animation.currentTime, 250);
   }, 'Setting the playback rate while play-pending preserves the set 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.playbackRate = 2;

     assert_times_equal(animation.currentTime, animation.timeline.currentTime);
   }, 'Setting the playback rate while playing preserves the current time' +
     ' from scrollTimeline.');

   promise_test(async t => {
     const animation = createScrollLinkedAnimation(t);

     /* Wait for animation frame is here for now to avoid a renderer crash
     caused by crbug.com/1042924. Once that is fixed, these can be removed */
     await waitForAnimationFrames(2);

     animation.play();

     animation.currentTime = 250;
     await animation.ready;
     animation.playbackRate = 2;

     assert_times_equal(animation.currentTime, 250);
   }, 'Setting the playback rate while playing preserves the set current time.');

   promise_test(async t => {
     const animation = createScrollLinkedAnimation(t);
     const scroller = animation.timeline.scrollSource;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;
     const range = animation.timeline.timeRange;
     animation.playbackRate = -1;
     scroller.scrollTop = 0.3 * maxScroll;
     // Wait for new animation frame  which allows the timeline to compute new
     // current time.
     await waitForNextFrame();
     animation.play();

     await animation.ready;
     const expectedCurrentTime = range - animation.timeline.currentTime;
     assert_times_equal(animation.currentTime, expectedCurrentTime);
   }, 'Negative initial playback rate should correctly modify initial current' +
     ' time.');

   promise_test(async t => {
     const animation = createScrollLinkedAnimation(t);
     const scroller = animation.timeline.scrollSource;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;
     scroller.scrollTop = 0.5 * maxScroll;
     // Wait for new animation frame  which allows the timeline to compute new
     // current time.
     await waitForNextFrame();
     animation.play();

     await animation.ready;
     const startingTimelineTime = animation.timeline.currentTime;
     const startingCurrentTime = animation.currentTime;
     assert_times_equal(startingCurrentTime, startingTimelineTime);

     animation.playbackRate = -1;

     scroller.scrollTop = 0.8 * maxScroll;
     await waitForNextFrame();
     // -300 = 500 - 800
     let timelineDiff = startingTimelineTime - animation.timeline.currentTime;
     // 200 = 500 + (-300)
     let expected = startingCurrentTime + timelineDiff;
     assert_times_equal(animation.currentTime, expected);

     scroller.scrollTop = 0.2 * maxScroll;
     await waitForNextFrame();
     // 300 = 500 - 200
     timelineDiff = startingTimelineTime - animation.timeline.currentTime;
     // 800 = 500 + 300
     expected = startingCurrentTime + timelineDiff;
     assert_times_equal(animation.currentTime, expected);
   }, 'Reversing the playback rate while playing correctly impacts current' +
     ' time during future scrolls');

   promise_test(async t => {
     const animation = createScrollLinkedAnimation(t);
     const scroller = animation.timeline.scrollSource;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;
     const range = animation.timeline.timeRange;
     animation.playbackRate = 0;
     scroller.scrollTop = 0.3 * maxScroll;
     // Wait for new animation frame  which allows the timeline to compute new
     // current time.
     await waitForNextFrame();
     animation.play();

     await animation.ready;
     assert_times_equal(animation.currentTime, 0);
   }, 'Zero initial playback rate should correctly modify initial current' +
     ' time.');

   promise_test(async t => {
     const animation = createScrollLinkedAnimation(t);
     const scroller = animation.timeline.scrollSource;
     const maxScroll = scroller.scrollHeight - scroller.clientHeight;
     scroller.scrollTop = 0.2 * maxScroll;
     // Wait for new animation frame  which allows the timeline to compute new
     // current time.
     await waitForNextFrame();
     animation.play();

     await animation.ready;
     assert_times_equal(animation.currentTime, 200);
     animation.playbackRate = 0;
     scroller.scrollTop = 0.5 * maxScroll;
     await waitForNextFrame();

     // Ensure that current time does not change.
     assert_time_equals_literal(animation.timeline.currentTime, 500);
     assert_time_equals_literal(animation.currentTime, 200);
   }, 'Setting a zero playback rate while running preserves the current time');
 </script>
 </body>
	<!DOCTYPE html>
	<meta charset=utf-8>
	<title>Setting the playback rate of an animation that is using a ScrollTimeline</title>
	<link rel="help" href="https://drafts.csswg.org/web-animations/#setting-the-playback-rate-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: 100px;
	width: 100px;
	will-change: transform;
	}
	.contents {
	height: 1000px;
	width: 100%;
	}
	</style>
	<body>
	<script>
	'use strict';
	promise_test(async t => {
	const animation = createScrollLinkedAnimation(t);
	const scroller = animation.timeline.scrollSource;
	// this forces a layout which results in an active timeline
	scroller.scrollTop = 0;
	// Wait for new animation frame which allows the timeline to compute new
	// current time.
	await waitForNextFrame();

	animation.playbackRate = 0.5;
	animation.play();

	assert_equals(animation.currentTime, 0,
	'Zero current time is not affected by playbackRate change.');
	}, 'Zero current time is not affected by playbackRate set while the ' +
	'animation is in idle state.');

	promise_test(async t => {
	const animation = createScrollLinkedAnimation(t);
	const scroller = animation.timeline.scrollSource;
	// this forces a layout which results in an active timeline
	scroller.scrollTop = 0;
	// Wait for new animation frame which allows the timeline to compute new
	// current time.
	await waitForNextFrame();

	animation.play();
	animation.playbackRate = 0.5;

	assert_equals(animation.currentTime, 0,
	'Zero current time is not affected by playbackRate change.');
	}, 'Zero current time is not affected by playbackRate set while the ' +
	'animation is in play-pending state.');

	promise_test(async t => {
	const animation = createScrollLinkedAnimation(t);
	const scroller = animation.timeline.scrollSource;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;
	const timeRange = animation.timeline.timeRange;
	scroller.scrollTop = 0.2 * maxScroll;
	// Wait for new animation frame which allows the timeline to compute new
	// current time.
	await waitForNextFrame();

	animation.playbackRate = 0.5;
	animation.play();
	await animation.ready;
	assert_equals(animation.currentTime, 0.2 * timeRange * 0.5,
	'Initial current time is scaled by playbackRate change.');
	}, 'Initial current time is scaled by playbackRate set while ' +
	'scroll-linked animation is in running state.');

	promise_test(async t => {
	const animation = createScrollLinkedAnimation(t);
	const scroller = animation.timeline.scrollSource;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;
	const timeRange = animation.timeline.timeRange;
	const playbackRate = 2;

	scroller.scrollTop = 0.2 * maxScroll;
	// Wait for new animation frame which allows the timeline to compute new
	// current time.
	await waitForNextFrame();

	animation.play();
	await animation.ready;
	// Set playback rate while the animation is playing.
	animation.playbackRate = playbackRate;
	assert_times_equal(animation.currentTime, 0.2 * timeRange,
	'The current time should stay unaffected by setting playback rate.');
	}, 'The current time is not affected by playbackRate set while the ' +
	'scroll-linked animation is in play state.');

	promise_test(async t => {
	const animation = createScrollLinkedAnimation(t);
	const scroller = animation.timeline.scrollSource;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;
	const timeRange = animation.timeline.timeRange;

	// Set playback rate while the animation is in 'idle' state.
	animation.playbackRate = 2;
	animation.play();
	await animation.ready;
	scroller.scrollTop = 0.2 * maxScroll;
	// Wait for new animation frame which allows the timeline to compute new
	// current time.
	await waitForNextFrame();

	assert_times_equal(animation.currentTime, 0.2 * timeRange * 2,
	'The current time should increase two times faster than timeline time.');
	}, 'The playback rate set before scroll-linked animation started playing ' +
	'affects the rate of progress of the current time');

	promise_test(async t => {
	const animation = createScrollLinkedAnimation(t);
	const scroller = animation.timeline.scrollSource;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;
	animation.play();

	await animation.ready;

	animation.playbackRate = 2;
	scroller.scrollTop = 0.25 * maxScroll;
	// Wait for new animation frame which allows the timeline to compute new
	// current time.
	await waitForNextFrame();

	assert_times_equal(
	animation.currentTime,
	animation.timeline.currentTime * animation.playbackRate,
	'The current time should increase two times faster than timeline time'
	);
	}, 'The playback rate affects the rate of progress of the current time' +
	' when scrolling');

	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.playbackRate = 2;

	assert_equals(animation.playState, "running");
	assert_true(animation.pending);
	assert_times_equal(animation.currentTime, animation.timeline.currentTime);
	}, 'Setting the playback rate while play-pending preserves the current time' +
	' from scrollTimeline.');

	test(t => {
	const animation = createScrollLinkedAnimation(t);
	animation.play();
	animation.currentTime = 250;
	animation.playbackRate = 2;

	assert_equals(animation.playState, "running");
	assert_true(animation.pending);
	assert_times_equal(animation.currentTime, 250);
	}, 'Setting the playback rate while play-pending preserves the set 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.playbackRate = 2;

	assert_times_equal(animation.currentTime, animation.timeline.currentTime);
	}, 'Setting the playback rate while playing preserves the current time' +
	' from scrollTimeline.');

	promise_test(async t => {
	const animation = createScrollLinkedAnimation(t);

	/* Wait for animation frame is here for now to avoid a renderer crash
	caused by crbug.com/1042924. Once that is fixed, these can be removed */
	await waitForAnimationFrames(2);

	animation.play();

	animation.currentTime = 250;
	await animation.ready;
	animation.playbackRate = 2;

	assert_times_equal(animation.currentTime, 250);
	}, 'Setting the playback rate while playing preserves the set current time.');

	promise_test(async t => {
	const animation = createScrollLinkedAnimation(t);
	const scroller = animation.timeline.scrollSource;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;
	const range = animation.timeline.timeRange;
	animation.playbackRate = -1;
	scroller.scrollTop = 0.3 * maxScroll;
	// Wait for new animation frame which allows the timeline to compute new
	// current time.
	await waitForNextFrame();
	animation.play();

	await animation.ready;
	const expectedCurrentTime = range - animation.timeline.currentTime;
	assert_times_equal(animation.currentTime, expectedCurrentTime);
	}, 'Negative initial playback rate should correctly modify initial current' +
	' time.');

	promise_test(async t => {
	const animation = createScrollLinkedAnimation(t);
	const scroller = animation.timeline.scrollSource;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;
	scroller.scrollTop = 0.5 * maxScroll;
	// Wait for new animation frame which allows the timeline to compute new
	// current time.
	await waitForNextFrame();
	animation.play();

	await animation.ready;
	const startingTimelineTime = animation.timeline.currentTime;
	const startingCurrentTime = animation.currentTime;
	assert_times_equal(startingCurrentTime, startingTimelineTime);

	animation.playbackRate = -1;

	scroller.scrollTop = 0.8 * maxScroll;
	await waitForNextFrame();
	// -300 = 500 - 800
	let timelineDiff = startingTimelineTime - animation.timeline.currentTime;
	// 200 = 500 + (-300)
	let expected = startingCurrentTime + timelineDiff;
	assert_times_equal(animation.currentTime, expected);

	scroller.scrollTop = 0.2 * maxScroll;
	await waitForNextFrame();
	// 300 = 500 - 200
	timelineDiff = startingTimelineTime - animation.timeline.currentTime;
	// 800 = 500 + 300
	expected = startingCurrentTime + timelineDiff;
	assert_times_equal(animation.currentTime, expected);
	}, 'Reversing the playback rate while playing correctly impacts current' +
	' time during future scrolls');

	promise_test(async t => {
	const animation = createScrollLinkedAnimation(t);
	const scroller = animation.timeline.scrollSource;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;
	const range = animation.timeline.timeRange;
	animation.playbackRate = 0;
	scroller.scrollTop = 0.3 * maxScroll;
	// Wait for new animation frame which allows the timeline to compute new
	// current time.
	await waitForNextFrame();
	animation.play();

	await animation.ready;
	assert_times_equal(animation.currentTime, 0);
	}, 'Zero initial playback rate should correctly modify initial current' +
	' time.');

	promise_test(async t => {
	const animation = createScrollLinkedAnimation(t);
	const scroller = animation.timeline.scrollSource;
	const maxScroll = scroller.scrollHeight - scroller.clientHeight;
	scroller.scrollTop = 0.2 * maxScroll;
	// Wait for new animation frame which allows the timeline to compute new
	// current time.
	await waitForNextFrame();
	animation.play();

	await animation.ready;
	assert_times_equal(animation.currentTime, 200);
	animation.playbackRate = 0;
	scroller.scrollTop = 0.5 * maxScroll;
	await waitForNextFrame();

	// Ensure that current time does not change.
	assert_time_equals_literal(animation.timeline.currentTime, 500);
	assert_time_equals_literal(animation.currentTime, 200);
	}, 'Setting a zero playback rate while running preserves the current time');
	</script>
	</body>