animations/keyframes-rule.html

<html>
<head>
<style type="text/css" media="screen">
  @-webkit-keyframes test1 {
    from { left: 10px; }
    to { left: 20px; }
  }
  @-webkit-keyframes test2 {
    0% { left: 10px; }
    50% { left: 30px; }
    100% { left: 20px; }
  }
  @-webkit-keyframes test-from-to {
    from { left: 10px; }
    50% { left: 30px; }
    to { left: 20px; }
  }
</style>
<script src="../fast/js/resources/js-test-pre.js"></script>
</head>
<body>
<script>

description("This tests the WebKitCSSKeyframeRule and WebKitCSSKeyframesRule interfaces.");

if (window.WebKitCSSKeyframeRule)
    testPassed("WebKitCSSKeyframeRule exists on Window object");
else
    testFailed("WebKitCSSKeyframeRule does not exist on Window object");

if (window.WebKitCSSKeyframesRule)
    testPassed("WebKitCSSKeyframesRule exists on Window object");
else
    testFailed("WebKitCSSKeyframesRule 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");

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("");

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%'");
shouldBe("rules2.item(2).keyText", "'100%'");

shouldBe("rules2.item(0).cssText", "'0% { left: 10px; }'");
shouldBe("rules2.item(1).cssText", "'50% { left: 30px; }'");
shouldBe("rules2.item(2).cssText", "'100% { left: 20px; }'");

debug("");

shouldBe("typeof(rules2.item(0).style)", "typeof(CSSStyleDeclaration)");
shouldBe("rules2.item(0).style.length", "1");

debug("");
debug("Find a rule");

var rule = keyframes2.findRule("50%");

if (!rule) 
  testFailed("Could not extract '50%' keyframe rule");

shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
shouldBe("rule.cssText", "'50% { 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%");
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", "'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", "'100%'");

debug("");

</script>
<script src="../fast/js/resources/js-test-post.js"></script>
</body>
</html>