[Web Animations] Update WPT tests and move them to imported/w3c/web-platform-tests
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / web-animations / interfaces / Animation / cancel.html
1 <!DOCTYPE html>
2 <meta charset=utf-8>
3 <title>Animation.cancel</title>
4 <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animation-cancel">
5 <script src="/resources/testharness.js"></script>
6 <script src="/resources/testharnessreport.js"></script>
7 <script src="../../testcommon.js"></script>
8 <body>
9 <div id="log"></div>
10 <script>
11 'use strict';
12
13 promise_test(t => {
14   const div = createDiv(t);
15   const animation = div.animate(
16     { transform: ['translate(100px)', 'translate(100px)'] },
17     100 * MS_PER_SEC
18   );
19   return animation.ready.then(() => {
20     assert_not_equals(getComputedStyle(div).transform, 'none',
21                       'transform style is animated before cancelling');
22     animation.cancel();
23     assert_equals(getComputedStyle(div).transform, 'none',
24                   'transform style is no longer animated after cancelling');
25   });
26 }, 'Animated style is cleared after calling Animation.cancel()');
27
28 test(t => {
29   const div = createDiv(t);
30   const animation = div.animate({ marginLeft: ['100px', '200px'] },
31                                 100 * MS_PER_SEC);
32   animation.effect.timing.easing = 'linear';
33   animation.cancel();
34   assert_equals(getComputedStyle(div).marginLeft, '0px',
35                 'margin-left style is not animated after cancelling');
36
37   animation.currentTime = 50 * MS_PER_SEC;
38   assert_equals(getComputedStyle(div).marginLeft, '150px',
39                 'margin-left style is updated when cancelled animation is'
40                 + ' seeked');
41 }, 'After cancelling an animation, it can still be seeked');
42
43 promise_test(t => {
44   const div = createDiv(t);
45   const animation = div.animate({ marginLeft:['100px', '200px'] },
46                                 100 * MS_PER_SEC);
47   return animation.ready.then(() => {
48     animation.cancel();
49     assert_equals(getComputedStyle(div).marginLeft, '0px',
50                   'margin-left style is not animated after cancelling');
51     animation.play();
52     assert_equals(getComputedStyle(div).marginLeft, '100px',
53                   'margin-left style is animated after re-starting animation');
54     return animation.ready;
55   }).then(() => {
56     assert_equals(animation.playState, 'running',
57                   'Animation succeeds in running after being re-started');
58   });
59 }, 'After cancelling an animation, it can still be re-used');
60
61 </script>
62 </body>