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     e1.animate([
  34         {left: '10px', opacity: '1', offset: 0},
  35         {left: '100px', opacity: '0', offset: 1}
  36     ], durationValue);
  37     internals.pauseAnimations(durationValue / 2);
  38     assert_equals(e1Style.left, '55px');
  39     assert_equals(e1Style.opacity, '0.5');
  40 }, 'Calling animate() should start an animation.');
  41
  42 test(function() {
  43     e2.animate([
  44         {backgroundColor: 'green', offset: 0},
  45         {backgroundColor: 'purple', offset: 1}
  46     ], durationValue);
  47     internals.pauseAnimations(durationValue / 2);
  48     assert_equals(e2Style.backgroundColor, 'rgb(64, 64, 64)');
  49 }, 'Calling animate() should start an animation. CamelCase property names should be parsed.');
  50
  51 var keyframesWithInvalid = [
  52         {offset: 0.1},
  53         {width: '0px', backgroundColor: 'octarine', offset: 0.2},
  54         {width: '1000px', foo: 'bar', offset: 1}
  55         ];
  56
  57 test(function() {
  58     e3.animate(keyframesWithInvalid, {duration: durationValue, fill: 'forwards'});
  59     internals.pauseAnimations(durationValue);
  60     assert_equals(e3Style.width, '1000px');
  61     assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)');
  62     assert_equals(e3Style.foo, undefined);
  63 }, 'Calling animate() with a pre-constructed keyframes list should start an animation. Invalid style declarations should be ignored.');
  64 </script>