third_party/blink/web_tests/animations/keyframes-rule.html - manifest_repos/chromium_src - Git at Google

 <html>
 <head>
 <style type="text/css" media="screen">
   @keyframes test1 {
     from { left: 10px; }
     to { left: 20px; }
   }
   @keyframes test2 {
     from { left: 10px; }
     to { left: 20px; }
     30% { left: 30px; }
     60% { left: 60px; }
     20% { left: 50px; }
   }
   @keyframes test3 {
     0% { left: 10px; }
     50% , 60% { left: 30px; }
     -10% { left: 50px; }
     90%, 100% { left: 20px; }
   }
   @keyframes test4 {
     from { left: 10px; }
     50% { left: 30px; }
     to { left: 20px; }
   }
   @keyframes test5 {
     0% { left: 10px; }
     50% , 60% { left: 30px; }
     90%, 100% { left: 20px; }
   }
   @keyframes test6 {
     from { left: 10px; }
     50% { left: 30px; }
     to { left: 20px; }
   }
   @keyframes test7 {
     0% { left: 10px; }
     90%, 100% { left: 20px; }
   }
   @keyframes test8 {
     0% { left: 10px; }
     90%, 100% { left: 20px; }
   }
   @keyframes test9 {
     0% { left: 10px; }
     90%, 100% { left: 20px; }
   }
   @keyframes test10 {
     0% { left: 10px; }
     90%, 100% { left: 20px; }
   }
   @keyframes test11 {
     0% { left: 10px; }
     90%, 100% { left: 20px; }
   }
   @keyframes test12 {
     0% { left: 10px; }
     90%, 100% { left: 20px; }
   }
   @keyframes test13 {
     0% { left: 10px; }
     90%, 100% { left: 20px; }
   }
 </style>
 <script src="../resources/testharness.js"></script>
 <script src="../resources/testharnessreport.js"></script>
 </head>
 <body>
 <script>
 test(() => {
   assert_own_property(window, "CSSKeyframeRule", "CSSKeyframeRule exists on Window object");

   assert_own_property(window, "CSSKeyframesRule", "CSSKeyframesRule exists on Window object");

   assert_not_own_property(window.CSSRule, "WEBKIT_KEYFRAME_RULE", "WEBKIT_KEYFRAME_RULE does not exist on Window.CSSRule object");

   assert_not_own_property(window.CSSRule, "WEBKIT_KEYFRAMES_RULE", "WEBKIT_KEYFRAMES_RULE does not exist on Window.CSSRule object");

   assert_own_property(window.CSSRule, "KEYFRAME_RULE", "KEYFRAME_RULE exists on Window.CSSRule object");

   assert_own_property(window.CSSRule, "KEYFRAMES_RULE", "KEYFRAMES_RULE exists on Window.CSSRule object");
 }, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Constants");

 test(() => {
   var keyframes1 = document.styleSheets.item(0).cssRules.item(0);
   assert_equals(keyframes1.type, window.CSSRule.KEYFRAMES_RULE);
   assert_equals(keyframes1.name, "test1");

   var rules1 = keyframes1.cssRules;
   assert_equals(rules1.length, 2);
   assert_equals(rules1.item(0).type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rules1.item(0).cssText, "0% { left: 10px; }");
   assert_equals(rules1.item(1).cssText, "100% { left: 20px; }");

   keyframes1.appendRule("30% { left: 30px; }");
   keyframes1.appendRule("60% { left: 60px; }");
   keyframes1.appendRule("20% { left: 50px; }");

   assert_equals(rules1.length, 5);
   assert_equals(rules1.item(0).cssText, "0% { left: 10px; }");
   assert_equals(rules1.item(1).cssText, "100% { left: 20px; }");
   assert_equals(rules1.item(2).cssText, "30% { left: 30px; }");
   assert_equals(rules1.item(3).cssText, "60% { left: 60px; }");
   assert_equals(rules1.item(4).cssText, "20% { left: 50px; }");
 }, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Basic queries and Insert new rules");

 test(() => {
   var keyframes2 = document.styleSheets.item(0).cssRules.item(1);
   keyframes2.appendRule("foo");
   keyframes2.appendRule("foo { left: 30px; }");
   keyframes2.appendRule("-10% { left: 30px; }");
   keyframes2.appendRule("10% { left: 30px; }");

   var rules2 = keyframes2.cssRules;
   assert_equals(rules2.length, 6);
   assert_equals(rules2.item(5).cssText, "10% { left: 30px; }");
 }, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Insert invalid rules");

 test(() => {
   var keyframes3 = document.styleSheets.item(0).cssRules.item(2);
   assert_equals(keyframes3.type, window.CSSRule.KEYFRAMES_RULE);
   assert_equals(keyframes3.name, "test3");

   var rules3 = keyframes3.cssRules;
   assert_equals(rules3.length, 3);
   assert_equals(rules3.item(0).type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rules3.item(0).keyText, "0%");
   assert_equals(rules3.item(1).keyText, "50%, 60%");
   assert_equals(rules3.item(2).keyText, "90%, 100%");
   assert_equals(rules3.item(0).cssText, "0% { left: 10px; }");
   assert_equals(rules3.item(1).cssText, "50%, 60% { left: 30px; }");
   assert_equals(rules3.item(2).cssText, "90%, 100% { left: 20px; }");

   assert_class_string(rules3.item(0).style, "CSSStyleDeclaration");
   assert_equals(rules3.item(0).style.length, 1);

   var rule = keyframes3.findRule("0%");

   assert_class_string(rule, "CSSKeyframeRule", "Should be able to extract '0%' keyframe rule");
   assert_equals(rule.type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rule.cssText, "0% { left: 10px; }");

   var rule = keyframes3.findRule("50%, 60%");

   assert_class_string(rule, "CSSKeyframeRule", "Should be able to extract '50%,60%' keyframe rule");
   assert_equals(rule.type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rule.cssText, "50%, 60% { left: 30px; }");
 }, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Keys, Find a rule and Find a rule with multiple key values");

 test(() => {
   var keyframes4 = document.styleSheets.item(0).cssRules.item(3);
   assert_equals(keyframes4.type, window.CSSRule.KEYFRAMES_RULE);

   rule = keyframes4.findRule("From");
   assert_equals(rule.type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rule.cssText, "0% { left: 10px; }");

   rule = keyframes4.findRule("TO");
   assert_equals(rule.type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rule.cssText, "100% { left: 20px; }");

   rule = keyframes4.findRule("70%");

   assert_equals(rule, null, "Should not be able to find the non-existent ''70%' keyframe rule");
 }, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Find a rule using from and to and Try to find a rule that doesn't exist");

 test(() => {
   var keyframes5 = document.styleSheets.item(0).cssRules.item(4);
   keyframes5.deleteRule("50%,60%");
   var rules5 = keyframes5.cssRules;
   assert_equals(rules5.length, 2);
   assert_equals(rules5.item(0).type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rules5.item(0).keyText, "0%");
   assert_equals(rules5.item(1).keyText, "90%, 100%");
 }, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Delete a rule");

 test(() => {
   var keyframes6 = document.styleSheets.item(0).cssRules.item(5);
   keyframes6.deleteRule("0%");
   var rules6 = keyframes6.cssRules;
   assert_equals(rules6.length, 2);
   assert_equals(rules6.item(0).type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rules6.item(0).keyText, "50%");
   assert_equals(rules6.item(1).keyText, "100%");
 }, 'This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Delete a from rule');

 test(() => {
   var keyframes7 = document.styleSheets.item(0).cssRules.item(6);
   keyframes7.deleteRule("70%");
   var rules7 = keyframes7.cssRules;
   assert_equals(rules7.length, 2);
   assert_equals(rules7.item(0).type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rules7.item(0).keyText, "0%");
   assert_equals(rules7.item(1).keyText, "90%, 100%");
 }, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Delete a rule that doesn't exist");

 test(() => {
   var rules8 = document.styleSheets.item(0).cssRules.item(7).cssRules;
   rules8.item(0).keyText = "70%";
   assert_equals(rules8.length, 2);
   assert_equals(rules8.item(0).type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rules8.item(0).keyText, "70%");
   assert_equals(rules8.item(1).keyText, "90%, 100%");
 }, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key");

 test(() => {
   var rules9 = document.styleSheets.item(0).cssRules.item(8).cssRules;
   rules9.item(0).keyText = "from";
   assert_equals(rules9.length, 2);
   assert_equals(rules9.item(0).type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rules9.item(0).keyText, "0%");
   assert_equals(rules9.item(1).keyText, "90%, 100%");
 }, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with 'from'");

 test(() => {
   var rules10 = document.styleSheets.item(0).cssRules.item(9).cssRules;
   rules10.item(0).keyText = "0%, 10%, from, 20%, 30%, to";
   assert_equals(rules10.length, 2);
   assert_equals(rules10.item(0).type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rules10.item(0).keyText, "0%, 10%, 0%, 20%, 30%, 100%");
   assert_equals(rules10.item(1).keyText, "90%, 100%");
 }, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with multiple values");

 test(() => {
   var rules11 = document.styleSheets.item(0).cssRules.item(10).cssRules;
   assert_throws_dom('SyntaxError', () => {rules11.item(0).keyText = "40%, -50%, 60%";}, "The key '40%, -50%, 60%' is invalid and cannot be parsed");
   assert_equals(rules11.length, 2);
   assert_equals(rules11.item(0).type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rules11.item(0).keyText, "0%");
   assert_equals(rules11.item(1).keyText, "90%, 100%");
 }, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with an out-of-range value");

 test(() => {
   var rules12 = document.styleSheets.item(0).cssRules.item(11).cssRules;
   assert_throws_dom('SyntaxError', () => {rules12.item(0).keyText = "foo";}, "The key 'foo' is invalid and cannot be parsed");
   assert_equals(rules12.length, 2);
   assert_equals(rules12.item(0).type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rules12.item(0).keyText, "0%");
   assert_equals(rules12.item(1).keyText, "90%, 100%");
 }, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with an invalid value");

 test(() => {
   var rules13 = document.styleSheets.item(0).cssRules.item(12).cssRules;
   assert_throws_dom('SyntaxError', () => {rules13.item(0).keyText = null;}, "The key 'null' is invalid and cannot be parsed");
   assert_equals(rules13.length, 2);
   assert_equals(rules13.item(0).type, window.CSSRule.KEYFRAME_RULE);
   assert_equals(rules13.item(0).keyText, "0%");
   assert_equals(rules13.item(1).keyText, "90%, 100%");
 }, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with a null value");

 </script>
 </body>
 </html>
	<html>
	<head>
	<style type="text/css" media="screen">
	@keyframes test1 {
	from { left: 10px; }
	to { left: 20px; }
	}
	@keyframes test2 {
	from { left: 10px; }
	to { left: 20px; }
	30% { left: 30px; }
	60% { left: 60px; }
	20% { left: 50px; }
	}
	@keyframes test3 {
	0% { left: 10px; }
	50% , 60% { left: 30px; }
	-10% { left: 50px; }
	90%, 100% { left: 20px; }
	}
	@keyframes test4 {
	from { left: 10px; }
	50% { left: 30px; }
	to { left: 20px; }
	}
	@keyframes test5 {
	0% { left: 10px; }
	50% , 60% { left: 30px; }
	90%, 100% { left: 20px; }
	}
	@keyframes test6 {
	from { left: 10px; }
	50% { left: 30px; }
	to { left: 20px; }
	}
	@keyframes test7 {
	0% { left: 10px; }
	90%, 100% { left: 20px; }
	}
	@keyframes test8 {
	0% { left: 10px; }
	90%, 100% { left: 20px; }
	}
	@keyframes test9 {
	0% { left: 10px; }
	90%, 100% { left: 20px; }
	}
	@keyframes test10 {
	0% { left: 10px; }
	90%, 100% { left: 20px; }
	}
	@keyframes test11 {
	0% { left: 10px; }
	90%, 100% { left: 20px; }
	}
	@keyframes test12 {
	0% { left: 10px; }
	90%, 100% { left: 20px; }
	}
	@keyframes test13 {
	0% { left: 10px; }
	90%, 100% { left: 20px; }
	}
	</style>
	<script src="../resources/testharness.js"></script>
	<script src="../resources/testharnessreport.js"></script>
	</head>
	<body>
	<script>
	test(() => {
	assert_own_property(window, "CSSKeyframeRule", "CSSKeyframeRule exists on Window object");

	assert_own_property(window, "CSSKeyframesRule", "CSSKeyframesRule exists on Window object");

	assert_not_own_property(window.CSSRule, "WEBKIT_KEYFRAME_RULE", "WEBKIT_KEYFRAME_RULE does not exist on Window.CSSRule object");

	assert_not_own_property(window.CSSRule, "WEBKIT_KEYFRAMES_RULE", "WEBKIT_KEYFRAMES_RULE does not exist on Window.CSSRule object");

	assert_own_property(window.CSSRule, "KEYFRAME_RULE", "KEYFRAME_RULE exists on Window.CSSRule object");

	assert_own_property(window.CSSRule, "KEYFRAMES_RULE", "KEYFRAMES_RULE exists on Window.CSSRule object");
	}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Constants");

	test(() => {
	var keyframes1 = document.styleSheets.item(0).cssRules.item(0);
	assert_equals(keyframes1.type, window.CSSRule.KEYFRAMES_RULE);
	assert_equals(keyframes1.name, "test1");

	var rules1 = keyframes1.cssRules;
	assert_equals(rules1.length, 2);
	assert_equals(rules1.item(0).type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rules1.item(0).cssText, "0% { left: 10px; }");
	assert_equals(rules1.item(1).cssText, "100% { left: 20px; }");

	keyframes1.appendRule("30% { left: 30px; }");
	keyframes1.appendRule("60% { left: 60px; }");
	keyframes1.appendRule("20% { left: 50px; }");

	assert_equals(rules1.length, 5);
	assert_equals(rules1.item(0).cssText, "0% { left: 10px; }");
	assert_equals(rules1.item(1).cssText, "100% { left: 20px; }");
	assert_equals(rules1.item(2).cssText, "30% { left: 30px; }");
	assert_equals(rules1.item(3).cssText, "60% { left: 60px; }");
	assert_equals(rules1.item(4).cssText, "20% { left: 50px; }");
	}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Basic queries and Insert new rules");

	test(() => {
	var keyframes2 = document.styleSheets.item(0).cssRules.item(1);
	keyframes2.appendRule("foo");
	keyframes2.appendRule("foo { left: 30px; }");
	keyframes2.appendRule("-10% { left: 30px; }");
	keyframes2.appendRule("10% { left: 30px; }");

	var rules2 = keyframes2.cssRules;
	assert_equals(rules2.length, 6);
	assert_equals(rules2.item(5).cssText, "10% { left: 30px; }");
	}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Insert invalid rules");

	test(() => {
	var keyframes3 = document.styleSheets.item(0).cssRules.item(2);
	assert_equals(keyframes3.type, window.CSSRule.KEYFRAMES_RULE);
	assert_equals(keyframes3.name, "test3");

	var rules3 = keyframes3.cssRules;
	assert_equals(rules3.length, 3);
	assert_equals(rules3.item(0).type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rules3.item(0).keyText, "0%");
	assert_equals(rules3.item(1).keyText, "50%, 60%");
	assert_equals(rules3.item(2).keyText, "90%, 100%");
	assert_equals(rules3.item(0).cssText, "0% { left: 10px; }");
	assert_equals(rules3.item(1).cssText, "50%, 60% { left: 30px; }");
	assert_equals(rules3.item(2).cssText, "90%, 100% { left: 20px; }");

	assert_class_string(rules3.item(0).style, "CSSStyleDeclaration");
	assert_equals(rules3.item(0).style.length, 1);

	var rule = keyframes3.findRule("0%");

	assert_class_string(rule, "CSSKeyframeRule", "Should be able to extract '0%' keyframe rule");
	assert_equals(rule.type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rule.cssText, "0% { left: 10px; }");

	var rule = keyframes3.findRule("50%, 60%");

	assert_class_string(rule, "CSSKeyframeRule", "Should be able to extract '50%,60%' keyframe rule");
	assert_equals(rule.type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rule.cssText, "50%, 60% { left: 30px; }");
	}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Keys, Find a rule and Find a rule with multiple key values");

	test(() => {
	var keyframes4 = document.styleSheets.item(0).cssRules.item(3);
	assert_equals(keyframes4.type, window.CSSRule.KEYFRAMES_RULE);

	rule = keyframes4.findRule("From");
	assert_equals(rule.type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rule.cssText, "0% { left: 10px; }");

	rule = keyframes4.findRule("TO");
	assert_equals(rule.type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rule.cssText, "100% { left: 20px; }");

	rule = keyframes4.findRule("70%");

	assert_equals(rule, null, "Should not be able to find the non-existent ''70%' keyframe rule");
	}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Find a rule using from and to and Try to find a rule that doesn't exist");

	test(() => {
	var keyframes5 = document.styleSheets.item(0).cssRules.item(4);
	keyframes5.deleteRule("50%,60%");
	var rules5 = keyframes5.cssRules;
	assert_equals(rules5.length, 2);
	assert_equals(rules5.item(0).type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rules5.item(0).keyText, "0%");
	assert_equals(rules5.item(1).keyText, "90%, 100%");
	}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Delete a rule");

	test(() => {
	var keyframes6 = document.styleSheets.item(0).cssRules.item(5);
	keyframes6.deleteRule("0%");
	var rules6 = keyframes6.cssRules;
	assert_equals(rules6.length, 2);
	assert_equals(rules6.item(0).type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rules6.item(0).keyText, "50%");
	assert_equals(rules6.item(1).keyText, "100%");
	}, 'This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Delete a from rule');

	test(() => {
	var keyframes7 = document.styleSheets.item(0).cssRules.item(6);
	keyframes7.deleteRule("70%");
	var rules7 = keyframes7.cssRules;
	assert_equals(rules7.length, 2);
	assert_equals(rules7.item(0).type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rules7.item(0).keyText, "0%");
	assert_equals(rules7.item(1).keyText, "90%, 100%");
	}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Delete a rule that doesn't exist");

	test(() => {
	var rules8 = document.styleSheets.item(0).cssRules.item(7).cssRules;
	rules8.item(0).keyText = "70%";
	assert_equals(rules8.length, 2);
	assert_equals(rules8.item(0).type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rules8.item(0).keyText, "70%");
	assert_equals(rules8.item(1).keyText, "90%, 100%");
	}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key");

	test(() => {
	var rules9 = document.styleSheets.item(0).cssRules.item(8).cssRules;
	rules9.item(0).keyText = "from";
	assert_equals(rules9.length, 2);
	assert_equals(rules9.item(0).type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rules9.item(0).keyText, "0%");
	assert_equals(rules9.item(1).keyText, "90%, 100%");
	}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with 'from'");

	test(() => {
	var rules10 = document.styleSheets.item(0).cssRules.item(9).cssRules;
	rules10.item(0).keyText = "0%, 10%, from, 20%, 30%, to";
	assert_equals(rules10.length, 2);
	assert_equals(rules10.item(0).type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rules10.item(0).keyText, "0%, 10%, 0%, 20%, 30%, 100%");
	assert_equals(rules10.item(1).keyText, "90%, 100%");
	}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with multiple values");

	test(() => {
	var rules11 = document.styleSheets.item(0).cssRules.item(10).cssRules;
	assert_throws_dom('SyntaxError', () => {rules11.item(0).keyText = "40%, -50%, 60%";}, "The key '40%, -50%, 60%' is invalid and cannot be parsed");
	assert_equals(rules11.length, 2);
	assert_equals(rules11.item(0).type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rules11.item(0).keyText, "0%");
	assert_equals(rules11.item(1).keyText, "90%, 100%");
	}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with an out-of-range value");

	test(() => {
	var rules12 = document.styleSheets.item(0).cssRules.item(11).cssRules;
	assert_throws_dom('SyntaxError', () => {rules12.item(0).keyText = "foo";}, "The key 'foo' is invalid and cannot be parsed");
	assert_equals(rules12.length, 2);
	assert_equals(rules12.item(0).type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rules12.item(0).keyText, "0%");
	assert_equals(rules12.item(1).keyText, "90%, 100%");
	}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with an invalid value");

	test(() => {
	var rules13 = document.styleSheets.item(0).cssRules.item(12).cssRules;
	assert_throws_dom('SyntaxError', () => {rules13.item(0).keyText = null;}, "The key 'null' is invalid and cannot be parsed");
	assert_equals(rules13.length, 2);
	assert_equals(rules13.item(0).type, window.CSSRule.KEYFRAME_RULE);
	assert_equals(rules13.item(0).keyText, "0%");
	assert_equals(rules13.item(1).keyText, "90%, 100%");
	}, "This tests the CSSKeyframeRule and CSSKeyframesRule interfaces, Set a keyframe key with a null value");

	</script>
	</body>
	</html>