src/third_party/WebKit/LayoutTests/web-animations-api/partial-keyframes.html

   1 <!DOCTYPE html>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4
   5 <body>
   6     <div id='e'></div>
   7 </body>
   8
   9 <script>
  10 var element = document.getElementById('e');
  11
  12 test(function() {
  13     var partialKeyframes1 = [
  14         {opacity: '1', color: 'red'},
  15         {opacity: '0'}
  16         ];
  17     var partialKeyframes2 = [
  18         {opacity: '1'},
  19         {opacity: '0', color: 'red'}
  20         ];
  21     var partialKeyframes3 = [
  22         {opacity: '1', color: 'red'},
  23         {opacity: '0', color: 'foo'}
  24         ];
  25     var partialKeyframes4 = [
  26         {opacity: '1', color: 'foo'},
  27         {opacity: '0', color: 'red'}
  28         ];
  29
  30     assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes1); });
  31     assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes2); });
  32     assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes3); });
  33     assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes4); });
  34 }, 'Calling new Animation() with a mismatched keyframe property should throw a NotSupportedError.');
  35
  36 test(function() {
  37     var validKeyframes1 = [
  38         {opacity: '1'},
  39         {opacity: '0.3', offset: 0.5},
  40         {opacity: '0', offset: 1}
  41         ];
  42     var validKeyframes2 = [
  43         {width: '0px'},
  44         {height: '0px', offset: 0},
  45         {width: '10px', height: '10px', offset: 1}
  46         ];
  47
  48     assert_not_equals(new Animation(element, validKeyframes1), undefined);
  49     assert_not_equals(new Animation(element, validKeyframes2), undefined);
  50 }, 'Calling new Animation() with no offset specified for the first keyframe should create and animation.');
  51
  52 test(function() {
  53     var partialKeyframes1 = [
  54         {opacity: '1', offset: 0.1},
  55         {opacity: '0', offset: 1}
  56         ];
  57     var partialKeyframes2 = [
  58         {opacity: '1', offset: 0.1},
  59         {opacity: '0'}
  60         ];
  61
  62     assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes1); });
  63     assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes2); });
  64 }, 'Calling new Animation() with the offset of the first keyframe specified but not equal to 0 should throw a NotSupportedError.');
  65
  66 test(function() {
  67     var validKeyframes1 = [
  68         {opacity: '1', offset: 0},
  69         {opacity: '0.3', offset: 0.5},
  70         {opacity: '0'}
  71         ];
  72     var validKeyframes2 = [
  73         {width: '0px', height: '0px', offset: 0},
  74         {height: '10px', offset: 1},
  75         {width: '10px'}
  76         ];
  77
  78     assert_not_equals(new Animation(element, validKeyframes1), undefined);
  79     assert_not_equals(new Animation(element, validKeyframes2), undefined);
  80 }, 'Calling new Animation() with no offset specified for the last keyframe should create an animation.');
  81
  82 test(function() {
  83     var partialKeyframes1 = [
  84         {opacity: '1', offset: 0},
  85         {opacity: '0', offset: 0.1}
  86         ];
  87     var partialKeyframes2 = [
  88         {opacity: '1'},
  89         {opacity: '0', offset: 0.1}
  90         ];
  91
  92     assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes1); });
  93     assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes2); });
  94 }, 'Calling new Animation() with the offset of the last keyframe specified but not equal to 1 should throw a NotSupportedError.');
  95
  96 test(function() {
  97     var partialKeyframes1 = [
  98         {width: '0px', height: '0px', offset: 0},
  99         {height: '10px'},
 100         {width: '10px', offset: 1}
 101         ];
 102     var partialKeyframes2 = [
 103         {width: '0px', height: '0px', offset: 0},
 104         {height: '10px'},
 105         {width: '10px'}
 106         ];
 107
 108     // Height is missing keyframe at offset: 1
 109     assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes1); });
 110     assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes2); });
 111 }, 'Calling new Animation() with a keyframe that has no offset specified, is followed by other keyframes, ' +
 112     'and is the last keyframe for a property, should throw a NotSupportedError.');
 113
 114 test(function() {
 115     var partialKeyframes1 = [
 116         {width: '0px', offset: 0},
 117         {height: '0px'},
 118         {width: '10px', height: '10px', offset: 1}
 119         ];
 120     var partialKeyframes2 = [
 121         {width: '0px'},
 122         {height: '0px'},
 123         {width: '10px', height: '10px', offset: 1}
 124         ];
 125
 126     // Height is missing keyframe at offset: 0
 127     assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes1); });
 128     assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes2); });
 129 }, 'Calling new Animation() with a keyframe that has no offset specified, is preceded by other keyframes, ' +
 130     'and is the first keyframe for a property, should throw a NotSupportedError.');
 131 </script>