third_party/WebKit/LayoutTests/web-animations-api/w3c/3-keyframes-with-offsets.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/testharness.js"></script>
   3 <script src="../../resources/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   assert_throws('InvalidModificationError', function() {
  96     assertAnimationStyles([
  97       offsetKeyframeA,
  98       offsetKeyframeC,
  99       offsetKeyframeB,
 100     ], offsetKeyframeBExpectations, 'with unordered offsets (1)');
 101   });
 102
 103   assert_throws('InvalidModificationError', function() {
 104     assertAnimationStyles([
 105       offsetKeyframeB,
 106       offsetKeyframeA,
 107       offsetKeyframeC,
 108     ], offsetKeyframeBExpectations, 'with unordered offsets (2)');
 109   });
 110
 111   assert_throws('InvalidModificationError', function() {
 112     assertAnimationStyles([
 113       offsetKeyframeB,
 114       offsetKeyframeC,
 115       offsetKeyframeA,
 116     ], offsetKeyframeBExpectations, 'with unordered offsets (3)');
 117   });
 118
 119   assert_throws('InvalidModificationError', function() {
 120     assertAnimationStyles([
 121       offsetKeyframeC,
 122       offsetKeyframeA,
 123       offsetKeyframeB,
 124     ], offsetKeyframeBExpectations, 'with unordered offsets (4)');
 125   });
 126
 127   assert_throws('InvalidModificationError', function() {
 128     assertAnimationStyles([
 129       offsetKeyframeC,
 130       offsetKeyframeB,
 131       offsetKeyframeA,
 132     ], offsetKeyframeBExpectations, 'with unordered offsets (5)');
 133   });
 134 },
 135 'element.animate() with 3 keyframes and 3 offsets specified',
 136 {
 137   help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',
 138   assert: [
 139     'element.animate() should start an animation when three keyframes',
 140     'are provided with matching properties and all offsets specified.',
 141     'The keyframes must maintain their ordering and get distributed',
 142     'correctly.',
 143   ],
 144   author: 'Alan Cutter',
 145 });
 146 </script>