third_party/WebKit/LayoutTests/virtual/stable/web-animations-api/partial-keyframes-unsupported.html - chromium/src - Git at Google

 <!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() { element.animate(partialKeyframes1); });
     assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes2); });
     assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes3); });
     assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes4); });
 }, 'Calling element.animate() 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(element.animate(validKeyframes1), undefined);
     assert_not_equals(element.animate(validKeyframes2), undefined);
 }, 'Calling element.animate() with no offset specified for the first keyframe should create an 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() { element.animate(partialKeyframes1); });
     assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes2); });
 }, 'Calling element.animate() 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(element.animate(validKeyframes1), undefined);
     assert_not_equals(element.animate(validKeyframes2), undefined);
 }, 'Calling element.animate() 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() { element.animate(partialKeyframes1); });
     assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes2); });
 }, 'Calling element.animate() 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() { element.animate(partialKeyframes1); });
     assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes2); });
 }, 'Calling element.animate() with a keyframe that has no offset specified, is followed by other keyframes, ' +
     '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() { element.animate(partialKeyframes1); });
     assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes2); });
 }, 'Calling element.animate() with a keyframe that has no offset specified, is preceded by other keyframes, ' +
     'and is the first keyframe for a property, should throw a NotSupportedError.');

 test(function() {
   var partialKeyframes = [
     {width: '0px', offset: 0},
   ];

   assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes); });
 }, 'Calling element.animate() with a single keyframe should throw a NotSupportedError.');
 </script>
	<!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() { element.animate(partialKeyframes1); });
	assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes2); });
	assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes3); });
	assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes4); });
	}, 'Calling element.animate() 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(element.animate(validKeyframes1), undefined);
	assert_not_equals(element.animate(validKeyframes2), undefined);
	}, 'Calling element.animate() with no offset specified for the first keyframe should create an 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() { element.animate(partialKeyframes1); });
	assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes2); });
	}, 'Calling element.animate() 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(element.animate(validKeyframes1), undefined);
	assert_not_equals(element.animate(validKeyframes2), undefined);
	}, 'Calling element.animate() 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() { element.animate(partialKeyframes1); });
	assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes2); });
	}, 'Calling element.animate() 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() { element.animate(partialKeyframes1); });
	assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes2); });
	}, 'Calling element.animate() with a keyframe that has no offset specified, is followed by other keyframes, ' +
	'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() { element.animate(partialKeyframes1); });
	assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes2); });
	}, 'Calling element.animate() with a keyframe that has no offset specified, is preceded by other keyframes, ' +
	'and is the first keyframe for a property, should throw a NotSupportedError.');

	test(function() {
	var partialKeyframes = [
	{width: '0px', offset: 0},
	];

	assert_throws('NOT_SUPPORTED_ERR', function() { element.animate(partialKeyframes); });
	}, 'Calling element.animate() with a single keyframe should throw a NotSupportedError.');
	</script>