web-animations/interfaces/Animation/cancel.html - external/github.com/web-platform-tests/wpt - Git at Google

 <!DOCTYPE html>
 <meta charset=utf-8>
 <title>Animation.cancel</title>
 <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-cancel">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../testcommon.js"></script>
 <body>
 <div id="log"></div>
 <script>
 'use strict';

 promise_test(t => {
   const div = createDiv(t);
   const animation = div.animate(
     { transform: ['translate(100px)', 'translate(100px)'] },
     100 * MS_PER_SEC
   );
   return animation.ready.then(() => {
     assert_not_equals(getComputedStyle(div).transform, 'none',
                       'transform style is animated before cancelling');
     animation.cancel();
     assert_equals(getComputedStyle(div).transform, 'none',
                   'transform style is no longer animated after cancelling');
   });
 }, 'Animated style is cleared after calling Animation.cancel()');

 test(t => {
   const div = createDiv(t);
   const animation = div.animate({ marginLeft: ['100px', '200px'] },
                                 100 * MS_PER_SEC);
   animation.effect.updateTiming({ easing: 'linear' });
   animation.cancel();
   assert_equals(getComputedStyle(div).marginLeft, '0px',
                 'margin-left style is not animated after cancelling');

   animation.currentTime = 50 * MS_PER_SEC;
   assert_equals(getComputedStyle(div).marginLeft, '150px',
                 'margin-left style is updated when cancelled animation is'
                 + ' seeked');
 }, 'After cancelling an animation, it can still be seeked');

 promise_test(t => {
   const div = createDiv(t);
   const animation = div.animate({ marginLeft:['100px', '200px'] },
                                 100 * MS_PER_SEC);
   return animation.ready.then(() => {
     animation.cancel();
     assert_equals(getComputedStyle(div).marginLeft, '0px',
                   'margin-left style is not animated after cancelling');
     animation.play();
     assert_equals(getComputedStyle(div).marginLeft, '100px',
                   'margin-left style is animated after re-starting animation');
     return animation.ready;
   }).then(() => {
     assert_equals(animation.playState, 'running',
                   'Animation succeeds in running after being re-started');
   });
 }, 'After cancelling an animation, it can still be re-used');

 promise_test(async t => {
   for (const type of ["resolve", "reject"]) {
     const anim = new Animation();

     let isThenGet = false;
     let isThenCalled = false;
     let resolveFinished;
     let rejectFinished;
     const thenCalledPromise = new Promise(resolveThenCalledPromise => {
       // Make `anim` thenable.
       Object.defineProperty(anim, "then", {
         get() {
           isThenGet = true;
           return function(resolve, reject) {
             isThenCalled = true;
             resolveThenCalledPromise(true);
             resolveFinished = resolve;
             rejectFinished = reject;
           };
         },
       });
     });

     // Lazily create finished promise.
     const finishedPromise = anim.finished;

     assert_false(isThenGet, "then property shouldn't be accessed yet");

     // Resolve finished promise with `anim`, that gets `then`, and
     // calls in the thenable job.
     anim.finish();

     assert_true(isThenGet, "then property should be accessed");
     assert_false(isThenCalled, "then property shouldn't be called yet");

     // Reject finished promise.
     // This should be ignored.
     anim.cancel();

     // Wait for the thenable job.
     await thenCalledPromise;

     assert_true(isThenCalled, "then property should be called");

     const dummyPromise = new Promise(resolve => {
       step_timeout(() => {
         resolve("dummy");
       }, 100);
     });
     const dummy = await Promise.race([finishedPromise, dummyPromise]);
     assert_equals(dummy, "dummy", "finishedPromise shouldn't be settled yet");

     if (type === "resolve") {
       resolveFinished("hello");
       const finished = await finishedPromise;
       assert_equals(finished, "hello",
                     "finishedPromise should be resolved with given value");
     } else {
       rejectFinished("hello");
       try {
         await finishedPromise;
         assert_unreached("finishedPromise should be rejected")
       } catch (e) {
         assert_equals(e, "hello",
                       "finishedPromise should be rejected with given value");
       }
     }
   }
 }, "Animation.finished promise should not be rejected by cancel method once "
  + "it is resolved with inside finish method");

 </script>
 </body>
	<!DOCTYPE html>
	<meta charset=utf-8>
	<title>Animation.cancel</title>
	<link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-cancel">
	<script src="/resources/testharness.js"></script>
	<script src="/resources/testharnessreport.js"></script>
	<script src="../../testcommon.js"></script>
	<body>
	<div id="log"></div>
	<script>
	'use strict';

	promise_test(t => {
	const div = createDiv(t);
	const animation = div.animate(
	{ transform: ['translate(100px)', 'translate(100px)'] },
	100 * MS_PER_SEC
	);
	return animation.ready.then(() => {
	assert_not_equals(getComputedStyle(div).transform, 'none',
	'transform style is animated before cancelling');
	animation.cancel();
	assert_equals(getComputedStyle(div).transform, 'none',
	'transform style is no longer animated after cancelling');
	});
	}, 'Animated style is cleared after calling Animation.cancel()');

	test(t => {
	const div = createDiv(t);
	const animation = div.animate({ marginLeft: ['100px', '200px'] },
	100 * MS_PER_SEC);
	animation.effect.updateTiming({ easing: 'linear' });
	animation.cancel();
	assert_equals(getComputedStyle(div).marginLeft, '0px',
	'margin-left style is not animated after cancelling');

	animation.currentTime = 50 * MS_PER_SEC;
	assert_equals(getComputedStyle(div).marginLeft, '150px',
	'margin-left style is updated when cancelled animation is'
	+ ' seeked');
	}, 'After cancelling an animation, it can still be seeked');

	promise_test(t => {
	const div = createDiv(t);
	const animation = div.animate({ marginLeft:['100px', '200px'] },
	100 * MS_PER_SEC);
	return animation.ready.then(() => {
	animation.cancel();
	assert_equals(getComputedStyle(div).marginLeft, '0px',
	'margin-left style is not animated after cancelling');
	animation.play();
	assert_equals(getComputedStyle(div).marginLeft, '100px',
	'margin-left style is animated after re-starting animation');
	return animation.ready;
	}).then(() => {
	assert_equals(animation.playState, 'running',
	'Animation succeeds in running after being re-started');
	});
	}, 'After cancelling an animation, it can still be re-used');

	promise_test(async t => {
	for (const type of ["resolve", "reject"]) {
	const anim = new Animation();

	let isThenGet = false;
	let isThenCalled = false;
	let resolveFinished;
	let rejectFinished;
	const thenCalledPromise = new Promise(resolveThenCalledPromise => {
	// Make `anim` thenable.
	Object.defineProperty(anim, "then", {
	get() {
	isThenGet = true;
	return function(resolve, reject) {
	isThenCalled = true;
	resolveThenCalledPromise(true);
	resolveFinished = resolve;
	rejectFinished = reject;
	};
	},
	});
	});

	// Lazily create finished promise.
	const finishedPromise = anim.finished;

	assert_false(isThenGet, "then property shouldn't be accessed yet");

	// Resolve finished promise with `anim`, that gets `then`, and
	// calls in the thenable job.
	anim.finish();

	assert_true(isThenGet, "then property should be accessed");
	assert_false(isThenCalled, "then property shouldn't be called yet");

	// Reject finished promise.
	// This should be ignored.
	anim.cancel();

	// Wait for the thenable job.
	await thenCalledPromise;

	assert_true(isThenCalled, "then property should be called");

	const dummyPromise = new Promise(resolve => {
	step_timeout(() => {
	resolve("dummy");
	}, 100);
	});
	const dummy = await Promise.race([finishedPromise, dummyPromise]);
	assert_equals(dummy, "dummy", "finishedPromise shouldn't be settled yet");

	if (type === "resolve") {
	resolveFinished("hello");
	const finished = await finishedPromise;
	assert_equals(finished, "hello",
	"finishedPromise should be resolved with given value");
	} else {
	rejectFinished("hello");
	try {
	await finishedPromise;
	assert_unreached("finishedPromise should be rejected")
	} catch (e) {
	assert_equals(e, "hello",
	"finishedPromise should be rejected with given value");
	}
	}
	}
	}, "Animation.finished promise should not be rejected by cancel method once "
	+ "it is resolved with inside finish method");

	</script>
	</body>