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'},
9    {opacity: '0.5', left: '50px', offset: 0.5},
10    {opacity: '0', left: '0px', offset: 0.5},
11    {opacity: '0.75', left: '75px', offset: 0.5},
12    {opacity: '0.25', left: '25px'},
13  ], {
14    0.25: {opacity: '0.25', left: '25px'},
15    0.5: {opacity: '0.75', left: '75px'},
16    0.75: {opacity: '0.5', left: '50px'},
17  })
18},
19'element.animate() with keyframes at the same offset with overlapping properties',
20{
21  help: 'http://dev.w3.org/fxtf/web-animations/#the-unaccumulated-animation-value-of-a-keyframe-animation-effect',
22  assert: [
23    'element.animate() should start an animation when keyframes have equal offset values.',
24    'The overlapping properties in the equal offset keyframes should see a disjoint',
25    'interpolation pattern at the offset relative to the ordering of the keyframes.',
26  ],
27  author: 'Alan Cutter',
28});
29
30test(function() {
31  assertAnimationStyles([
32    {opacity: '0', left: '0px'},
33    {opacity: '0.75', offset: 0.5},
34    {left: '75px', offset: 0.5},
35    {opacity: '0.25', left: '25px'},
36  ], {
37    0.25: {opacity: '0.375', left: '37.5px'},
38    0.5: {opacity: '0.75', left: '75px'},
39    0.75: {opacity: '0.5', left: '50px'},
40  })
41},
42'element.animate() with keyframes at the same offset with disjoint properties',
43{
44  help: 'http://dev.w3.org/fxtf/web-animations/#the-unaccumulated-animation-value-of-a-keyframe-animation-effect',
45  assert: [
46    'element.animate() should start an animation when keyframes have equal offset values.',
47    'If the properties of the equal offset keyframes are disjoint then the animation should',
48    'be equivalent to having a single keyframe at that offset (assuming the easings are equal too).',
49  ],
50  author: 'Alan Cutter',
51});
52</script>
53