src/third_party/WebKit/LayoutTests/web-animations-api/w3c/simple-keyframes.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 test(function() {
   7   assertAnimationStyles([
   8     {opacity: '0.25', left: '25px'},
   9     {opacity: '0.75', left: '75px'},
  10   ], {
  11     0.5: {opacity: '0.5', left: '50px'},
  12   });
  13 },
  14 'element.animate() with 2 keyframes',
  15 {
  16   help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',
  17   assert: [
  18     'element.animate() should start an animation when two keyframes',
  19     'are provided with matching properties and no offsets specified.',
  20   ],
  21   author: 'Alan Cutter',
  22 });
  23
  24 test(function() {
  25   assertAnimationStyles([
  26     {opacity: '0', left: '0px'},
  27     {opacity: '0.25', left: '25px'},
  28     {opacity: '0.75', left: '75px'},
  29   ], {
  30     0.25: {opacity: '0.125', left: '12.5px'},
  31     0.75: {opacity: '0.5', left: '50px'},
  32   });
  33 },
  34 'element.animate() with 3 keyframes',
  35 {
  36   help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',
  37   assert: [
  38     'element.animate() should start an animation when three keyframes',
  39     'are provided with matching properties and no offsets specified.',
  40     'The keyframes must maintain their ordering and get distributed',
  41     'correctly.',
  42   ],
  43   author: 'Alan Cutter',
  44 });
  45 </script>