<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/js-test.js"></script>
</head>
<body>
<script>

description("This tests the CSSKeyframeRule and CSSKeyframesRule interfaces.");

debug("Constants");
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)
    testFailed("WEBKIT_KEYFRAME_RULE exists on Window.CSSRule object");
else
    testPassed("WEBKIT_KEYFRAME_RULE does not exist on Window.CSSRule object");

if (window.CSSRule.WEBKIT_KEYFRAMES_RULE)
    testFailed("WEBKIT_KEYFRAMES_RULE exists on Window.CSSRule object");
else
    testPassed("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("");
debug("Basic queries");

var keyframes1 = document.styleSheets.item(0).cssRules.item(0);
shouldBe("keyframes1.type", "window.CSSRule.KEYFRAMES_RULE");
shouldBe("keyframes1.name", "'test1'");

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

debug("");
debug("Insert new rules");

keyframes1.appendRule("30% { left: 30px; }");
keyframes1.appendRule("60% { left: 60px; }");
keyframes1.appendRule("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");

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;
shouldBe("rules2.length", "6");
shouldBe("rules2.item(5).cssText", "'10% { left: 30px; }'");

debug("");
debug("Keys");

var keyframes3 = document.styleSheets.item(0).cssRules.item(2);
shouldBe("keyframes3.type", "window.CSSRule.KEYFRAMES_RULE");
shouldBe("keyframes3.name", "'test3'");

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

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

shouldBeType("rules3.item(0).style", "CSSStyleDeclaration");
shouldBe("rules3.item(0).style.length", "1");
var rule = keyframes3.findRule("0%");

if (!rule)
  testFailed("Could not extract '0%' keyframe rule");
shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
shouldBe("rule.cssText", "'0% { left: 10px; }'");

debug("");
debug("Find a rule with multiple key values");
var rule = keyframes3.findRule("50%, 60%");

if (!rule)
  testFailed("Could not extract '50%,60%' keyframe rule");
shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
shouldBe("rule.cssText", "'50%, 60% { left: 30px; }'");

debug("");
debug("Find a rule using from and to");

var keyframes4 = document.styleSheets.item(0).cssRules.item(3);
shouldBe("keyframes4.type", "window.CSSRule.KEYFRAMES_RULE");

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

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

debug("");
debug("Try to find a rule that doesn't exist");

rule = keyframes4.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");

var keyframes5 = document.styleSheets.item(0).cssRules.item(4);
keyframes5.deleteRule("50%,60%");
var rules5 = keyframes5.cssRules;
shouldBe("rules5.length", "2");
shouldBe("rules5.item(0).type", "window.CSSRule.KEYFRAME_RULE");
shouldBe("rules5.item(0).keyText", "'0%'");
shouldBe("rules5.item(1).keyText", "'90%, 100%'");

debug("");
debug("Delete a from rule");

var keyframes6 = document.styleSheets.item(0).cssRules.item(5);
keyframes6.deleteRule("0%");
var rules6 = keyframes6.cssRules;
shouldBe("rules6.length", "2");
shouldBe("rules6.item(0).type", "window.CSSRule.KEYFRAME_RULE");
shouldBe("rules6.item(0).keyText", "'50%'");
shouldBe("rules6.item(1).keyText", "'100%'");

debug("");
debug("Delete a rule that doesn't exist");

var keyframes7 = document.styleSheets.item(0).cssRules.item(6);
keyframes7.deleteRule("70%");
var rules7 = keyframes7.cssRules;
shouldBe("rules7.length", "2");
shouldBe("rules7.item(0).type", "window.CSSRule.KEYFRAME_RULE");
shouldBe("rules7.item(0).keyText", "'0%'");
shouldBe("rules7.item(1).keyText", "'90%, 100%'");

debug("");
debug("Set a keyframe key");

var rules8 = document.styleSheets.item(0).cssRules.item(7).cssRules;
rules8.item(0).keyText = "70%";
shouldBe("rules8.length", "2");
shouldBe("rules8.item(0).type", "window.CSSRule.KEYFRAME_RULE");
shouldBe("rules8.item(0).keyText", "'70%'");
shouldBe("rules8.item(1).keyText", "'90%, 100%'");

debug("");
debug("Set a keyframe key with 'from'");

var rules9 = document.styleSheets.item(0).cssRules.item(8).cssRules;
rules9.item(0).keyText = "from";
shouldBe("rules9.length", "2");
shouldBe("rules9.item(0).type", "window.CSSRule.KEYFRAME_RULE");
shouldBe("rules9.item(0).keyText", "'0%'");
shouldBe("rules9.item(1).keyText", "'90%, 100%'");

debug("");
debug("Set a keyframe key with multiple values");

var rules10 = document.styleSheets.item(0).cssRules.item(9).cssRules;
rules10.item(0).keyText = "0%, 10%, from, 20%, 30%, to";
shouldBe("rules10.length", "2");
shouldBe("rules10.item(0).type", "window.CSSRule.KEYFRAME_RULE");
shouldBe("rules10.item(0).keyText", "'0%, 10%, 0%, 20%, 30%, 100%'");
shouldBe("rules10.item(1).keyText", "'90%, 100%'");

debug("");
debug("Set a keyframe key with an out-of-range value");

var rules11 = document.styleSheets.item(0).cssRules.item(10).cssRules;
shouldThrow('rules11.item(0).keyText = "40%, -50%, 60%";');
shouldBe("rules11.length", "2");
shouldBe("rules11.item(0).type", "window.CSSRule.KEYFRAME_RULE");
shouldBe("rules11.item(0).keyText", "'0%'");
shouldBe("rules11.item(1).keyText", "'90%, 100%'");

debug("");
debug("Set a keyframe key with an invalid value");

var rules12 = document.styleSheets.item(0).cssRules.item(11).cssRules;
shouldThrow('rules12.item(0).keyText = "foo";');
shouldBe("rules12.length", "2");
shouldBe("rules12.item(0).type", "window.CSSRule.KEYFRAME_RULE");
shouldBe("rules12.item(0).keyText", "'0%'");
shouldBe("rules12.item(1).keyText", "'90%, 100%'");

debug("");
debug("Set a keyframe key with a null value");

var rules13 = document.styleSheets.item(0).cssRules.item(12).cssRules;
shouldThrow('rules13.item(0).keyText = null;');
shouldBe("rules13.length", "2");
shouldBe("rules13.item(0).type", "window.CSSRule.KEYFRAME_RULE");
shouldBe("rules13.item(0).keyText", "'0%'");
shouldBe("rules13.item(1).keyText", "'90%, 100%'");

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