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> |