src/third_party/WebKit/LayoutTests/web-animations-api/element-animate-list-of-keyframes.html

   1 <!DOCTYPE html>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4
   5 <style>
   6 .anim {
   7     position: absolute;
   8     left: 10px;
   9     height: 90px;
  10     width: 100px;
  11     background-color: black;
  12 }
  13 </style>
  14
  15 <body>
  16     <div id='e1' class='anim'></div>
  17     <div id='e2' class='anim'></div>
  18     <div id='e3' class='anim'></div>
  19 </body>
  20
  21 <script>
  22 var e1 = document.getElementById('e1');
  23 var e2 = document.getElementById('e2');
  24 var e3 = document.getElementById('e3');
  25
  26 var e1Style = getComputedStyle(e1);
  27 var e2Style = getComputedStyle(e2);
  28 var e3Style = getComputedStyle(e3);
  29
  30 var durationValue = 1;
  31
  32 test(function() {
  33     var player = e1.animate([
  34         {left: '10px', opacity: '1', offset: 0},
  35         {left: '100px', opacity: '0', offset: 1}
  36     ], durationValue);
  37     player.pause();
  38     player.currentTime = durationValue / 2;
  39     assert_equals(e1Style.left, '55px');
  40     assert_equals(e1Style.opacity, '0.5');
  41 }, 'Calling animate() should start an animation.');
  42
  43 test(function() {
  44     var player = e2.animate([
  45         {backgroundColor: 'green', offset: 0},
  46         {backgroundColor: 'purple', offset: 1}
  47     ], durationValue);
  48     player.pause();
  49     player.currentTime = durationValue / 2;
  50     assert_equals(e2Style.backgroundColor, 'rgb(64, 64, 64)');
  51 }, 'Calling animate() should start an animation. CamelCase property names should be parsed.');
  52
  53 test(function() {
  54     var player = e1.animate([
  55         {left: '10px', offset: '0'},
  56         {left: '100px', offset: '1'}
  57     ], durationValue);
  58     player.pause();
  59     player.currentTime = durationValue / 2;
  60     assert_equals(e1Style.left, '55px');
  61 }, 'Offsets may be specified as strings.');
  62
  63 test(function() {
  64     var player = e1.animate([
  65         {opacity: '0.5', offset: 0.5},
  66         {opacity: '0.9', offset: 1},
  67         {opacity: '0', offset: 0}
  68     ], durationValue);
  69     player.pause();
  70     player.currentTime = durationValue / 4;
  71     assert_equals(e1Style.opacity, '0.25');
  72 }, 'Keyframes with offsets should become sorted by offset.');
  73
  74 test(function() {
  75     var player = e1.animate([
  76         {opacity: '1', offset: -1},
  77         {opacity: '1', offset: NaN},
  78         {opacity: '1', offset: 2},
  79         {opacity: '0.5', offset: 1},
  80         {opacity: '0', offset: 0}
  81     ], durationValue);
  82     player.pause();
  83     player.currentTime = durationValue / 2;
  84     assert_equals(e1Style.opacity, '0.25');
  85 }, 'Keyframes with offsets outside the range [0.0, 1.0] are ignored.');
  86
  87 test(function() {
  88     var keyframes = [
  89         {opacity: '0.5'},
  90         {opacity: '1', offset: 1},
  91         {opacity: '0', offset: 0}
  92     ];
  93     assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); });
  94 }, 'Should throw when keyframes are not loosely sorted and any have no offset.');
  95
  96 test(function() {
  97     var keyframes = [
  98         {opacity: '0.5', offset: null},
  99         {opacity: '1', offset: 1},
 100         {opacity: '0', offset: 0}
 101     ];
 102     assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); });
 103 }, 'Should throw when keyframes are not loosely sorted and any have null offset.');
 104
 105 var keyframesWithInvalid = [
 106         {width: '0px', backgroundColor: 'octarine', offset: 0},
 107         {width: '1000px', foo: 'bar', offset: 1}];
 108
 109 test(function() {
 110     var player = e3.animate(keyframesWithInvalid, {duration: durationValue, fill: 'forwards'});
 111     player.pause();
 112     player.currentTime = durationValue;
 113     assert_equals(e3Style.width, '1000px');
 114     assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)');
 115     assert_equals(e3Style.foo, undefined);
 116 }, 'Calling animate() with a pre-constructed keyframes list should start an animation. Invalid style declarations should be ignored.');
 117 </script>