<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>
Codebase Browser
chromium