| 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.');
|
| +
|
| +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>
|
|
|