LayoutTests/imported/mozilla/css-transitions/test_animation-currenttime.html - WebKit - Git at Google

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

 .animated-div {
   margin-left: 100px;
   transition: margin-left 1000s linear 1000s;
 }

     </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: 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 ANIM_DELAY_MS = 1000000; // 1000s
 const ANIM_DUR_MS = 1000000; // 1000s

 /**
  * These helpers get the value that the currentTime needs to be set to, to put
  * an animation that uses the above ANIM_DELAY_MS and ANIM_DUR_MS values into
  * the middle of various phases or points through the active duration.
  */
 function currentTimeForBeforePhase() {
   return ANIM_DELAY_MS / 2;
 }
 function currentTimeForActivePhase() {
   return ANIM_DELAY_MS + ANIM_DUR_MS / 2;
 }
 function currentTimeForAfterPhase() {
   return ANIM_DELAY_MS + ANIM_DUR_MS + ANIM_DELAY_MS / 2;
 }
 function currentTimeForStartOfActiveInterval() {
   return ANIM_DELAY_MS;
 }
 function currentTimeForFiftyPercentThroughActiveInterval() {
   return ANIM_DELAY_MS + ANIM_DUR_MS * 0.5;
 }
 function currentTimeForEndOfActiveInterval() {
   return ANIM_DELAY_MS + ANIM_DUR_MS;
 }


 // Expected computed 'margin-left' values at points during the active interval:
 // When we assert_between_inclusive using these values we could in theory cause
 // intermittent failure due to very long delays between paints, but since the
 // active duration is 1000s long, a delay would need to be around 100s to cause
 // that. If that's happening then there are likely other issues that should be
 // fixed, so a failure to make us look into that seems like a good thing.
 const INITIAL_POSITION = 100;
 const TEN_PCT_POSITION = 110;
 const FIFTY_PCT_POSITION = 150;
 const END_POSITION = 200;


 // The terms used for the naming of the following helper functions refer to
 // terms used in the Web Animations specification for specific phases of an
 // animation. The terms can be found here:
 //
 //   http://drafts.csswg.org/web-animations/#animation-effect-phases-and-states

 // Called when currentTime is set to zero (the beginning of the start delay).
 function checkStateOnSettingCurrentTimeToZero(animation)
 {
   // We don't test animation.currentTime since our caller just set it.

   assert_equals(animation.playState, 'running',
     'Animation.playState should be "running" at the start of ' +
     'the start delay');

   assert_equals(animation.effect.target.style.animationPlayState, 'running',
     'Animation.effect.target.style.animationPlayState should be ' +
     '"running" at the start of the start delay');

   var div = animation.effect.target;
   var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
   assert_equals(marginLeft, UNANIMATED_POSITION,
                 'the computed value of margin-left should be unaffected ' +
                 'at the beginning of the start delay');
 }

 // Called when the ready Promise's callbacks should happen
 function checkStateOnReadyPromiseResolved(animation)
 {
   // the 0.0001 here is for rounding error
   assert_less_than_equal(animation.currentTime,
     animation.timeline.currentTime - animation.startTime + 0.0001,
     'Animation.currentTime should be less than the local time ' +
     'equivalent of the timeline\'s currentTime on the first paint tick ' +
     'after animation creation');

   assert_equals(animation.playState, 'running',
     'Animation.playState should be "running" on the first paint ' +
     'tick after animation creation');

   var div = animation.effect.target;
   var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
   assert_equals(marginLeft, INITIAL_POSITION,
                 'the computed value of margin-left should be unaffected ' +
                 'by an animation with a delay on ready Promise resolve');
 }

 // Called when currentTime is set to the time the active interval starts.
 function checkStateAtActiveIntervalStartTime(animation)
 {
   // We don't test animation.currentTime since our caller just set it.

   assert_equals(animation.playState, 'running',
     'Animation.playState should be "running" at the start of ' +
     'the active interval');

   var div = animation.effect.target;
   var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
   assert_between_inclusive(marginLeft, INITIAL_POSITION, TEN_PCT_POSITION,
     'the computed value of margin-left should be close to the value at the ' +
     'beginning of the animation');
 }

 function checkStateAtFiftyPctOfActiveInterval(animation)
 {
   // We don't test animation.currentTime since our caller just set it.

   var div = animation.effect.target;
   var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
   assert_equals(marginLeft, FIFTY_PCT_POSITION,
     'the computed value of margin-left should be half way through the ' +
     'animation at the midpoint of the active interval');
 }

 // Called when currentTime is set to the time the active interval ends.
 function checkStateAtActiveIntervalEndTime(animation)
 {
   // We don't test animation.currentTime since our caller just set it.

   assert_equals(animation.playState, 'finished',
     'Animation.playState should be "finished" at the end of ' +
     'the active interval');

   var div = animation.effect.target;
   var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
   assert_equals(marginLeft, END_POSITION,
     'the computed value of margin-left should be the final transitioned-to ' +
     'value at the end of the active duration');
 }

 test(function(t)
 {
   var div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition

   var animation = div.getAnimations()[0];
   assert_equals(animation.currentTime, 0, 'currentTime should be zero');
 }, 'currentTime of a newly created transition is zero');


 test(function(t)
 {
   var div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition

   var animation = div.getAnimations()[0];

   // So that animation is running instead of paused when we set currentTime:
   animation.startTime = animation.timeline.currentTime;

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


 async_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, 'transitionend');

   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition

   var animation = div.getAnimations()[0];

   animation.ready.then(t.step_func(function() {
     checkStateOnReadyPromiseResolved(animation);

     animation.currentTime = currentTimeForStartOfActiveInterval();
     checkStateAtActiveIntervalStartTime(animation);

     animation.currentTime = currentTimeForFiftyPercentThroughActiveInterval();
     checkStateAtFiftyPctOfActiveInterval(animation);

     animation.currentTime = currentTimeForEndOfActiveInterval();
     return eventWatcher.wait_for('transitionend');
   })).then(t.step_func(function() {
     checkStateAtActiveIntervalEndTime(animation);
   })).catch(t.step_func(function(reason) {
     assert_unreached(reason);
   })).then(function() {
     t.done();
   });
 }, 'Skipping forward through transition');


 test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   var eventWatcher = new EventWatcher(t, div, 'transitionend');

   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition

   var animation = div.getAnimations()[0];

   // Unlike in the case of CSS animations, we cannot skip to the end and skip
   // backwards since when we reach the end the transition effect is removed and
   // changes to the Animation object no longer affect the element. For
   // this reason we only skip forwards as far as the 50% through point.

   animation.ready.then(t.step_func(function() {
     animation.currentTime = currentTimeForFiftyPercentThroughActiveInterval();
     checkStateAtFiftyPctOfActiveInterval(animation);

     animation.currentTime = currentTimeForStartOfActiveInterval();

     // Despite going backwards from being in the active interval to being
     // before it, we now expect a 'transitionend' event because the transition
     // should go from being active to inactive.
     //
     // Calling checkStateAtActiveIntervalStartTime will check computed style,
     // causing computed style to be updated and the 'transitionend' event to
     // be dispatched synchronously. We need to call wait_for first
     // otherwise eventWatcher will assert that the event was unexpected.
     eventWatcher.wait_for('transitionend').then(function() {
       t.done();
     });
     checkStateAtActiveIntervalStartTime(animation);
   }));
 }, 'Skipping backwards through transition');


 async_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition

   var animation = div.getAnimations()[0];

   animation.ready.then(t.step_func(function() {
     var exception;
     try {
       animation.currentTime = null;
     } catch (e) {
       exception = e;
     }
     assert_equals(exception.name, 'TypeError',
       'Expect TypeError exception on trying to set ' +
       'Animation.currentTime to null');
   })).catch(t.step_func(function(reason) {
     assert_unreached(reason);
   })).then(function() {
     t.done();
   });
 }, 'Setting currentTime to null');


 async_test(function(t) {
   var div = addDiv(t, {'class': 'animated-div'});
   flushComputedStyle(div);
   div.style.marginLeft = '200px'; // initiate transition

   var animation = div.getAnimations()[0];
   var pauseTime;

   animation.ready.then(t.step_func(function() {
     assert_not_equals(animation.currentTime, null,
       'Animation.currentTime not null on ready Promise resolve');
     animation.pause();
     return animation.ready;
   })).then(t.step_func(function() {
     pauseTime = animation.currentTime;
     return waitForFrame();
   })).then(t.step_func(function() {
     assert_equals(animation.currentTime, pauseTime,
       'Animation.currentTime is unchanged after pausing');
   })).catch(t.step_func(function(reason) {
     assert_unreached(reason);
   })).then(function() {
     t.done();
   });
 }, 'Animation.currentTime after pausing');

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

	.animated-div {
	margin-left: 100px;
	transition: margin-left 1000s linear 1000s;
	}

	</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: 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 ANIM_DELAY_MS = 1000000; // 1000s
	const ANIM_DUR_MS = 1000000; // 1000s

	/**
	* These helpers get the value that the currentTime needs to be set to, to put
	* an animation that uses the above ANIM_DELAY_MS and ANIM_DUR_MS values into
	* the middle of various phases or points through the active duration.
	*/
	function currentTimeForBeforePhase() {
	return ANIM_DELAY_MS / 2;
	}
	function currentTimeForActivePhase() {
	return ANIM_DELAY_MS + ANIM_DUR_MS / 2;
	}
	function currentTimeForAfterPhase() {
	return ANIM_DELAY_MS + ANIM_DUR_MS + ANIM_DELAY_MS / 2;
	}
	function currentTimeForStartOfActiveInterval() {
	return ANIM_DELAY_MS;
	}
	function currentTimeForFiftyPercentThroughActiveInterval() {
	return ANIM_DELAY_MS + ANIM_DUR_MS * 0.5;
	}
	function currentTimeForEndOfActiveInterval() {
	return ANIM_DELAY_MS + ANIM_DUR_MS;
	}


	// Expected computed 'margin-left' values at points during the active interval:
	// When we assert_between_inclusive using these values we could in theory cause
	// intermittent failure due to very long delays between paints, but since the
	// active duration is 1000s long, a delay would need to be around 100s to cause
	// that. If that's happening then there are likely other issues that should be
	// fixed, so a failure to make us look into that seems like a good thing.
	const INITIAL_POSITION = 100;
	const TEN_PCT_POSITION = 110;
	const FIFTY_PCT_POSITION = 150;
	const END_POSITION = 200;


	// The terms used for the naming of the following helper functions refer to
	// terms used in the Web Animations specification for specific phases of an
	// animation. The terms can be found here:
	//
	// http://drafts.csswg.org/web-animations/#animation-effect-phases-and-states

	// Called when currentTime is set to zero (the beginning of the start delay).
	function checkStateOnSettingCurrentTimeToZero(animation)
	{
	// We don't test animation.currentTime since our caller just set it.

	assert_equals(animation.playState, 'running',
	'Animation.playState should be "running" at the start of ' +
	'the start delay');

	assert_equals(animation.effect.target.style.animationPlayState, 'running',
	'Animation.effect.target.style.animationPlayState should be ' +
	'"running" at the start of the start delay');

	var div = animation.effect.target;
	var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
	assert_equals(marginLeft, UNANIMATED_POSITION,
	'the computed value of margin-left should be unaffected ' +
	'at the beginning of the start delay');
	}

	// Called when the ready Promise's callbacks should happen
	function checkStateOnReadyPromiseResolved(animation)
	{
	// the 0.0001 here is for rounding error
	assert_less_than_equal(animation.currentTime,
	animation.timeline.currentTime - animation.startTime + 0.0001,
	'Animation.currentTime should be less than the local time ' +
	'equivalent of the timeline\'s currentTime on the first paint tick ' +
	'after animation creation');

	assert_equals(animation.playState, 'running',
	'Animation.playState should be "running" on the first paint ' +
	'tick after animation creation');

	var div = animation.effect.target;
	var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
	assert_equals(marginLeft, INITIAL_POSITION,
	'the computed value of margin-left should be unaffected ' +
	'by an animation with a delay on ready Promise resolve');
	}

	// Called when currentTime is set to the time the active interval starts.
	function checkStateAtActiveIntervalStartTime(animation)
	{
	// We don't test animation.currentTime since our caller just set it.

	assert_equals(animation.playState, 'running',
	'Animation.playState should be "running" at the start of ' +
	'the active interval');

	var div = animation.effect.target;
	var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
	assert_between_inclusive(marginLeft, INITIAL_POSITION, TEN_PCT_POSITION,
	'the computed value of margin-left should be close to the value at the ' +
	'beginning of the animation');
	}

	function checkStateAtFiftyPctOfActiveInterval(animation)
	{
	// We don't test animation.currentTime since our caller just set it.

	var div = animation.effect.target;
	var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
	assert_equals(marginLeft, FIFTY_PCT_POSITION,
	'the computed value of margin-left should be half way through the ' +
	'animation at the midpoint of the active interval');
	}

	// Called when currentTime is set to the time the active interval ends.
	function checkStateAtActiveIntervalEndTime(animation)
	{
	// We don't test animation.currentTime since our caller just set it.

	assert_equals(animation.playState, 'finished',
	'Animation.playState should be "finished" at the end of ' +
	'the active interval');

	var div = animation.effect.target;
	var marginLeft = parseFloat(getComputedStyle(div).marginLeft);
	assert_equals(marginLeft, END_POSITION,
	'the computed value of margin-left should be the final transitioned-to ' +
	'value at the end of the active duration');
	}

	test(function(t)
	{
	var div = addDiv(t, {'class': 'animated-div'});
	flushComputedStyle(div);
	div.style.marginLeft = '200px'; // initiate transition

	var animation = div.getAnimations()[0];
	assert_equals(animation.currentTime, 0, 'currentTime should be zero');
	}, 'currentTime of a newly created transition is zero');


	test(function(t)
	{
	var div = addDiv(t, {'class': 'animated-div'});
	flushComputedStyle(div);
	div.style.marginLeft = '200px'; // initiate transition

	var animation = div.getAnimations()[0];

	// So that animation is running instead of paused when we set currentTime:
	animation.startTime = animation.timeline.currentTime;

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


	async_test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	var eventWatcher = new EventWatcher(t, div, 'transitionend');

	flushComputedStyle(div);
	div.style.marginLeft = '200px'; // initiate transition

	var animation = div.getAnimations()[0];

	animation.ready.then(t.step_func(function() {
	checkStateOnReadyPromiseResolved(animation);

	animation.currentTime = currentTimeForStartOfActiveInterval();
	checkStateAtActiveIntervalStartTime(animation);

	animation.currentTime = currentTimeForFiftyPercentThroughActiveInterval();
	checkStateAtFiftyPctOfActiveInterval(animation);

	animation.currentTime = currentTimeForEndOfActiveInterval();
	return eventWatcher.wait_for('transitionend');
	})).then(t.step_func(function() {
	checkStateAtActiveIntervalEndTime(animation);
	})).catch(t.step_func(function(reason) {
	assert_unreached(reason);
	})).then(function() {
	t.done();
	});
	}, 'Skipping forward through transition');


	test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	var eventWatcher = new EventWatcher(t, div, 'transitionend');

	flushComputedStyle(div);
	div.style.marginLeft = '200px'; // initiate transition

	var animation = div.getAnimations()[0];

	// Unlike in the case of CSS animations, we cannot skip to the end and skip
	// backwards since when we reach the end the transition effect is removed and
	// changes to the Animation object no longer affect the element. For
	// this reason we only skip forwards as far as the 50% through point.

	animation.ready.then(t.step_func(function() {
	animation.currentTime = currentTimeForFiftyPercentThroughActiveInterval();
	checkStateAtFiftyPctOfActiveInterval(animation);

	animation.currentTime = currentTimeForStartOfActiveInterval();

	// Despite going backwards from being in the active interval to being
	// before it, we now expect a 'transitionend' event because the transition
	// should go from being active to inactive.
	//
	// Calling checkStateAtActiveIntervalStartTime will check computed style,
	// causing computed style to be updated and the 'transitionend' event to
	// be dispatched synchronously. We need to call wait_for first
	// otherwise eventWatcher will assert that the event was unexpected.
	eventWatcher.wait_for('transitionend').then(function() {
	t.done();
	});
	checkStateAtActiveIntervalStartTime(animation);
	}));
	}, 'Skipping backwards through transition');


	async_test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	flushComputedStyle(div);
	div.style.marginLeft = '200px'; // initiate transition

	var animation = div.getAnimations()[0];

	animation.ready.then(t.step_func(function() {
	var exception;
	try {
	animation.currentTime = null;
	} catch (e) {
	exception = e;
	}
	assert_equals(exception.name, 'TypeError',
	'Expect TypeError exception on trying to set ' +
	'Animation.currentTime to null');
	})).catch(t.step_func(function(reason) {
	assert_unreached(reason);
	})).then(function() {
	t.done();
	});
	}, 'Setting currentTime to null');


	async_test(function(t) {
	var div = addDiv(t, {'class': 'animated-div'});
	flushComputedStyle(div);
	div.style.marginLeft = '200px'; // initiate transition

	var animation = div.getAnimations()[0];
	var pauseTime;

	animation.ready.then(t.step_func(function() {
	assert_not_equals(animation.currentTime, null,
	'Animation.currentTime not null on ready Promise resolve');
	animation.pause();
	return animation.ready;
	})).then(t.step_func(function() {
	pauseTime = animation.currentTime;
	return waitForFrame();
	})).then(t.step_func(function() {
	assert_equals(animation.currentTime, pauseTime,
	'Animation.currentTime is unchanged after pausing');
	})).catch(t.step_func(function(reason) {
	assert_unreached(reason);
	})).then(function() {
	t.done();
	});
	}, 'Animation.currentTime after pausing');

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