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).player;
  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).player;
  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 var keyframesWithInvalid = [
  54         {offset: 0.1},
  55         {width: '0px', backgroundColor: 'octarine', offset: 0.2},
  56         {width: '1000px', foo: 'bar', offset: 1}
  57         ];
  58
  59 test(function() {
  60     var player = e3.animate(keyframesWithInvalid, {duration: durationValue, fill: 'forwards'}).player;
  61     player.pause();
  62     player.currentTime = durationValue;
  63     assert_equals(e3Style.width, '1000px');
  64     assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)');
  65     assert_equals(e3Style.foo, undefined);
  66 }, 'Calling animate() with a pre-constructed keyframes list should start an animation. Invalid style declarations should be ignored.');
  67 </script>