| <!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'); |
| |
| </script> |
| </body> |
