LayoutTests/imported/mozilla/css-animations/test_animation-starttime.html - WebKit - Git at Google

 <!doctype html>
 <html>
   <head>
     <meta charset=utf-8>
     <title>Tests for the effect of setting a CSS animation's
            Animation.startTime</title>
     <style>

 .animated-div {
   margin-left: 10px;
   /* Make it easier to calculate expected values: */
   animation-timing-function: linear ! important;
 }

 @keyframes anim {
   from { margin-left: 100px; }
   to { margin-left: 200px; }
 }

     </style>
     <script src="../../../resources/testharness.js"></script>
     <script src="../../../resources/testharnessreport.js"></script>
     <script src="../resources/testcommon.js"></script>
   </head>
   <body>
     <div id="log"></div>
     <script type="text/javascript">

 'use strict';

 // TODO: We should separate this test(Testing for CSS Animation events /
 // Testing for start time of Web Animation).
 // e.g:
 //  CSS Animation events test:
 //    - check the firing an event after setting an Animation.startTime
 //  The start time of Web Animation test:
 //    - check an start time value on several situation(init / processing..)
 //    - Based on W3C Spec, check the behavior of setting current time.

 // TODO: Once the computedTiming property is implemented, add checks to the
 // checker helpers to ensure that computedTiming's properties are updated as
 // expected.
 // See https://bugzilla.mozilla.org/show_bug.cgi?id=1108055

 const CSS_ANIM_EVENTS =
   ['animationstart', 'animationiteration', 'animationend'];

 test(function(t)
 {
   var div = addDiv(t, { 'style': 'animation: anim 100s' });
   var animation = div.getAnimations()[0];

   assert_equals(animation.startTime, null, 'startTime is unresolved');
 }, 'startTime of a newly created (play-pending) animation is unresolved');

 test(function(t)
 {
   var div = addDiv(t, { 'style': 'animation: anim 100s paused' });
   var animation = div.getAnimations()[0];
   assert_equals(animation.startTime, null, 'startTime is unresolved');
 }, 'startTime of a newly created (pause-pending) animation is unresolved');

 promise_test(function(t)
 {
   var div = addDiv(t, { 'style': 'animation: anim 100s' });
   var animation = div.getAnimations()[0];

   return animation.ready.then(function() {
     assert_true(animation.startTime > 0,
                 'startTime is resolved when running');
   });
 }, 'startTime is resolved when running');

 promise_test(function(t)
 {
   var div = addDiv(t, { 'style': 'animation: anim 100s paused' });
   var animation = div.getAnimations()[0];

   return animation.ready.then(function() {
     assert_equals(animation.startTime, null,
                   'startTime is unresolved when paused');
   });
 }, 'startTime is unresolved when paused');

 promise_test(function(t)
 {
   var div = addDiv(t, { 'style': 'animation: anim 100s' });
   var animation = div.getAnimations()[0];

   return animation.ready.then(function() {
     div.style.animationPlayState = 'paused';
     getComputedStyle(div).animationPlayState;

     assert_not_equals(animation.startTime, null,
                       'startTime is resolved when pause-pending');

     div.style.animationPlayState = 'running';
     getComputedStyle(div).animationPlayState;

     assert_not_equals(animation.startTime, null,
                       'startTime is preserved when a pause is aborted');
   });
 }, 'startTime while pause-pending and play-pending');

 promise_test(function(t) {
   var div = addDiv(t, { 'style': 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
   // Seek to end to put us in the finished state
   animation.currentTime = 100 * MS_PER_SEC;

   return animation.ready.then(function() {
     // Call play() which puts us back in the running state
     animation.play();

     assert_equals(animation.startTime, null, 'startTime is unresolved');
   });
 }, 'startTime while play-pending from finished state');

 test(function(t) {
   var div = addDiv(t, { 'style': 'animation: anim 100s' });
   var animation = div.getAnimations()[0];
   animation.finish();
   // Call play() which puts us back in the running state
   animation.play();

   assert_equals(animation.startTime, null, 'startTime is unresolved');
 }, 'startTime while play-pending from finished state using finish()');

 promise_test(function(t) {
   var div = addDiv(t, { style: 'animation: anim 100s' });
   var animation = div.getAnimations()[0];

   assert_equals(animation.startTime, null, 'The initial startTime is null');
   var initialTimelineTime = document.timeline.currentTime;

   return animation.ready.then(function() {
     assert_true(animation.startTime > initialTimelineTime,
                 'After the animation has started, startTime is greater than ' +
                 'the time when it was started');
     var startTimeBeforePausing = animation.startTime;

     div.style.animationPlayState = 'paused';
     // Flush styles just in case querying animation.startTime doesn't flush
     // styles (which would be a bug in of itself and could mask a further bug
     // by causing startTime to appear to not change).
     getComputedStyle(div).animationPlayState;

     assert_equals(animation.startTime, startTimeBeforePausing,
                   'The startTime does not change when pausing-pending');
     return animation.ready;
   }).then(function() {
     assert_equals(animation.startTime, null,
                   'After actually pausing, the startTime of an animation ' +
                   'is null');
   });
 }, 'Pausing should make the startTime become null');

 test(function(t)
 {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s 100s';
   var animation = div.getAnimations()[0];
   var currentTime = animation.timeline.currentTime;
   animation.startTime = currentTime;

   assert_times_equal(animation.startTime, currentTime,
     'Check setting of startTime actually works');
 }, 'Sanity test to check round-tripping assigning to a new animation\'s ' +
    'startTime');

 promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = 'anim 100s 100s';
   var animation = div.getAnimations()[0];

   return animation.ready.then(function() {
     assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
       'Animation.startTime should be less than the timeline\'s ' +
       'currentTime on the first paint tick after animation creation');

     animation.startTime = animation.timeline.currentTime - 100 * MS_PER_SEC;
     return eventWatcher.wait_for('animationstart');
   }).then(function() {
     animation.startTime = animation.timeline.currentTime - 200 * MS_PER_SEC;
     return eventWatcher.wait_for('animationend');
   });
 }, 'Skipping forward through animation');

 promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = 'anim 100s 100s';
   var animation = div.getAnimations()[0];
   animation.startTime = animation.timeline.currentTime - 200 * MS_PER_SEC;
   var previousTimelineTime = animation.timeline.currentTime;

   return eventWatcher.wait_for(['animationstart',
                                 'animationend']).then(function() {
     assert_true(document.timeline.currentTime - previousTimelineTime <
                   100 * MS_PER_SEC,
                 'Sanity check that seeking worked rather than the events ' +
                 'firing after normal playback through the very long ' +
                 'animation duration');

     animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;

     // Despite going backwards from after the end of the animation (to being
     // in the active interval), we now expect an 'animationstart' event
     // because the animation should go from being inactive to active.
     return eventWatcher.wait_for('animationstart');
   }).then(function() {
     animation.startTime = animation.timeline.currentTime;

     // Despite going backwards from just after the active interval starts to
     // the animation start time, we now expect an animationend event
     // because we went from inside to outside the active interval.
     return eventWatcher.wait_for('animationend');
   }).then(function() {
     assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
       'Animation.startTime should be less than the timeline\'s ' +
       'currentTime on the first paint tick after animation creation');
   });
 }, 'Skipping backwards through animation');

 // Next we have multiple tests to check that redundant startTime changes do NOT
 // dispatch events. It's impossible to distinguish between events not being
 // dispatched and events just taking an incredibly long time to dispatch
 // without waiting an infinitely long time. Obviously we don't want to do that
 // (block this test from finishing forever), so instead we just listen for
 // events until two animation frames (i.e. requestAnimationFrame callbacks)
 // have happened, then assume that no events will ever be dispatched for the
 // redundant changes if no events were detected in that time.

 promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = "anim 100s 100s";
   var animation = div.getAnimations()[0];

   animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
   animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;

   return waitForAnimationFrames(2);
 }, 'Redundant change, before -> active, then back');

 promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = "anim 100s 100s";
   var animation = div.getAnimations()[0];

   animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
   animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;

   return waitForAnimationFrames(2);
 }, 'Redundant change, before -> after, then back');

 promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = "anim 100s 100s";
   var animation = div.getAnimations()[0];

   var retPromise =  eventWatcher.wait_for('animationstart').then(function() {
     animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
     animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;

     return waitForAnimationFrames(2);
   });
   // get us into the initial state:
   animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;

   return retPromise;
 }, 'Redundant change, active -> before, then back');

 promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = "anim 100s 100s";
   var animation = div.getAnimations()[0];

   var retPromise = eventWatcher.wait_for('animationstart').then(function() {
     animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
     animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;

     return waitForAnimationFrames(2);
   });
   // get us into the initial state:
   animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;

   return retPromise;
 }, 'Redundant change, active -> after, then back');

 promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = "anim 100s 100s";
   var animation = div.getAnimations()[0];

   var retPromise = eventWatcher.wait_for(['animationstart',
                                           'animationend']).then(function() {
     animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
     animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;

     return waitForAnimationFrames(2);
   });
   // get us into the initial state:
   animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;

   return retPromise;
 }, 'Redundant change, after -> before, then back');

 promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
   div.style.animation = "anim 100s 100s";
   var animation = div.getAnimations()[0];

   var retPromise = eventWatcher.wait_for(['animationstart',
                                           'animationend']).then(function() {
     animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
     animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;

     return waitForAnimationFrames(2);

   });
   // get us into the initial state:
   animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;

   return retPromise;
 }, 'Redundant change, after -> active, then back');

 promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s 100s';
   var animation = div.getAnimations()[0];
   var storedCurrentTime;

   return animation.ready.then(function() {
     storedCurrentTime = animation.currentTime;
     animation.startTime = null;
     return animation.ready;
   }).then(function() {
     assert_equals(animation.currentTime, storedCurrentTime,
       'Test that hold time is correct');
   });
 }, 'Setting startTime to null');

 promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s';
   var animation = div.getAnimations()[0];

   return animation.ready.then(function() {
     var savedStartTime = animation.startTime;

     assert_not_equals(animation.startTime, null,
       'Animation.startTime not null on ready Promise resolve');

     animation.pause();
     return animation.ready;
   }).then(function() {
     assert_equals(animation.startTime, null,
       'Animation.startTime is null after paused');
     assert_equals(animation.playState, 'paused',
       'Animation.playState is "paused" after pause() call');
   });
 }, 'Animation.startTime after pausing');

 promise_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   div.style.animation = 'anim 100s';
   var animation = div.getAnimations()[0];

   return animation.ready.then(function() {
     animation.cancel();
     assert_equals(animation.startTime, null,
                   'The startTime of a cancelled animation should be null');
   });
 }, 'Animation.startTime after cancelling');

     </script>
   </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset=utf-8>
	<title>Tests for the effect of setting a CSS animation's
	Animation.startTime</title>
	<style>

	.animated-div {
	margin-left: 10px;
	/* Make it easier to calculate expected values: */
	animation-timing-function: linear ! important;
	}

	@keyframes anim {
	from { margin-left: 100px; }
	to { margin-left: 200px; }
	}

	</style>
	<script src="../../../resources/testharness.js"></script>
	<script src="../../../resources/testharnessreport.js"></script>
	<script src="../resources/testcommon.js"></script>
	</head>
	<body>
	<div id="log"></div>
	<script type="text/javascript">

	'use strict';

	// TODO: We should separate this test(Testing for CSS Animation events /
	// Testing for start time of Web Animation).
	// e.g:
	// CSS Animation events test:
	// - check the firing an event after setting an Animation.startTime
	// The start time of Web Animation test:
	// - check an start time value on several situation(init / processing..)
	// - Based on W3C Spec, check the behavior of setting current time.

	// TODO: Once the computedTiming property is implemented, add checks to the
	// checker helpers to ensure that computedTiming's properties are updated as
	// expected.
	// See https://bugzilla.mozilla.org/show_bug.cgi?id=1108055

	const CSS_ANIM_EVENTS =
	['animationstart', 'animationiteration', 'animationend'];

	test(function(t)
	{
	var div = addDiv(t, { 'style': 'animation: anim 100s' });
	var animation = div.getAnimations()[0];

	assert_equals(animation.startTime, null, 'startTime is unresolved');
	}, 'startTime of a newly created (play-pending) animation is unresolved');

	test(function(t)
	{
	var div = addDiv(t, { 'style': 'animation: anim 100s paused' });
	var animation = div.getAnimations()[0];
	assert_equals(animation.startTime, null, 'startTime is unresolved');
	}, 'startTime of a newly created (pause-pending) animation is unresolved');

	promise_test(function(t)
	{
	var div = addDiv(t, { 'style': 'animation: anim 100s' });
	var animation = div.getAnimations()[0];

	return animation.ready.then(function() {
	assert_true(animation.startTime > 0,
	'startTime is resolved when running');
	});
	}, 'startTime is resolved when running');

	promise_test(function(t)
	{
	var div = addDiv(t, { 'style': 'animation: anim 100s paused' });
	var animation = div.getAnimations()[0];

	return animation.ready.then(function() {
	assert_equals(animation.startTime, null,
	'startTime is unresolved when paused');
	});
	}, 'startTime is unresolved when paused');

	promise_test(function(t)
	{
	var div = addDiv(t, { 'style': 'animation: anim 100s' });
	var animation = div.getAnimations()[0];

	return animation.ready.then(function() {
	div.style.animationPlayState = 'paused';
	getComputedStyle(div).animationPlayState;

	assert_not_equals(animation.startTime, null,
	'startTime is resolved when pause-pending');

	div.style.animationPlayState = 'running';
	getComputedStyle(div).animationPlayState;

	assert_not_equals(animation.startTime, null,
	'startTime is preserved when a pause is aborted');
	});
	}, 'startTime while pause-pending and play-pending');

	promise_test(function(t) {
	var div = addDiv(t, { 'style': 'animation: anim 100s' });
	var animation = div.getAnimations()[0];
	// Seek to end to put us in the finished state
	animation.currentTime = 100 * MS_PER_SEC;

	return animation.ready.then(function() {
	// Call play() which puts us back in the running state
	animation.play();

	assert_equals(animation.startTime, null, 'startTime is unresolved');
	});
	}, 'startTime while play-pending from finished state');

	test(function(t) {
	var div = addDiv(t, { 'style': 'animation: anim 100s' });
	var animation = div.getAnimations()[0];
	animation.finish();
	// Call play() which puts us back in the running state
	animation.play();

	assert_equals(animation.startTime, null, 'startTime is unresolved');
	}, 'startTime while play-pending from finished state using finish()');

	promise_test(function(t) {
	var div = addDiv(t, { style: 'animation: anim 100s' });
	var animation = div.getAnimations()[0];

	assert_equals(animation.startTime, null, 'The initial startTime is null');
	var initialTimelineTime = document.timeline.currentTime;

	return animation.ready.then(function() {
	assert_true(animation.startTime > initialTimelineTime,
	'After the animation has started, startTime is greater than ' +
	'the time when it was started');
	var startTimeBeforePausing = animation.startTime;

	div.style.animationPlayState = 'paused';
	// Flush styles just in case querying animation.startTime doesn't flush
	// styles (which would be a bug in of itself and could mask a further bug
	// by causing startTime to appear to not change).
	getComputedStyle(div).animationPlayState;

	assert_equals(animation.startTime, startTimeBeforePausing,
	'The startTime does not change when pausing-pending');
	return animation.ready;
	}).then(function() {
	assert_equals(animation.startTime, null,
	'After actually pausing, the startTime of an animation ' +
	'is null');
	});
	}, 'Pausing should make the startTime become null');

	test(function(t)
	{
	var div = addDiv(t, {'class': 'animated-div'});
	div.style.animation = 'anim 100s 100s';
	var animation = div.getAnimations()[0];
	var currentTime = animation.timeline.currentTime;
	animation.startTime = currentTime;

	assert_times_equal(animation.startTime, currentTime,
	'Check setting of startTime actually works');
	}, 'Sanity test to check round-tripping assigning to a new animation\'s ' +
	'startTime');

	promise_test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
	div.style.animation = 'anim 100s 100s';
	var animation = div.getAnimations()[0];

	return animation.ready.then(function() {
	assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
	'Animation.startTime should be less than the timeline\'s ' +
	'currentTime on the first paint tick after animation creation');

	animation.startTime = animation.timeline.currentTime - 100 * MS_PER_SEC;
	return eventWatcher.wait_for('animationstart');
	}).then(function() {
	animation.startTime = animation.timeline.currentTime - 200 * MS_PER_SEC;
	return eventWatcher.wait_for('animationend');
	});
	}, 'Skipping forward through animation');

	promise_test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
	div.style.animation = 'anim 100s 100s';
	var animation = div.getAnimations()[0];
	animation.startTime = animation.timeline.currentTime - 200 * MS_PER_SEC;
	var previousTimelineTime = animation.timeline.currentTime;

	return eventWatcher.wait_for(['animationstart',
	'animationend']).then(function() {
	assert_true(document.timeline.currentTime - previousTimelineTime <
	100 * MS_PER_SEC,
	'Sanity check that seeking worked rather than the events ' +
	'firing after normal playback through the very long ' +
	'animation duration');

	animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;

	// Despite going backwards from after the end of the animation (to being
	// in the active interval), we now expect an 'animationstart' event
	// because the animation should go from being inactive to active.
	return eventWatcher.wait_for('animationstart');
	}).then(function() {
	animation.startTime = animation.timeline.currentTime;

	// Despite going backwards from just after the active interval starts to
	// the animation start time, we now expect an animationend event
	// because we went from inside to outside the active interval.
	return eventWatcher.wait_for('animationend');
	}).then(function() {
	assert_less_than_equal(animation.startTime, animation.timeline.currentTime,
	'Animation.startTime should be less than the timeline\'s ' +
	'currentTime on the first paint tick after animation creation');
	});
	}, 'Skipping backwards through animation');

	// Next we have multiple tests to check that redundant startTime changes do NOT
	// dispatch events. It's impossible to distinguish between events not being
	// dispatched and events just taking an incredibly long time to dispatch
	// without waiting an infinitely long time. Obviously we don't want to do that
	// (block this test from finishing forever), so instead we just listen for
	// events until two animation frames (i.e. requestAnimationFrame callbacks)
	// have happened, then assume that no events will ever be dispatched for the
	// redundant changes if no events were detected in that time.

	promise_test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
	div.style.animation = "anim 100s 100s";
	var animation = div.getAnimations()[0];

	animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
	animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;

	return waitForAnimationFrames(2);
	}, 'Redundant change, before -> active, then back');

	promise_test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
	div.style.animation = "anim 100s 100s";
	var animation = div.getAnimations()[0];

	animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
	animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;

	return waitForAnimationFrames(2);
	}, 'Redundant change, before -> after, then back');

	promise_test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
	div.style.animation = "anim 100s 100s";
	var animation = div.getAnimations()[0];

	var retPromise = eventWatcher.wait_for('animationstart').then(function() {
	animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
	animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;

	return waitForAnimationFrames(2);
	});
	// get us into the initial state:
	animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;

	return retPromise;
	}, 'Redundant change, active -> before, then back');

	promise_test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
	div.style.animation = "anim 100s 100s";
	var animation = div.getAnimations()[0];

	var retPromise = eventWatcher.wait_for('animationstart').then(function() {
	animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;
	animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;

	return waitForAnimationFrames(2);
	});
	// get us into the initial state:
	animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;

	return retPromise;
	}, 'Redundant change, active -> after, then back');

	promise_test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
	div.style.animation = "anim 100s 100s";
	var animation = div.getAnimations()[0];

	var retPromise = eventWatcher.wait_for(['animationstart',
	'animationend']).then(function() {
	animation.startTime = animation.timeline.currentTime - 50 * MS_PER_SEC;
	animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;

	return waitForAnimationFrames(2);
	});
	// get us into the initial state:
	animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;

	return retPromise;
	}, 'Redundant change, after -> before, then back');

	promise_test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	var eventWatcher = new EventWatcher(t, div, CSS_ANIM_EVENTS);
	div.style.animation = "anim 100s 100s";
	var animation = div.getAnimations()[0];

	var retPromise = eventWatcher.wait_for(['animationstart',
	'animationend']).then(function() {
	animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC;
	animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;

	return waitForAnimationFrames(2);

	});
	// get us into the initial state:
	animation.startTime = animation.timeline.currentTime - 250 * MS_PER_SEC;

	return retPromise;
	}, 'Redundant change, after -> active, then back');

	promise_test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	div.style.animation = 'anim 100s 100s';
	var animation = div.getAnimations()[0];
	var storedCurrentTime;

	return animation.ready.then(function() {
	storedCurrentTime = animation.currentTime;
	animation.startTime = null;
	return animation.ready;
	}).then(function() {
	assert_equals(animation.currentTime, storedCurrentTime,
	'Test that hold time is correct');
	});
	}, 'Setting startTime to null');

	promise_test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	div.style.animation = 'anim 100s';
	var animation = div.getAnimations()[0];

	return animation.ready.then(function() {
	var savedStartTime = animation.startTime;

	assert_not_equals(animation.startTime, null,
	'Animation.startTime not null on ready Promise resolve');

	animation.pause();
	return animation.ready;
	}).then(function() {
	assert_equals(animation.startTime, null,
	'Animation.startTime is null after paused');
	assert_equals(animation.playState, 'paused',
	'Animation.playState is "paused" after pause() call');
	});
	}, 'Animation.startTime after pausing');

	promise_test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	div.style.animation = 'anim 100s';
	var animation = div.getAnimations()[0];

	return animation.ready.then(function() {
	animation.cancel();
	assert_equals(animation.startTime, null,
	'The startTime of a cancelled animation should be null');
	});
	}, 'Animation.startTime after cancelling');

	</script>
	</body>
	</html>