blob: d8dbd722027676127f1a0a341ddace203b78cd88 [file] [log] [blame]
<html>
<head>
<style type="text/css" media="screen">
@-webkit-keyframes test1 {
from { left: 10px; }
to { left: 20px; }
}
@-webkit-keyframes test2 {
0% { left: 10px; }
50% , 60% { left: 30px; }
-10% { left: 50px; }
90%, 100% { left: 20px; }
}
@-webkit-keyframes test-from-to {
from { left: 10px; }
-10% { left: 50px; }
50% { left: 30px; }
to { left: 20px; }
}
</style>
<script src="../fast/js/resources/js-test-pre.js"></script>
</head>
<body>
<script>
description("This tests the CSSKeyframeRule and CSSKeyframesRule interfaces.");
if (window.CSSKeyframeRule)
testPassed("CSSKeyframeRule exists on Window object");
else
testFailed("CSSKeyframeRule does not exist on Window object");
if (window.CSSKeyframesRule)
testPassed("CSSKeyframesRule exists on Window object");
else
testFailed("CSSKeyframesRule does not exist on Window object");
if (window.CSSRule.WEBKIT_KEYFRAME_RULE)
testPassed("WEBKIT_KEYFRAME_RULE exists on Window.CSSRule object");
else
testFailed("WEBKIT_KEYFRAME_RULE does not exist on Window.CSSRule object");
if (window.CSSRule.WEBKIT_KEYFRAMES_RULE)
testPassed("WEBKIT_KEYFRAMES_RULE exists on Window.CSSRule object");
else
testFailed("WEBKIT_KEYFRAMES_RULE does not exist on Window.CSSRule object");
if (window.CSSRule.KEYFRAME_RULE)
testPassed("KEYFRAME_RULE exists on Window.CSSRule object");
else
testFailed("KEYFRAME_RULE does not exist on Window.CSSRule object");
if (window.CSSRule.KEYFRAMES_RULE)
testPassed("KEYFRAMES_RULE exists on Window.CSSRule object");
else
testFailed("KEYFRAMES_RULE does not exist on Window.CSSRule object");
debug("");
var keyframes1 = document.styleSheets.item(0).cssRules.item(0);
shouldBe("keyframes1.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
shouldBe("keyframes1.name", "'test1'");
debug("");
var rules1 = keyframes1.cssRules;
shouldBe("rules1.length", "2");
shouldBe("rules1.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
shouldBe("rules1.item(0).cssText", "'0% { left: 10px; }'");
shouldBe("rules1.item(1).cssText", "'100% { left: 20px; }'");
debug("");
debug("Insert three new rules");
keyframes1.insertRule("30% { left: 30px; }");
keyframes1.insertRule("60% { left: 60px; }");
keyframes1.insertRule("20% { left: 50px; }");
shouldBe("rules1.length", "5");
shouldBe("rules1.item(0).cssText", "'0% { left: 10px; }'");
shouldBe("rules1.item(1).cssText", "'100% { left: 20px; }'");
shouldBe("rules1.item(2).cssText", "'30% { left: 30px; }'");
shouldBe("rules1.item(3).cssText", "'60% { left: 60px; }'");
shouldBe("rules1.item(4).cssText", "'20% { left: 50px; }'");
debug("");
debug("Insert invalid rules");
keyframes1.insertRule("foo");
keyframes1.insertRule("foo { left: 30px; }");
keyframes1.insertRule("-10% { left: 30px; }");
keyframes1.insertRule("10% { left: 30px; }");
shouldBe("rules1.length", "6");
shouldBe("rules1.item(5).cssText", "'10% { left: 30px; }'");
debug("");
var keyframes2 = document.styleSheets.item(0).cssRules.item(1);
shouldBe("keyframes2.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
shouldBe("keyframes2.name", "'test2'");
var rules2 = keyframes2.cssRules;
debug("");
shouldBe("rules2.length", "3");
shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
shouldBe("rules2.item(0).keyText", "'0%'");
shouldBe("rules2.item(1).keyText", "'50%,60%'");
shouldBe("rules2.item(2).keyText", "'90%,100%'");
shouldBe("rules2.item(0).cssText", "'0% { left: 10px; }'");
shouldBe("rules2.item(1).cssText", "'50%,60% { left: 30px; }'");
shouldBe("rules2.item(2).cssText", "'90%,100% { left: 20px; }'");
debug("");
shouldBeType("rules2.item(0).style", "CSSStyleDeclaration");
shouldBe("rules2.item(0).style.length", "1");
debug("");
debug("Find a rule");
var rule = keyframes2.findRule("0%");
if (!rule)
testFailed("Could not extract '0%' keyframe rule");
shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
shouldBe("rule.cssText", "'0% { left: 10px; }'");
debug("");
debug("Find a rule with multiple key values");
var rule = keyframes2.findRule("50%,60%");
if (!rule)
testFailed("Could not extract '50%,60%' keyframe rule");
shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
shouldBe("rule.cssText", "'50%,60% { left: 30px; }'");
debug("");
debug("Find a rule using from and to");
var keyframesFromTo = document.styleSheets.item(0).cssRules.item(2);
shouldBe("keyframesFromTo.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
rule = keyframesFromTo.findRule("From");
shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
shouldBe("rule.cssText", "'0% { left: 10px; }'");
rule = keyframesFromTo.findRule("TO");
shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
shouldBe("rule.cssText", "'100% { left: 20px; }'");
debug("");
debug("Try to find a rule that doesn't exist");
rule = keyframes2.findRule("70%");
if (rule)
testFailed("Was able to find the non-existent '70%' keyframe rule");
else
testPassed("Non-existent rule was not found");
debug("");
debug("Delete a rule");
keyframes2.deleteRule("50%,60%");
shouldBe("rules2.length", "2");
shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
shouldBe("rules2.item(0).keyText", "'0%'");
shouldBe("rules2.item(1).keyText", "'90%,100%'");
debug("");
debug("Delete a from rule");
keyframesFromTo.deleteRule("0%");
var rulesFromTo = keyframesFromTo.cssRules;
shouldBe("rulesFromTo.length", "2");
shouldBe("rulesFromTo.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
shouldBe("rulesFromTo.item(0).keyText", "'50%'");
shouldBe("rulesFromTo.item(1).keyText", "'100%'");
debug("");
debug("Delete a rule that doesn't exist");
keyframes2.deleteRule("70%");
shouldBe("rules2.length", "2");
shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
shouldBe("rules2.item(0).keyText", "'0%'");
shouldBe("rules2.item(1).keyText", "'90%,100%'");
debug("");
debug("Set a keyframe key");
rules2.item(0).keyText = "70%";
shouldBe("rules2.length", "2");
shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
shouldBe("rules2.item(0).keyText", "'70%'");
shouldBe("rules2.item(1).keyText", "'90%,100%'");
debug("");
debug("Set a keyframe key with 'from'");
rules2.item(0).keyText = "from";
shouldBe("rules2.length", "2");
shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
// FIXME: Should this be converted to '0px'?
shouldBe("rules2.item(0).keyText", "'from'");
shouldBe("rules2.item(1).keyText", "'90%,100%'");
debug("");
debug("Set a keyframe key with multiple values");
rules2.item(0).keyText = "10%, 20%, 30%";
shouldBe("rules2.length", "2");
shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
// FIXME: Should we strip spaces to match the keyText parsed from a keyframe rule?
shouldBe("rules2.item(0).keyText", "'10%, 20%, 30%'");
shouldBe("rules2.item(1).keyText", "'90%,100%'");
debug("");
debug("Set a keyframe key with an out-of-range value");
rules2.item(0).keyText = "40%, -50%, 60%";
shouldBe("rules2.length", "2");
shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
// FIXME: Should we leave keyText unchanged when attempting to set to an invalid string?
shouldBe("rules2.item(0).keyText", "'40%, -50%, 60%'");
shouldBe("rules2.item(1).keyText", "'90%,100%'");
debug("");
debug("Set a keyframe key with an invalid value");
rules2.item(0).keyText = "foo";
shouldBe("rules2.length", "2");
shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
// FIXME: Should we leave keyText unchanged when attempting to set to an invalid string?
shouldBe("rules2.item(0).keyText", "'foo'");
shouldBe("rules2.item(1).keyText", "'90%,100%'");
debug("");
debug("Set a keyframe key with a null value");
rules2.item(0).keyText = null;
shouldBe("rules2.length", "2");
shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
// FIXME: Should we leave keyText unchanged when attempting to set to something invalid?
shouldBe("rules2.item(0).keyText", "'null'");
shouldBe("rules2.item(1).keyText", "'90%,100%'");
</script>
<script src="../fast/js/resources/js-test-post.js"></script>
</body>
</html>