chromium/src/third_party/blink/web_tests/external/wpt/web-animations/timing-model/animations/setting-the-start-time-of-an-animation.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>Setting the start time of an animation</title>
 <link rel="help" href="https://drafts.csswg.org/web-animations/#setting-the-start-time-of-an-animation">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <script src="../../resources/timing-override.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';

 test(t => {
   // It should only be possible to set *either* the start time or the current
   // time for an animation that does not have an active timeline.

   const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);

   assert_equals(animation.currentTime, null, 'Intial current time');
   assert_equals(animation.startTime, null, 'Intial start time');

   animation.currentTime = 1000;
   assert_equals(animation.currentTime, 1000,
                 'Setting the current time succeeds');
   assert_equals(animation.startTime, null,
                 'Start time remains null after setting current time');

   animation.startTime = 1000;
   assert_equals(animation.startTime, 1000,
                 'Setting the start time succeeds');
   assert_equals(animation.currentTime, null,
                 'Setting the start time clears the current time');

   animation.startTime = null;
   assert_equals(animation.startTime, null,
                 'Setting the start time to an unresolved time succeeds');
   assert_equals(animation.currentTime, null, 'The current time is unaffected');

 }, 'Setting the start time of an animation without an active timeline');

 test(t => {
   // Setting an unresolved start time on an animation without an active
   // timeline should not clear the current time.

   const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   null);

   assert_equals(animation.currentTime, null, 'Intial current time');
   assert_equals(animation.startTime, null, 'Intial start time');

   animation.currentTime = 1000;
   assert_equals(animation.currentTime, 1000,
                 'Setting the current time succeeds');
   assert_equals(animation.startTime, null,
                 'Start time remains null after setting current time');

   animation.startTime = null;
   assert_equals(animation.startTime, null, 'Start time remains unresolved');
   assert_equals(animation.currentTime, 1000, 'Current time is unaffected');

 }, 'Setting an unresolved start time an animation without an active timeline'
    + ' does not clear the current time');

 test(t => {
   const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);

   // So long as a hold time is set, querying the current time will return
   // the hold time.

   // Since the start time is unresolved at this point, setting the current time
   // will set the hold time
   animation.currentTime = 1000;
   assert_equals(animation.currentTime, 1000,
                 'The current time is calculated from the hold time');

   // If we set the start time, however, we should clear the hold time.
   animation.startTime = document.timeline.currentTime - 2000;
   assert_time_equals_literal(animation.currentTime, 2000,
                              'The current time is calculated from the start'
                              + ' time, not the hold time');

   // Sanity check
   assert_equals(animation.playState, 'running',
                 'Animation reports it is running after setting a resolved'
                 + ' start time');
 }, 'Setting the start time clears the hold time');

 test(t => {
   const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);

   // Set up a running animation (i.e. both start time and current time
   // are resolved).
   animation.startTime = document.timeline.currentTime - 1000;
   assert_equals(animation.playState, 'running');
   assert_time_equals_literal(animation.currentTime, 1000,
                              'Current time is resolved for a running animation');

   // Clear start time
   animation.startTime = null;
   assert_time_equals_literal(animation.currentTime, 1000,
                              'Hold time is set after start time is made'
                              + ' unresolved');
   assert_equals(animation.playState, 'paused',
                 'Animation reports it is paused after setting an unresolved'
                 + ' start time');
 }, 'Setting an unresolved start time sets the hold time');

 promise_test(async t => {
   const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);

   let readyPromiseCallbackCalled = false;
   animation.ready.then(() => { readyPromiseCallbackCalled = true; } );

   // Put the animation in the play-pending state
   animation.play();

   // Sanity check
   assert_true(animation.pending && animation.playState === 'running',
               'Animation is in play-pending state');

   // Setting the start time should resolve the 'ready' promise, i.e.
   // it should schedule a microtask to run the promise callbacks.
   animation.startTime = document.timeline.currentTime;
   assert_false(readyPromiseCallbackCalled,
                'Ready promise callback is not called synchronously');

   // If we schedule another microtask then it should run immediately after
   // the ready promise resolution microtask.
   await Promise.resolve();
   assert_true(readyPromiseCallbackCalled,
               'Ready promise callback called after setting startTime');
 }, 'Setting the start time resolves a pending ready promise');

 promise_test(async t => {
   const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);

   let readyPromiseCallbackCalled = false;
   animation.ready.then(() => { readyPromiseCallbackCalled = true; } );

   // Put the animation in the pause-pending state
   animation.startTime = document.timeline.currentTime;
   animation.pause();

   // Sanity check
   assert_true(animation.pending && animation.playState === 'paused',
               'Animation is in pause-pending state');

   // Setting the start time should resolve the 'ready' promise although
   // the resolution callbacks when be run in a separate microtask.
   animation.startTime = null;
   assert_false(readyPromiseCallbackCalled,
                'Ready promise callback is not called synchronously');

   await Promise.resolve();
   assert_true(readyPromiseCallbackCalled,
               'Ready promise callback called after setting startTime');
 }, 'Setting the start time resolves a pending pause task');

 promise_test(async t => {
   const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);

   // Put the animation in the play-pending state
   animation.play();

   // Sanity check
   assert_true(animation.pending, 'Animation is pending');
   assert_equals(animation.playState, 'running',
                 'Animation is play-pending');
   assert_equals(animation.startTime, null, 'Start time is null');

   // Even though the startTime is already null, setting it to the same value
   // should still cancel the pending task.
   animation.startTime = null;
   assert_false(animation.pending, 'Animation is no longer pending');
   assert_equals(animation.playState, 'paused', 'Animation is paused');
 }, 'Setting an unresolved start time on a play-pending animation makes it'
    + ' paused');

 promise_test(async t => {
   const animation =
     new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
                   document.timeline);

   // Set start time such that the current time is past the end time
   animation.startTime = document.timeline.currentTime
                         - 110 * MS_PER_SEC;
   assert_equals(animation.playState, 'finished',
                 'Seeked to finished state using the startTime');

   // If the 'did seek' flag is true, the current time should be greater than
   // the effect end.
   assert_greater_than(animation.currentTime,
                       animation.effect.getComputedTiming().endTime,
                       'Setting the start time updated the finished state with'
                       + ' the \'did seek\' flag set to true');

   // Furthermore, that time should persist if we have correctly updated
   // the hold time
   const finishedCurrentTime = animation.currentTime;
   await waitForAnimationFrames(1);
   assert_equals(animation.currentTime, finishedCurrentTime,
                 'Current time does not change after seeking past the effect'
                 + ' end time by setting the current time');
 }, 'Setting the start time updates the finished state');

 promise_test(async t => {
   const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);

   // We should be play-pending now
   assert_true(anim.pending);
   assert_equals(anim.playState, 'running');

   // Apply a pending playback rate
   anim.updatePlaybackRate(2);
   assert_equals(anim.playbackRate, 1);
   assert_true(anim.pending);

   // Setting the start time should apply the pending playback rate
   anim.startTime = anim.timeline.currentTime - 25 * MS_PER_SEC;
   assert_equals(anim.playbackRate, 2);
   assert_false(anim.pending);

   // Sanity check that the start time is preserved and current time is
   // calculated using the new playback rate
   assert_times_equal(anim.startTime,
                      anim.timeline.currentTime - 25 * MS_PER_SEC);
   assert_time_equals_literal(anim.currentTime, 50 * MS_PER_SEC);
 }, 'Setting the start time of a play-pending animation applies a pending playback rate');

 promise_test(async t => {
   const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   await anim.ready;

   // We should be running now
   assert_false(anim.pending);
   assert_equals(anim.playState, 'running');

   // Apply a pending playback rate
   anim.updatePlaybackRate(2);
   assert_equals(anim.playbackRate, 1);
   assert_true(anim.pending);

   // Setting the start time should apply the pending playback rate
   anim.startTime = anim.timeline.currentTime - 25 * MS_PER_SEC;
   assert_equals(anim.playbackRate, 2);
   assert_false(anim.pending);

   // Sanity check that the start time is preserved and current time is
   // calculated using the new playback rate
   assert_times_equal(anim.startTime,
                      anim.timeline.currentTime - 25 * MS_PER_SEC);
   assert_time_equals_literal(parseInt(anim.currentTime.toPrecision(5), 10), 50 * MS_PER_SEC);
 }, 'Setting the start time of a playing animation applies a pending playback rate');

 promise_test(async t => {
   const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   await anim.ready;
   assert_equals(anim.playState, 'running');

   // Setting the start time updates the finished state. The hold time is not
   // constrained by the effect end time.
   anim.startTime = -200 * MS_PER_SEC;
   assert_equals(anim.playState, 'finished');

   assert_times_equal(anim.currentTime,
                      document.timeline.currentTime + 200 * MS_PER_SEC);
 }, 'Setting the start time on a running animation updates the play state');

 promise_test(async t => {
   const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
   await anim.ready;

   // Setting the start time updates the finished state. The hold time is not
   // constrained by the normal range of the animation time.
   anim.currentTime = 100 * MS_PER_SEC;
   assert_equals(anim.playState, 'finished');
   anim.playbackRate = -1;
   assert_equals(anim.playState, 'running');
   anim.startTime = -200 * MS_PER_SEC;
   assert_equals(anim.playState, 'finished');
   assert_times_equal(anim.currentTime,
                      -document.timeline.currentTime - 200 * MS_PER_SEC);
 }, 'Setting the start time on a reverse running animation updates the play '
    + 'state');

 </script>
 </body>
	<!DOCTYPE html>
	<meta charset=utf-8>
	<title>Setting the start time of an animation</title>
	<link rel="help" href="https://drafts.csswg.org/web-animations/#setting-the-start-time-of-an-animation">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="../../testcommon.js"></script>
	<script src="../../resources/timing-override.js"></script>
	<body>
	<div id="log"></div>
	<script>
	'use strict';

	test(t => {
	// It should only be possible to set either the start time or the current
	// time for an animation that does not have an active timeline.

	const animation =
	new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
	null);

	assert_equals(animation.currentTime, null, 'Intial current time');
	assert_equals(animation.startTime, null, 'Intial start time');

	animation.currentTime = 1000;
	assert_equals(animation.currentTime, 1000,
	'Setting the current time succeeds');
	assert_equals(animation.startTime, null,
	'Start time remains null after setting current time');

	animation.startTime = 1000;
	assert_equals(animation.startTime, 1000,
	'Setting the start time succeeds');
	assert_equals(animation.currentTime, null,
	'Setting the start time clears the current time');

	animation.startTime = null;
	assert_equals(animation.startTime, null,
	'Setting the start time to an unresolved time succeeds');
	assert_equals(animation.currentTime, null, 'The current time is unaffected');

	}, 'Setting the start time of an animation without an active timeline');

	test(t => {
	// Setting an unresolved start time on an animation without an active
	// timeline should not clear the current time.

	const animation =
	new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
	null);

	assert_equals(animation.currentTime, null, 'Intial current time');
	assert_equals(animation.startTime, null, 'Intial start time');

	animation.currentTime = 1000;
	assert_equals(animation.currentTime, 1000,
	'Setting the current time succeeds');
	assert_equals(animation.startTime, null,
	'Start time remains null after setting current time');

	animation.startTime = null;
	assert_equals(animation.startTime, null, 'Start time remains unresolved');
	assert_equals(animation.currentTime, 1000, 'Current time is unaffected');

	}, 'Setting an unresolved start time an animation without an active timeline'
	+ ' does not clear the current time');

	test(t => {
	const animation =
	new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
	document.timeline);

	// So long as a hold time is set, querying the current time will return
	// the hold time.

	// Since the start time is unresolved at this point, setting the current time
	// will set the hold time
	animation.currentTime = 1000;
	assert_equals(animation.currentTime, 1000,
	'The current time is calculated from the hold time');

	// If we set the start time, however, we should clear the hold time.
	animation.startTime = document.timeline.currentTime - 2000;
	assert_time_equals_literal(animation.currentTime, 2000,
	'The current time is calculated from the start'
	+ ' time, not the hold time');

	// Sanity check
	assert_equals(animation.playState, 'running',
	'Animation reports it is running after setting a resolved'
	+ ' start time');
	}, 'Setting the start time clears the hold time');

	test(t => {
	const animation =
	new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
	document.timeline);

	// Set up a running animation (i.e. both start time and current time
	// are resolved).
	animation.startTime = document.timeline.currentTime - 1000;
	assert_equals(animation.playState, 'running');
	assert_time_equals_literal(animation.currentTime, 1000,
	'Current time is resolved for a running animation');

	// Clear start time
	animation.startTime = null;
	assert_time_equals_literal(animation.currentTime, 1000,
	'Hold time is set after start time is made'
	+ ' unresolved');
	assert_equals(animation.playState, 'paused',
	'Animation reports it is paused after setting an unresolved'
	+ ' start time');
	}, 'Setting an unresolved start time sets the hold time');

	promise_test(async t => {
	const animation =
	new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
	document.timeline);

	let readyPromiseCallbackCalled = false;
	animation.ready.then(() => { readyPromiseCallbackCalled = true; } );

	// Put the animation in the play-pending state
	animation.play();

	// Sanity check
	assert_true(animation.pending && animation.playState === 'running',
	'Animation is in play-pending state');

	// Setting the start time should resolve the 'ready' promise, i.e.
	// it should schedule a microtask to run the promise callbacks.
	animation.startTime = document.timeline.currentTime;
	assert_false(readyPromiseCallbackCalled,
	'Ready promise callback is not called synchronously');

	// If we schedule another microtask then it should run immediately after
	// the ready promise resolution microtask.
	await Promise.resolve();
	assert_true(readyPromiseCallbackCalled,
	'Ready promise callback called after setting startTime');
	}, 'Setting the start time resolves a pending ready promise');

	promise_test(async t => {
	const animation =
	new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
	document.timeline);

	let readyPromiseCallbackCalled = false;
	animation.ready.then(() => { readyPromiseCallbackCalled = true; } );

	// Put the animation in the pause-pending state
	animation.startTime = document.timeline.currentTime;
	animation.pause();

	// Sanity check
	assert_true(animation.pending && animation.playState === 'paused',
	'Animation is in pause-pending state');

	// Setting the start time should resolve the 'ready' promise although
	// the resolution callbacks when be run in a separate microtask.
	animation.startTime = null;
	assert_false(readyPromiseCallbackCalled,
	'Ready promise callback is not called synchronously');

	await Promise.resolve();
	assert_true(readyPromiseCallbackCalled,
	'Ready promise callback called after setting startTime');
	}, 'Setting the start time resolves a pending pause task');

	promise_test(async t => {
	const animation =
	new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
	document.timeline);

	// Put the animation in the play-pending state
	animation.play();

	// Sanity check
	assert_true(animation.pending, 'Animation is pending');
	assert_equals(animation.playState, 'running',
	'Animation is play-pending');
	assert_equals(animation.startTime, null, 'Start time is null');

	// Even though the startTime is already null, setting it to the same value
	// should still cancel the pending task.
	animation.startTime = null;
	assert_false(animation.pending, 'Animation is no longer pending');
	assert_equals(animation.playState, 'paused', 'Animation is paused');
	}, 'Setting an unresolved start time on a play-pending animation makes it'
	+ ' paused');

	promise_test(async t => {
	const animation =
	new Animation(new KeyframeEffect(createDiv(t), null, 100 * MS_PER_SEC),
	document.timeline);

	// Set start time such that the current time is past the end time
	animation.startTime = document.timeline.currentTime
	- 110 * MS_PER_SEC;
	assert_equals(animation.playState, 'finished',
	'Seeked to finished state using the startTime');

	// If the 'did seek' flag is true, the current time should be greater than
	// the effect end.
	assert_greater_than(animation.currentTime,
	animation.effect.getComputedTiming().endTime,
	'Setting the start time updated the finished state with'
	+ ' the \'did seek\' flag set to true');

	// Furthermore, that time should persist if we have correctly updated
	// the hold time
	const finishedCurrentTime = animation.currentTime;
	await waitForAnimationFrames(1);
	assert_equals(animation.currentTime, finishedCurrentTime,
	'Current time does not change after seeking past the effect'
	+ ' end time by setting the current time');
	}, 'Setting the start time updates the finished state');

	promise_test(async t => {
	const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);

	// We should be play-pending now
	assert_true(anim.pending);
	assert_equals(anim.playState, 'running');

	// Apply a pending playback rate
	anim.updatePlaybackRate(2);
	assert_equals(anim.playbackRate, 1);
	assert_true(anim.pending);

	// Setting the start time should apply the pending playback rate
	anim.startTime = anim.timeline.currentTime - 25 * MS_PER_SEC;
	assert_equals(anim.playbackRate, 2);
	assert_false(anim.pending);

	// Sanity check that the start time is preserved and current time is
	// calculated using the new playback rate
	assert_times_equal(anim.startTime,
	anim.timeline.currentTime - 25 * MS_PER_SEC);
	assert_time_equals_literal(anim.currentTime, 50 * MS_PER_SEC);
	}, 'Setting the start time of a play-pending animation applies a pending playback rate');

	promise_test(async t => {
	const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
	await anim.ready;

	// We should be running now
	assert_false(anim.pending);
	assert_equals(anim.playState, 'running');

	// Apply a pending playback rate
	anim.updatePlaybackRate(2);
	assert_equals(anim.playbackRate, 1);
	assert_true(anim.pending);

	// Setting the start time should apply the pending playback rate
	anim.startTime = anim.timeline.currentTime - 25 * MS_PER_SEC;
	assert_equals(anim.playbackRate, 2);
	assert_false(anim.pending);

	// Sanity check that the start time is preserved and current time is
	// calculated using the new playback rate
	assert_times_equal(anim.startTime,
	anim.timeline.currentTime - 25 * MS_PER_SEC);
	assert_time_equals_literal(parseInt(anim.currentTime.toPrecision(5), 10), 50 * MS_PER_SEC);
	}, 'Setting the start time of a playing animation applies a pending playback rate');

	promise_test(async t => {
	const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
	await anim.ready;
	assert_equals(anim.playState, 'running');

	// Setting the start time updates the finished state. The hold time is not
	// constrained by the effect end time.
	anim.startTime = -200 * MS_PER_SEC;
	assert_equals(anim.playState, 'finished');

	assert_times_equal(anim.currentTime,
	document.timeline.currentTime + 200 * MS_PER_SEC);
	}, 'Setting the start time on a running animation updates the play state');

	promise_test(async t => {
	const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
	await anim.ready;

	// Setting the start time updates the finished state. The hold time is not
	// constrained by the normal range of the animation time.
	anim.currentTime = 100 * MS_PER_SEC;
	assert_equals(anim.playState, 'finished');
	anim.playbackRate = -1;
	assert_equals(anim.playState, 'running');
	anim.startTime = -200 * MS_PER_SEC;
	assert_equals(anim.playState, 'finished');
	assert_times_equal(anim.currentTime,
	-document.timeline.currentTime - 200 * MS_PER_SEC);
	}, 'Setting the start time on a reverse running animation updates the play '
	+ 'state');

	</script>
	</body>