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.25', left: '25px', offset: 0},
9    {opacity: '0.75', left: '75px'},
10  ], {
11    0.5: {opacity: '0.5', left: '50px'},
12  });
13  assertAnimationStyles([
14    {opacity: '0.25', left: '25px'},
15    {opacity: '0.75', left: '75px', offset: 1},
16  ], {
17    0.5: {opacity: '0.5', left: '50px'},
18  });
19},
20'element.animate() with 2 keyframes and 1 offset specified',
21{
22  help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',
23  assert: [
24    'element.animate() should start an animation when two keyframes',
25    'are provided with matching properties and one offset is specified.',
26  ],
27  author: 'Alan Cutter',
28});
29
30test(function() {
31  assertAnimationStyles([
32    {opacity: '0.25', left: '25px', offset: 0},
33    {opacity: '0.75', left: '75px', offset: 1},
34  ], {
35    0.5: {opacity: '0.5', left: '50px'},
36  });
37
38  assert_throws('InvalidModificationError', function() {
39    assertAnimationStyles([
40      {opacity: '0.75', left: '75px', offset: 1},
41      {opacity: '0.25', left: '25px', offset: 0},
42    ], {
43      0.5: {opacity: '0.5', left: '50px'},
44    });
45  });
46},
47'element.animate() with 2 keyframes and 2 offsets specified',
48{
49  help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',
50  assert: [
51    'element.animate() should start an animation when two keyframes',
52    'are provided with matching properties and both offsets specified.',
53  ],
54  author: 'Alan Cutter',
55});
56</script>
57