Home | History | Annotate | Download | only in blink 
      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>
      6 var keyframeA = {opacity: '0.5', left: '50px'};
      7 var keyframeB = {opacity: '0', left: '0px'};
      8 var keyframeC = {opacity: '0.75', left: '75px'};
      9 
     10 var keyframeBExpectations = {
     11   0: {opacity: '0.5', left: '50px'},
     12   0.25: {opacity: '0.25', left: '25px'},
     13   0.5: {opacity: '0', left: '0px'}, // Corresponds to keyframeB (offset unspecified).
     14   0.75: {opacity: '0.375', left: '37.5px'},
     15   1: {opacity: '0.75', left: '75px'},
     16 };
     17 
     18 var offsetKeyframeA = {opacity: keyframeA.opacity, left: keyframeA.left, offset: 0};
     19 var offsetKeyframeB = {opacity: keyframeB.opacity, left: keyframeB.left, offset: 0.25};
     20 var offsetKeyframeC = {opacity: keyframeC.opacity, left: keyframeC.left, offset: 1};
     21 
     22 var offsetKeyframeBExpectations = {
     23   0: {opacity: '0.5', left: '50px'},
     24   0.125: {opacity: '0.25', left: '25px'},
     25   0.25: {opacity: '0', left: '0px'}, // Corresponds to offsetKeyframeB (offset 0.25).
     26   0.5: {opacity: '0.25', left: '25px'},
     27   0.75: {opacity: '0.5', left: '50px'},
     28   1: {opacity: '0.75', left: '75px'},
     29 };
     30 
     31 test(function() {
     32   assertAnimationStyles([
     33     offsetKeyframeA,
     34     keyframeB,
     35     keyframeC,
     36   ], keyframeBExpectations, 'with first offset specified');
     37   assertAnimationStyles([
     38     keyframeA,
     39     offsetKeyframeB,
     40     keyframeC,
     41   ], offsetKeyframeBExpectations, 'with second offset specified');
     42   assertAnimationStyles([
     43     keyframeA,
     44     keyframeB,
     45     offsetKeyframeC,
     46   ], keyframeBExpectations, 'with third offset specified');
     47 },
     48 'element.animate() with 3 keyframes and 1 offset specified',
     49 {
     50   help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',
     51   assert: [
     52     'element.animate() should start an animation when three keyframes',
     53     'are provided with matching properties and one offset specified.',
     54     'The keyframes must maintain their ordering and get distributed',
     55     'correctly.',
     56   ],
     57   author: 'Alan Cutter',
     58 });
     59 
     60 test(function() {
     61   assertAnimationStyles([
     62     keyframeA,
     63     offsetKeyframeB,
     64     offsetKeyframeC,
     65   ], offsetKeyframeBExpectations, 'with first offset unspecified');
     66   assertAnimationStyles([
     67     offsetKeyframeA,
     68     keyframeB,
     69     offsetKeyframeC,
     70   ], keyframeBExpectations, 'with second offset unspecified');
     71   assertAnimationStyles([
     72     offsetKeyframeA,
     73     offsetKeyframeB,
     74     keyframeC,
     75   ], offsetKeyframeBExpectations, 'with third offset unspecified');
     76 },
     77 'element.animate() with 3 keyframes and 2 offsets specified',
     78 {
     79   help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',
     80   assert: [
     81     'element.animate() should start an animation when three keyframes',
     82     'are provided with matching properties and two offsets specified.',
     83     'The keyframes must maintain their ordering and get distributed',
     84     'correctly.',
     85   ],
     86   author: 'Alan Cutter',
     87 });
     88 
     89 test(function() {
     90   assertAnimationStyles([
     91     offsetKeyframeA,
     92     offsetKeyframeB,
     93     offsetKeyframeC,
     94   ], offsetKeyframeBExpectations, 'with ordered offsets');
     95 
     96   assert_throws('InvalidModificationError', function() {
     97     assertAnimationStyles([
     98       offsetKeyframeA,
     99       offsetKeyframeC,
    100       offsetKeyframeB,
    101     ], offsetKeyframeBExpectations, 'with unordered offsets (1)');
    102   });
    103 
    104   assert_throws('InvalidModificationError', function() {
    105     assertAnimationStyles([
    106       offsetKeyframeB,
    107       offsetKeyframeA,
    108       offsetKeyframeC,
    109     ], offsetKeyframeBExpectations, 'with unordered offsets (2)');
    110   });
    111 
    112   assert_throws('InvalidModificationError', function() {
    113     assertAnimationStyles([
    114       offsetKeyframeB,
    115       offsetKeyframeC,
    116       offsetKeyframeA,
    117     ], offsetKeyframeBExpectations, 'with unordered offsets (3)');
    118   });
    119 
    120   assert_throws('InvalidModificationError', function() {
    121     assertAnimationStyles([
    122       offsetKeyframeC,
    123       offsetKeyframeA,
    124       offsetKeyframeB,
    125     ], offsetKeyframeBExpectations, 'with unordered offsets (4)');
    126   });
    127 
    128   assert_throws('InvalidModificationError', function() {
    129     assertAnimationStyles([
    130       offsetKeyframeC,
    131       offsetKeyframeB,
    132       offsetKeyframeA,
    133     ], offsetKeyframeBExpectations, 'with unordered offsets (5)');
    134   });
    135 },
    136 'element.animate() with 3 keyframes and 3 offsets specified',
    137 {
    138   help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',
    139   assert: [
    140     'element.animate() should start an animation when three keyframes',
    141     'are provided with matching properties and all offsets specified.',
    142     'The keyframes must maintain their ordering and get distributed',
    143     'correctly.',
    144   ],
    145   author: 'Alan Cutter',
    146 });
    147 </script>
    148