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 keyframes = [
  65         {opacity: '0.5', offset: 0.5},
  66         {opacity: '0.9', offset: 1},
  67         {opacity: '0', offset: 0}
  68     ];
  69     assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); });
  70 }, 'Should throw when keyframes have unsorted offsets.');
  71
  72 test(function() {
  73     var keyframes = [
  74         {opacity: '1', offset: -1},
  75         {opacity: '1', offset: NaN},
  76         {opacity: '1', offset: 2},
  77         {opacity: '0.5', offset: 1},
  78         {opacity: '0', offset: 0}
  79     ];
  80     assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); });
  81 }, 'Should throw when keyframes has offsets outside the range [0.0, 1.0].');
  82
  83 test(function() {
  84     var keyframes = [
  85         {opacity: '0.5'},
  86         {opacity: '1', offset: 1},
  87         {opacity: '0', offset: 0}
  88     ];
  89     assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); });
  90 }, 'Should throw when keyframes are not loosely sorted and any have no offset.');
  91
  92 test(function() {
  93     var keyframes = [
  94         {opacity: '0.5', offset: null},
  95         {opacity: '1', offset: 1},
  96         {opacity: '0', offset: 0}
  97     ];
  98     assert_throws('InvalidModificationError', function() { e1.animate(keyframes, durationValue); });
  99 }, 'Should throw when keyframes are not loosely sorted and any have null offset.');
 100
 101 var keyframesWithInvalid = [
 102         {width: '0px', backgroundColor: 'octarine', offset: 0},
 103         {width: '1000px', foo: 'bar', offset: 1}];
 104
 105 test(function() {
 106     var player = e3.animate(keyframesWithInvalid, {duration: durationValue, fill: 'forwards'});
 107     player.pause();
 108     player.currentTime = durationValue;
 109     assert_equals(e3Style.width, '1000px');
 110     assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)');
 111     assert_equals(e3Style.foo, undefined);
 112 }, 'Calling animate() with a pre-constructed keyframes list should start an animation. Invalid style declarations should be ignored.');
 113 </script>