third_party/WebKit/LayoutTests/web-animations-api/eased-keyframes.html

   1 <!DOCTYPE html>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4 <script src="w3c/resources/keyframes-test.js"></script>
   5 <script>
   6 // FIXME: Remove the need for and use of this function.
   7 // Currently our animation timeline is not stable during page load script execution.
   8 // By deferring the tests to requestAnimationFrame() we can get a stable timeline and
   9 // avoid flaky test results.
  10 function testInRAF(testFunction, description, properties) {
  11   async_test(function(testHandle) {
  12     requestAnimationFrame(function() {
  13       testHandle.step(testFunction);
  14       testHandle.done();
  15     })
  16   }, description, properties);
  17 }
  18
  19 testInRAF(function() {
  20   assertAnimationStyles([
  21     {opacity: '0', left: '0px', easing: 'steps(2, start)'},
  22     {opacity: '0.25', left: '25px'},
  23     {opacity: '0.75', left: '75px'},
  24   ], {
  25     0: {opacity: '0.125', left: '12.5px'},
  26     0.125: {opacity: '0.125', left: '12.5px'},
  27     0.25: {opacity: '0.25', left: '25px'},
  28     0.375: {opacity: '0.25', left: '25px'},
  29     0.5: {opacity: '0.25', left: '25px'},
  30     0.625: {opacity: '0.375', left: '37.5px'},
  31     0.75: {opacity: '0.5', left: '50px'},
  32     0.875: {opacity: '0.625', left: '62.5px'},
  33     1: {opacity: '0.75', left: '75px'},
  34   }, 'with easing on first keyframe');
  35
  36   assertAnimationStyles([
  37     {opacity: '0', left: '0px'},
  38     {opacity: '0.5', left: '50px', easing: 'steps(2, start)'},
  39     {opacity: '0.75', left: '75px'},
  40   ], {
  41     0: {opacity: '0', left: '0px'},
  42     0.125: {opacity: '0.125', left: '12.5px'},
  43     0.25: {opacity: '0.25', left: '25px'},
  44     0.375: {opacity: '0.375', left: '37.5px'},
  45     0.5: {opacity: '0.625', left: '62.5px'},
  46     0.625: {opacity: '0.625', left: '62.5px'},
  47     0.75: {opacity: '0.75', left: '75px'},
  48     0.875: {opacity: '0.75', left: '75px'},
  49     1: {opacity: '0.75', left: '75px'},
  50   }, 'with easing on second keyframe');
  51 },
  52 'element.animate() with eased keyframe',
  53 {
  54   help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary',
  55   assert: [
  56     'element.animate() should start an animation when keyframes are specified with timing functions',
  57     'for their easing property. The animation should use the given timing function between consecutive',
  58     'keyframe offsets.',
  59   ],
  60   author: 'Alan Cutter',
  61 });
  62
  63 testInRAF(function() {
  64   assertAnimationStyles([
  65     {opacity: '0', offset: 0, easing: 'steps(2, start)'},
  66     {left: '0px', offset: 0},
  67     {opacity: '0.5', left: '50px'},
  68   ], {
  69     0: {opacity: '0.25', left: '0px'},
  70     0.25: {opacity: '0.25', left: '12.5px'},
  71     0.5: {opacity: '0.5', left: '25px'},
  72     0.75: {opacity: '0.5', left: '37.5px'},
  73     1: {opacity: '0.5', left: '50px'},
  74   });
  75 },
  76 'element.animate() with eased keyframe on single property',
  77 {
  78   help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary',
  79   assert: [
  80     'element.animate() should start an animation when keyframes are specified with timing functions',
  81     'for their easing property. The animation should use the given timing function only on the properties',
  82     'specified in the same keyframe.',
  83   ],
  84   author: 'Alan Cutter',
  85 });
  86
  87 testInRAF(function() {
  88   assertAnimationStyles([
  89     {opacity: '0', left: '0px'},
  90     {opacity: '0.5', left: '50px', easing: 'steps(2, start)'},
  91   ], {
  92     0: {opacity: '0', left: '0px'},
  93     0.25: {opacity: '0.125', left: '12.5px'},
  94     0.5: {opacity: '0.25', left: '25px'},
  95     0.75: {opacity: '0.375', left: '37.5px'},
  96     1: {opacity: '0.5', left: '50px'},
  97   });
  98 },
  99 'element.animate() with easing on last keyframe',
 100 {
 101   help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary',
 102   assert: [
 103     'element.animate() should start an animation when keyframes are specified with timing functions',
 104     'for their easing property. Easing on the last keyframes should have no effect on the animation.',
 105   ],
 106   author: 'Alan Cutter',
 107 });
 108 </script>