LayoutTests/animations/keyframes-rule.html

   1 <html>
   2 <head>
   3 <link rel="stylesheet" href="../fast/js/resources/js-test-style.css">
   4 <style type="text/css" media="screen">
   5   @-webkit-keyframes test1 {
   6     from { left: 10px; }
   7     to { left: 20px; }
   8   }
   9   @-webkit-keyframes test2 {
  10     0% { left: 10px; }
  11     50% { left: 30px; }
  12     100% { left: 20px; }
  13   }
  14   @-webkit-keyframes test-from-to {
  15     from { left: 10px; }
  16     50% { left: 30px; }
  17     to { left: 20px; }
  18   }
  19 </style>
  20 <script src="../fast/js/resources/js-test-pre.js"></script>
  21 </head>
  22 <body>
  23 <p id="description"></p>
  24 <div id="console"></div>
  25 <script>
  26
  27 description("This tests the WebKitCSSKeyframeRule and WebKitCSSKeyframesRule interfaces.");
  28
  29 if (window.WebKitCSSKeyframeRule)
  30     testPassed("WebKitCSSKeyframeRule exists on Window object");
  31 else
  32     testFailed("WebKitCSSKeyframeRule does not exist on Window object");
  33
  34 if (window.WebKitCSSKeyframesRule)
  35     testPassed("WebKitCSSKeyframesRule exists on Window object");
  36 else
  37     testFailed("WebKitCSSKeyframesRule does not exist on Window object");
  38
  39 if (window.CSSRule.WEBKIT_KEYFRAME_RULE)
  40     testPassed("WEBKIT_KEYFRAME_RULE exists on Window.CSSRule object");
  41 else
  42     testFailed("WEBKIT_KEYFRAME_RULE does not exist on Window.CSSRule object");
  43
  44 if (window.CSSRule.WEBKIT_KEYFRAMES_RULE)
  45     testPassed("WEBKIT_KEYFRAMES_RULE exists on Window.CSSRule object");
  46 else
  47     testFailed("WEBKIT_KEYFRAMES_RULE does not exist on Window.CSSRule object");
  48
  49 debug("");
  50
  51 var keyframes1 = document.styleSheets.item(1).cssRules.item(0);
  52
  53 shouldBe("keyframes1.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
  54 shouldBe("keyframes1.name", "'test1'");
  55
  56 debug("");
  57
  58 var rules1 = keyframes1.cssRules;
  59 shouldBe("rules1.length", "2");
  60
  61 shouldBe("rules1.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
  62 shouldBe("rules1.item(0).cssText", "'0% { left: 10px; }'");
  63 shouldBe("rules1.item(1).cssText", "'100% { left: 20px; }'");
  64
  65 debug("");
  66 debug("Insert three new rules");
  67 keyframes1.insertRule("30% { left: 30px; }");
  68 keyframes1.insertRule("60% { left: 60px; }");
  69 keyframes1.insertRule("20% { left: 50px; }");
  70 shouldBe("rules1.length", "5");
  71
  72 shouldBe("rules1.item(0).cssText", "'0% { left: 10px; }'");
  73 shouldBe("rules1.item(1).cssText", "'100% { left: 20px; }'");
  74 shouldBe("rules1.item(2).cssText", "'30% { left: 30px; }'");
  75 shouldBe("rules1.item(3).cssText", "'60% { left: 60px; }'");
  76 shouldBe("rules1.item(4).cssText", "'20% { left: 50px; }'");
  77
  78 debug("");
  79
  80 var keyframes2 = document.styleSheets.item(1).cssRules.item(1);
  81
  82 shouldBe("keyframes2.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
  83 shouldBe("keyframes2.name", "'test2'");
  84
  85 var rules2 = keyframes2.cssRules;
  86
  87 debug("");
  88
  89 shouldBe("rules2.length", "3");
  90
  91 shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
  92 shouldBe("rules2.item(0).keyText", "'0%'");
  93 shouldBe("rules2.item(1).keyText", "'50%'");
  94 shouldBe("rules2.item(2).keyText", "'100%'");
  95
  96 shouldBe("rules2.item(0).cssText", "'0% { left: 10px; }'");
  97 shouldBe("rules2.item(1).cssText", "'50% { left: 30px; }'");
  98 shouldBe("rules2.item(2).cssText", "'100% { left: 20px; }'");
  99
 100 debug("");
 101
 102 shouldBe("typeof(rules2.item(0).style)", "typeof(CSSStyleDeclaration)");
 103 shouldBe("rules2.item(0).style.length", "1");
 104
 105 debug("");
 106 debug("Find a rule");
 107
 108 var rule = keyframes2.findRule("50%");
 109
 110 if (!rule)
 111   testFailed("Could not extract '50%' keyframe rule");
 112
 113 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 114 shouldBe("rule.cssText", "'50% { left: 30px; }'");
 115
 116 debug("");
 117 debug("Find a rule using from and to");
 118
 119 var keyframesFromTo = document.styleSheets.item(1).cssRules.item(2);
 120 shouldBe("keyframesFromTo.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
 121 rule = keyframesFromTo.findRule("From");
 122 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 123 shouldBe("rule.cssText", "'0% { left: 10px; }'");
 124
 125 rule = keyframesFromTo.findRule("TO");
 126 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 127 shouldBe("rule.cssText", "'100% { left: 20px; }'");
 128
 129 debug("");
 130 debug("Try to find a rule that doesn't exist");
 131
 132 rule = keyframes2.findRule("70%");
 133
 134 if (rule)
 135   testFailed("Was able to find the non-existent '70%' keyframe rule");
 136 else
 137   testPassed("Non-existent rule was not found");
 138
 139 debug("");
 140 debug("Delete a rule");
 141
 142 keyframes2.deleteRule("50%");
 143 shouldBe("rules2.length", "2");
 144 shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 145 shouldBe("rules2.item(0).keyText", "'0%'");
 146 shouldBe("rules2.item(1).keyText", "'100%'");
 147
 148 debug("");
 149 debug("Delete a from rule");
 150 keyframesFromTo.deleteRule("0%");
 151 var rulesFromTo = keyframesFromTo.cssRules;
 152 shouldBe("rulesFromTo.length", "2");
 153 shouldBe("rulesFromTo.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 154 shouldBe("rulesFromTo.item(0).keyText", "'50%'");
 155 shouldBe("rulesFromTo.item(1).keyText", "'100%'");
 156
 157
 158 debug("");
 159 debug("Delete a rule that doesn't exist");
 160
 161 keyframes2.deleteRule("70%");
 162 shouldBe("rules2.length", "2");
 163 shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 164 shouldBe("rules2.item(0).keyText", "'0%'");
 165 shouldBe("rules2.item(1).keyText", "'100%'");
 166
 167 debug("");
 168 successfullyParsed = true;
 169
 170 </script>
 171 <script src="../fast/js/resources/js-test-post.js"></script>
 172 </body>
 173 </html>