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

 <!doctype html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
 <meta charset=utf-8>
 <script src="../../../resources/testharness.js"></script>
 <script src="../../../resources/testharnessreport.js"></script>
 <script src="../resources/testcommon.js"></script>
 <style>
 @keyframes abc {
   to { transform: translate(10px) }
 }
 </style>
 <body>
 <div id="log"></div>
 <script>
 'use strict';

 promise_test(function(t) {
   var div = addDiv(t);
   div.style.animation = 'abc 100s paused';
   var animation = div.getAnimations()[0];
   var originalReadyPromise = animation.ready;

   return animation.ready.then(function() {
     div.style.animationPlayState = 'running';
     assert_not_equals(animation.ready, originalReadyPromise,
                       'After updating animation-play-state a new ready promise'
                       + ' object is created');
   });
 }, 'A new ready promise is created when setting animation-play-state: running');

 promise_test(function(t) {
   var div = addDiv(t);

   // Set up pending animation
   div.style.animation = 'abc 100s';
   var animation = div.getAnimations()[0];
   assert_true(animation.pending, 'Animation is initially pending');

   // Set up listeners on ready promise
   var retPromise = animation.ready.then(function() {
     assert_unreached('ready promise is fulfilled');
   }).catch(function(err) {
     assert_equals(err.name, 'AbortError',
                   'ready promise is rejected with AbortError');
   });

   // Now cancel the animation and flush styles
   div.style.animation = '';
   getComputedStyle(div).animation;

   return retPromise;
 }, 'ready promise is rejected when an animation is canceled by resetting'
    + ' the animation property');

 promise_test(function(t) {
   var div = addDiv(t);

   // As before, but this time instead of removing all animations, simply update
   // the list of animations. At least for Firefox, updating is a different
   // code path.

   // Set up pending animation
   div.style.animation = 'abc 100s';
   var animation = div.getAnimations()[0];
   assert_true(animation.pending, 'Animation is initially pending');

   // Set up listeners on ready promise
   var retPromise = animation.ready.then(function() {
     assert_unreached('ready promise was fulfilled');
   }).catch(function(err) {
     assert_equals(err.name, 'AbortError',
                   'ready promise is rejected with AbortError');
   });

   // Now update the animation and flush styles
   div.style.animation = 'def 100s';
   getComputedStyle(div).animation;

   return retPromise;
 }, 'ready promise is rejected when an animation is cancelled by updating'
    + ' the animation property');

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

   return animation.ready.then(function() {
     div.style.animationPlayState = 'paused';
     assert_not_equals(animation.ready, originalReadyPromise,
                       'A new Promise object is generated when setting'
                       + ' animation-play-state: paused');
   });
 }, 'A new ready promise is created when setting animation-play-state: paused');

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

   return animation.ready.then(function() {
     div.style.animationPlayState = 'paused';
     var firstReadyPromise = animation.ready;
     animation.pause();
     assert_equals(animation.ready, firstReadyPromise,
                   'Ready promise objects are identical after redundant pause');
   });
 }, 'Pausing twice re-uses the same Promise');

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

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

     // Flush style and verify we're pending at the same time
     assert_true(animation.pending, 'Animation is pending');
     var pauseReadyPromise = animation.ready;

     // Now play again immediately
     div.style.animationPlayState = 'running';
     assert_true(animation.pending, 'Animation is still pending');
     assert_equals(animation.ready, pauseReadyPromise,
                   'The pause Promise is re-used when playing while waiting'
                   + ' to pause');

     return animation.ready;
   }).then(function() {
     assert_true(!animation.pending && animation.playState === 'running',
                 'Animation is running after aborting a pause');
   });
 }, 'If a pause operation is interrupted, the ready promise is reused');

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

   return animation.ready.then(function() {
     div.style.animationPlayState = 'paused';
     return animation.ready;
   }).then(function(resolvedAnimation) {
     assert_equals(resolvedAnimation, animation,
                   'Promise received when ready Promise for a pause operation'
                   + ' is completed is the animation on which the pause was'
                   + ' performed');
   });
 }, 'When a pause is complete the Promise callback gets the correct animation');

 </script>
 </body>
	<!doctype html><!-- webkit-test-runner [ enableCSSAnimationsAndCSSTransitionsBackedByWebAnimations=true ] -->
	<meta charset=utf-8>
	<script src="../../../resources/testharness.js"></script>
	<script src="../../../resources/testharnessreport.js"></script>
	<script src="../resources/testcommon.js"></script>
	<style>
	@keyframes abc {
	to { transform: translate(10px) }
	}
	</style>
	<body>
	<div id="log"></div>
	<script>
	'use strict';

	promise_test(function(t) {
	var div = addDiv(t);
	div.style.animation = 'abc 100s paused';
	var animation = div.getAnimations()[0];
	var originalReadyPromise = animation.ready;

	return animation.ready.then(function() {
	div.style.animationPlayState = 'running';
	assert_not_equals(animation.ready, originalReadyPromise,
	'After updating animation-play-state a new ready promise'
	+ ' object is created');
	});
	}, 'A new ready promise is created when setting animation-play-state: running');

	promise_test(function(t) {
	var div = addDiv(t);

	// Set up pending animation
	div.style.animation = 'abc 100s';
	var animation = div.getAnimations()[0];
	assert_true(animation.pending, 'Animation is initially pending');

	// Set up listeners on ready promise
	var retPromise = animation.ready.then(function() {
	assert_unreached('ready promise is fulfilled');
	}).catch(function(err) {
	assert_equals(err.name, 'AbortError',
	'ready promise is rejected with AbortError');
	});

	// Now cancel the animation and flush styles
	div.style.animation = '';
	getComputedStyle(div).animation;

	return retPromise;
	}, 'ready promise is rejected when an animation is canceled by resetting'
	+ ' the animation property');

	promise_test(function(t) {
	var div = addDiv(t);

	// As before, but this time instead of removing all animations, simply update
	// the list of animations. At least for Firefox, updating is a different
	// code path.

	// Set up pending animation
	div.style.animation = 'abc 100s';
	var animation = div.getAnimations()[0];
	assert_true(animation.pending, 'Animation is initially pending');

	// Set up listeners on ready promise
	var retPromise = animation.ready.then(function() {
	assert_unreached('ready promise was fulfilled');
	}).catch(function(err) {
	assert_equals(err.name, 'AbortError',
	'ready promise is rejected with AbortError');
	});

	// Now update the animation and flush styles
	div.style.animation = 'def 100s';
	getComputedStyle(div).animation;

	return retPromise;
	}, 'ready promise is rejected when an animation is cancelled by updating'
	+ ' the animation property');

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

	return animation.ready.then(function() {
	div.style.animationPlayState = 'paused';
	assert_not_equals(animation.ready, originalReadyPromise,
	'A new Promise object is generated when setting'
	+ ' animation-play-state: paused');
	});
	}, 'A new ready promise is created when setting animation-play-state: paused');

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

	return animation.ready.then(function() {
	div.style.animationPlayState = 'paused';
	var firstReadyPromise = animation.ready;
	animation.pause();
	assert_equals(animation.ready, firstReadyPromise,
	'Ready promise objects are identical after redundant pause');
	});
	}, 'Pausing twice re-uses the same Promise');

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

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

	// Flush style and verify we're pending at the same time
	assert_true(animation.pending, 'Animation is pending');
	var pauseReadyPromise = animation.ready;

	// Now play again immediately
	div.style.animationPlayState = 'running';
	assert_true(animation.pending, 'Animation is still pending');
	assert_equals(animation.ready, pauseReadyPromise,
	'The pause Promise is re-used when playing while waiting'
	+ ' to pause');

	return animation.ready;
	}).then(function() {
	assert_true(!animation.pending && animation.playState === 'running',
	'Animation is running after aborting a pause');
	});
	}, 'If a pause operation is interrupted, the ready promise is reused');

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

	return animation.ready.then(function() {
	div.style.animationPlayState = 'paused';
	return animation.ready;
	}).then(function(resolvedAnimation) {
	assert_equals(resolvedAnimation, animation,
	'Promise received when ready Promise for a pause operation'
	+ ' is completed is the animation on which the pause was'
	+ ' performed');
	});
	}, 'When a pause is complete the Promise callback gets the correct animation');

	</script>
	</body>