third_party/WebKit/LayoutTests/web-animations-api/w3c/2-keyframes-with-offsets.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', offset: 0},
   9     {opacity: '0.75', left: '75px'},
  10   ], {
  11     0.5: {opacity: '0.5', left: '50px'},
  12   });
  13   assertAnimationStyles([
  14     {opacity: '0.25', left: '25px'},
  15     {opacity: '0.75', left: '75px', offset: 1},
  16   ], {
  17     0.5: {opacity: '0.5', left: '50px'},
  18   });
  19 },
  20 'element.animate() with 2 keyframes and 1 offset specified',
  21 {
  22   help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',
  23   assert: [
  24     'element.animate() should start an animation when two keyframes',
  25     'are provided with matching properties and one offset is specified.',
  26   ],
  27   author: 'Alan Cutter',
  28 });
  29
  30 test(function() {
  31   assertAnimationStyles([
  32     {opacity: '0.25', left: '25px', offset: 0},
  33     {opacity: '0.75', left: '75px', offset: 1},
  34   ], {
  35     0.5: {opacity: '0.5', left: '50px'},
  36   });
  37
  38   assert_throws('InvalidModificationError', function() {
  39     assertAnimationStyles([
  40       {opacity: '0.75', left: '75px', offset: 1},
  41       {opacity: '0.25', left: '25px', offset: 0},
  42     ], {
  43       0.5: {opacity: '0.5', left: '50px'},
  44     });
  45   });
  46 },
  47 'element.animate() with 2 keyframes and 2 offsets specified',
  48 {
  49   help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects',
  50   assert: [
  51     'element.animate() should start an animation when two keyframes',
  52     'are provided with matching properties and both offsets specified.',
  53   ],
  54   author: 'Alan Cutter',
  55 });
  56 </script>