OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <meta charset=utf-8> | |
3 <title>Test combinations of delay and endDelay</title> | |
4 <link rel="help" href="https://w3c.github.io/web-animations/#the-animationeffect
timing-interface"> | |
5 <script src="../resources/testharness.js"></script> | |
6 <script src="../resources/testharnessreport.js"></script> | |
7 <script src="../external/wpt/web-animations/testcommon.js"></script> | |
8 <body></body> | |
9 <script> | |
10 function testTiming({timing, expectations}, description) { | |
11 test(t => { | |
12 for (let {at, expect} of expectations) { | |
13 let target = createDiv(t); | |
14 let animation = target.animate({opacity: [0, 1]}, timing); | |
15 animation.currentTime = at; | |
16 assert_times_equal(Number(getComputedStyle(target).opacity), expect, 'at '
+ at); | |
17 animation.cancel(); | |
18 } | |
19 }, description); | |
20 } | |
21 | |
22 testTiming({ | |
23 timing: { | |
24 duration: 10, | |
25 delay: 1, | |
26 endDelay: 1, | |
27 fill: 'both', | |
28 }, | |
29 expectations: [ | |
30 { at: 0, expect: 0 }, | |
31 { at: 1, expect: 0 }, | |
32 { at: 2, expect: 0.1 }, | |
33 { at: 10, expect: 0.9 }, | |
34 { at: 11, expect: 1 }, | |
35 { at: 12, expect: 1 }, | |
36 ], | |
37 }, 'delay and endDelay both positive'); | |
38 | |
39 testTiming({ | |
40 timing: { | |
41 duration: 10, | |
42 delay: 1, | |
43 endDelay: -1, | |
44 fill: 'both', | |
45 }, | |
46 expectations: [ | |
47 { at: 0, expect: 0 }, | |
48 { at: 1, expect: 0 }, | |
49 { at: 2, expect: 0.1 }, | |
50 { at: 9, expect: 0.8 }, | |
51 { at: 10, expect: 0.9 }, | |
52 { at: 11, expect: 0.9 }, | |
53 ], | |
54 }, 'Positive delay and negative endDelay'); | |
55 | |
56 testTiming({ | |
57 timing: { | |
58 duration: 10, | |
59 delay: -1, | |
60 endDelay: 1, | |
61 fill: 'both', | |
62 }, | |
63 expectations: [ | |
64 { at: -2, expect: 0 }, | |
65 { at: -1, expect: 0 }, | |
66 { at: 0, expect: 0.1 }, | |
67 { at: 1, expect: 0.2 }, | |
68 { at: 8, expect: 0.9 }, | |
69 { at: 9, expect: 1 }, | |
70 { at: 10, expect: 1 }, | |
71 ], | |
72 }, 'Negative delay and positive endDelay'); | |
73 | |
74 testTiming({ | |
75 timing: { | |
76 duration: 10, | |
77 delay: -1, | |
78 endDelay: -1, | |
79 fill: 'both', | |
80 }, | |
81 expectations: [ | |
82 { at: -2, expect: 0 }, | |
83 { at: -1, expect: 0 }, | |
84 { at: 0, expect: 0.1 }, | |
85 { at: 1, expect: 0.2 }, | |
86 { at: 7, expect: 0.8 }, | |
87 { at: 8, expect: 0.9 }, | |
88 { at: 9, expect: 0.9 }, | |
89 { at: 10, expect: 0.9 }, | |
90 ], | |
91 }, 'delay and endDelay both negative'); | |
92 | |
93 testTiming({ | |
94 timing: { | |
95 duration: 10, | |
96 delay: 1, | |
97 endDelay: -12, | |
98 fill: 'both', | |
99 }, | |
100 expectations: [ | |
101 { at: -2, expect: 0 }, | |
102 { at: -1, expect: 0 }, | |
103 { at: 0, expect: 0 }, | |
104 { at: 5, expect: 0 }, | |
105 { at: 10, expect: 0 }, | |
106 { at: 11, expect: 0 }, | |
107 { at: 12, expect: 0 }, | |
108 ], | |
109 }, 'Negative endDelay that eclipses delay and duration'); | |
110 </script> | |
OLD | NEW |