Chromium Code Reviews| Index: LayoutTests/web-animations-api/partial-keyframes.html |
| diff --git a/LayoutTests/web-animations-api/partial-keyframes.html b/LayoutTests/web-animations-api/partial-keyframes.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..9c94ab878d77951bb67b6c839c09e67ce78afb00 |
| --- /dev/null |
| +++ b/LayoutTests/web-animations-api/partial-keyframes.html |
| @@ -0,0 +1,131 @@ |
| +<!DOCTYPE html> |
| +<script src="../resources/testharness.js"></script> |
| +<script src="../resources/testharnessreport.js"></script> |
| + |
| +<body> |
| + <div id='e'></div> |
| +</body> |
| + |
| +<script> |
| +var element = document.getElementById('e'); |
| + |
| +test(function() { |
| + var partialKeyframes1 = [ |
| + {opacity: '1', color: 'red'}, |
| + {opacity: '0'} |
| + ]; |
| + var partialKeyframes2 = [ |
| + {opacity: '1'}, |
| + {opacity: '0', color: 'red'} |
| + ]; |
| + var partialKeyframes3 = [ |
| + {opacity: '1', color: 'red'}, |
| + {opacity: '0', color: 'foo'} |
| + ]; |
| + var partialKeyframes4 = [ |
| + {opacity: '1', color: 'foo'}, |
| + {opacity: '0', color: 'red'} |
| + ]; |
| + |
| + assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes1); }); |
| + assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes2); }); |
| + assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes3); }); |
| + assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes4); }); |
| +}, 'Calling new Animation() with a mismatched keyframe property should throw a NotSupportedError.'); |
| + |
| +test(function() { |
| + var validKeyframes1 = [ |
| + {opacity: '1'}, |
| + {opacity: '0.3', offset: 0.5}, |
| + {opacity: '0', offset: 1} |
| + ]; |
| + var validKeyframes2 = [ |
| + {width: '0px'}, |
| + {height: '0px', offset: 0}, |
| + {width: '10px', height: '10px', offset: 1} |
| + ]; |
| + |
| + assert_not_equals(new Animation(element, validKeyframes1), undefined); |
| + assert_not_equals(new Animation(element, validKeyframes2), undefined); |
| +}, 'Calling new Animation() with no offset specified for the first keyframe should create and animation.'); |
| + |
| +test(function() { |
| + var partialKeyframes1 = [ |
| + {opacity: '1', offset: 0.1}, |
| + {opacity: '0', offset: 1} |
| + ]; |
| + var partialKeyframes2 = [ |
| + {opacity: '1', offset: 0.1}, |
| + {opacity: '0'} |
| + ]; |
| + |
| + assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes1); }); |
| + assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes2); }); |
| +}, 'Calling new Animation() with the offset of the first keyframe specified but not equal to 0 should throw a NotSupportedError.'); |
| + |
| +test(function() { |
| + var validKeyframes1 = [ |
| + {opacity: '1', offset: 0}, |
| + {opacity: '0.3', offset: 0.5}, |
| + {opacity: '0'} |
| + ]; |
| + var validKeyframes2 = [ |
| + {width: '0px', height: '0px', offset: 0}, |
| + {height: '10px', offset: 1}, |
| + {width: '10px'} |
| + ]; |
| + |
| + assert_not_equals(new Animation(element, validKeyframes1), undefined); |
| + assert_not_equals(new Animation(element, validKeyframes2), undefined); |
| +}, 'Calling new Animation() with no offset specified for the last keyframe should create an animation.'); |
|
shans
2014/03/19 20:43:27
unless that is the only keyframe for some property
|
| + |
| +test(function() { |
| + var partialKeyframes1 = [ |
| + {opacity: '1', offset: 0}, |
| + {opacity: '0', offset: 0.1} |
| + ]; |
| + var partialKeyframes2 = [ |
| + {opacity: '1'}, |
| + {opacity: '0', offset: 0.1} |
| + ]; |
| + |
| + assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes1); }); |
| + assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes2); }); |
| +}, 'Calling new Animation() with the offset of the last keyframe specified but not equal to 1 should throw a NotSupportedError.'); |
| + |
| +test(function() { |
| + var partialKeyframes1 = [ |
| + {width: '0px', height: '0px', offset: 0}, |
| + {height: '10px'}, |
| + {width: '10px', offset: 1} |
| + ]; |
| + var partialKeyframes2 = [ |
| + {width: '0px', height: '0px', offset: 0}, |
| + {height: '10px'}, |
| + {width: '10px'} |
| + ]; |
| + |
| + // Height is missing keyframe at offset: 1 |
| + assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes1); }); |
| + assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes2); }); |
| +}, 'Calling new Animation() with a keyframe that has no offset specified, is followed by other keyframes,\n' + |
| + 'and is the last keyframe for a property, should throw a NotSupportedError.'); |
| + |
| +test(function() { |
| + var partialKeyframes1 = [ |
| + {width: '0px', offset: 0}, |
| + {height: '0px'}, |
| + {width: '10px', height: '10px', offset: 1} |
| + ]; |
| + var partialKeyframes2 = [ |
| + {width: '0px'}, |
| + {height: '0px'}, |
| + {width: '10px', height: '10px', offset: 1} |
| + ]; |
| + |
| + // Height is missing keyframe at offset: 0 |
| + assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes1); }); |
| + assert_throws('NOT_SUPPORTED_ERR', function() { new Animation(element, partialKeyframes2); }); |
| +}, 'Calling new Animation() with a keyframe that has no offset specified, is preceded by other keyframes,\n' + |
| + 'and is the first keyframe for a property, should throw a NotSupportedError.'); |
| +</script> |