1<!DOCTYPE html>
2<script src="testharness/testharness.js"></script>
3<script src="testharness/testharnessreport.js"></script>
4<script src="resources/keyframes-test.js"></script>
5<script>
6test(function() {
7  assertAnimationStyles([
8    {opacity: '0', left: '0px', easing: 'steps(2, start)'},
9    {opacity: '0.25', left: '25px'},
10    {opacity: '0.75', left: '75px'},
11  ], {
12    0: {opacity: '0.125', left: '12.5px'},
13    0.125: {opacity: '0.125', left: '12.5px'},
14    0.25: {opacity: '0.25', left: '25px'},
15    0.375: {opacity: '0.25', left: '25px'},
16    0.5: {opacity: '0.25', left: '25px'},
17    0.625: {opacity: '0.375', left: '37.5px'},
18    0.75: {opacity: '0.5', left: '50px'},
19    0.875: {opacity: '0.625', left: '62.5px'},
20    1: {opacity: '0.75', left: '75px'},
21  }, 'with easing on first keyframe');
22
23  assertAnimationStyles([
24    {opacity: '0', left: '0px'},
25    {opacity: '0.5', left: '50px', easing: 'steps(2, start)'},
26    {opacity: '0.75', left: '75px'},
27  ], {
28    0: {opacity: '0', left: '0px'},
29    0.125: {opacity: '0.125', left: '12.5px'},
30    0.25: {opacity: '0.25', left: '25px'},
31    0.375: {opacity: '0.375', left: '37.5px'},
32    0.5: {opacity: '0.625', left: '62.5px'},
33    0.625: {opacity: '0.625', left: '62.5px'},
34    0.75: {opacity: '0.75', left: '75px'},
35    0.875: {opacity: '0.75', left: '75px'},
36    1: {opacity: '0.75', left: '75px'},
37  }, 'with easing on second keyframe');
38},
39'element.animate() with eased keyframe',
40{
41  help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary',
42  assert: [
43    'element.animate() should start an animation when keyframes are specified with timing functions',
44    'for their easing property. The animation should use the given timing function between consecutive',
45    'keyframe offsets.',
46  ],
47  author: 'Alan Cutter',
48});
49
50test(function() {
51  assertAnimationStyles([
52    {opacity: '0', offset: 0, easing: 'steps(2, start)'},
53    {left: '0px', offset: 0},
54    {opacity: '0.5', left: '50px'},
55  ], {
56    0: {opacity: '0.25', left: '0px'},
57    0.25: {opacity: '0.25', left: '12.5px'},
58    0.5: {opacity: '0.5', left: '25px'},
59    0.75: {opacity: '0.5', left: '37.5px'},
60    1: {opacity: '0.5', left: '50px'},
61  });
62},
63'element.animate() with eased keyframe on single property',
64{
65  help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary',
66  assert: [
67    'element.animate() should start an animation when keyframes are specified with timing functions',
68    'for their easing property. The animation should use the given timing function only on the properties',
69    'specified in the same keyframe.',
70  ],
71  author: 'Alan Cutter',
72});
73
74test(function() {
75  assertAnimationStyles([
76    {opacity: '0', left: '0px'},
77    {opacity: '0.5', left: '50px', easing: 'steps(2, start)'},
78  ], {
79    0: {opacity: '0', left: '0px'},
80    0.25: {opacity: '0.125', left: '12.5px'},
81    0.5: {opacity: '0.25', left: '25px'},
82    0.75: {opacity: '0.375', left: '37.5px'},
83    1: {opacity: '0.5', left: '50px'},
84  });
85},
86'element.animate() with easing on last keyframe',
87{
88  help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary',
89  assert: [
90    'element.animate() should start an animation when keyframes are specified with timing functions',
91    'for their easing property. Easing on the last keyframes should have no effect on the animation.',
92  ],
93  author: 'Alan Cutter',
94});
95</script>
96