[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 / AnimationEffectTiming / easing.html
1 <!DOCTYPE html>
2 <meta charset=utf-8>
3 <title>AnimationEffectTiming.easing</title>
4 <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-animationeffecttiming-easing">
5 <script src="/resources/testharness.js"></script>
6 <script src="/resources/testharnessreport.js"></script>
7 <script src="../../testcommon.js"></script>
8 <script src="../../resources/easing-tests.js"></script>
9 <body>
10 <div id="log"></div>
11 <script>
12 'use strict';
13
14 test(t => {
15   const anim = createDiv(t).animate(null);
16   assert_equals(anim.effect.timing.easing, 'linear');
17 }, 'Has the default value \'linear\'');
18
19 function assert_progress(animation, currentTime, easingFunction) {
20   animation.currentTime = currentTime;
21   const portion = currentTime / animation.effect.timing.duration;
22   assert_approx_equals(animation.effect.getComputedTiming().progress,
23                        easingFunction(portion),
24                        0.01,
25                        'The progress of the animation should be approximately'
26                        + ` ${easingFunction(portion)} at ${currentTime}ms`);
27 }
28
29 for (const options of gEasingTests) {
30   test(t => {
31     const target = createDiv(t);
32     const anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
33                                 { duration: 1000 * MS_PER_SEC,
34                                   fill: 'forwards' });
35     anim.effect.timing.easing = options.easing;
36     assert_equals(anim.effect.timing.easing,
37                   options.serialization || options.easing);
38
39     const easing = options.easingFunction;
40     assert_progress(anim, 0, easing);
41     assert_progress(anim, 250 * MS_PER_SEC, easing);
42     assert_progress(anim, 500 * MS_PER_SEC, easing);
43     assert_progress(anim, 750 * MS_PER_SEC, easing);
44     assert_progress(anim, 1000 * MS_PER_SEC, easing);
45   }, options.desc);
46 }
47
48 for (const invalidEasing of gInvalidEasings) {
49   test(t => {
50     const div = createDiv(t);
51     const anim = div.animate({ opacity: [ 0, 1 ] }, 100 * MS_PER_SEC);
52     assert_throws({ name: 'TypeError' },
53                   () => {
54                     anim.effect.timing.easing = invalidEasing;
55                   });
56   }, `Throws on invalid easing: '${invalidEasing}'`);
57 }
58
59 for (const easing of gRoundtripEasings) {
60   test(t => {
61     const anim = createDiv(t).animate(null);
62     anim.effect.timing.easing = easing;
63     assert_equals(anim.effect.timing.easing, easing);
64   }, `Canonical easing '${easing}' is returned as set`);
65 }
66
67 test(t => {
68   const delay = 1000 * MS_PER_SEC;
69
70   const target = createDiv(t);
71   const anim = target.animate([ { opacity: 0 }, { opacity: 1 } ],
72                               { duration: 1000 * MS_PER_SEC,
73                                 fill: 'both',
74                                 delay: delay,
75                                 easing: 'steps(2, start)' });
76
77   anim.effect.timing.easing = 'steps(2, end)';
78   assert_equals(anim.effect.getComputedTiming().progress, 0,
79                 'easing replace to steps(2, end) at before phase');
80
81   anim.currentTime = delay + 750 * MS_PER_SEC;
82   assert_equals(anim.effect.getComputedTiming().progress, 0.5,
83                 'change currentTime to active phase');
84
85   anim.effect.timing.easing = 'steps(2, start)';
86   assert_equals(anim.effect.getComputedTiming().progress, 1,
87                 'easing replace to steps(2, start) at active phase');
88
89   anim.currentTime = delay + 1500 * MS_PER_SEC;
90   anim.effect.timing.easing = 'steps(2, end)';
91   assert_equals(anim.effect.getComputedTiming().progress, 1,
92                 'easing replace to steps(2, end) again at after phase');
93 }, 'Allows the easing to be changed while the animation is in progress');
94
95 </script>
96 </body>