third_party/WebKit/LayoutTests/animations/keyframes-rule.html

   1 <html>
   2 <head>
   3 <style type="text/css" media="screen">
   4   @-webkit-keyframes test1 {
   5     from { left: 10px; }
   6     to { left: 20px; }
   7   }
   8   @-webkit-keyframes test2 {
   9     from { left: 10px; }
  10     to { left: 20px; }
  11     30% { left: 30px; }
  12     60% { left: 60px; }
  13     20% { left: 50px; }
  14   }
  15   @-webkit-keyframes test3 {
  16     0% { left: 10px; }
  17     50% , 60% { left: 30px; }
  18     -10% { left: 50px; }
  19     90%, 100% { left: 20px; }
  20   }
  21   @-webkit-keyframes test4 {
  22     from { left: 10px; }
  23     50% { left: 30px; }
  24     to { left: 20px; }
  25   }
  26   @-webkit-keyframes test5 {
  27     0% { left: 10px; }
  28     50% , 60% { left: 30px; }
  29     90%, 100% { left: 20px; }
  30   }
  31   @-webkit-keyframes test6 {
  32     from { left: 10px; }
  33     50% { left: 30px; }
  34     to { left: 20px; }
  35   }
  36   @-webkit-keyframes test7 {
  37     0% { left: 10px; }
  38     90%, 100% { left: 20px; }
  39   }
  40   @-webkit-keyframes test8 {
  41     0% { left: 10px; }
  42     90%, 100% { left: 20px; }
  43   }
  44   @-webkit-keyframes test9 {
  45     0% { left: 10px; }
  46     90%, 100% { left: 20px; }
  47   }
  48   @-webkit-keyframes test10 {
  49     0% { left: 10px; }
  50     90%, 100% { left: 20px; }
  51   }
  52   @-webkit-keyframes test11 {
  53     0% { left: 10px; }
  54     90%, 100% { left: 20px; }
  55   }
  56   @-webkit-keyframes test12 {
  57     0% { left: 10px; }
  58     90%, 100% { left: 20px; }
  59   }
  60   @-webkit-keyframes test13 {
  61     0% { left: 10px; }
  62     90%, 100% { left: 20px; }
  63   }
  64 </style>
  65 <script src="../resources/js-test.js"></script>
  66 </head>
  67 <body>
  68 <script>
  69
  70 description("This tests the CSSKeyframeRule and CSSKeyframesRule interfaces.");
  71
  72 debug("Constants");
  73 if (window.CSSKeyframeRule)
  74     testPassed("CSSKeyframeRule exists on Window object");
  75 else
  76     testFailed("CSSKeyframeRule does not exist on Window object");
  77
  78 if (window.CSSKeyframesRule)
  79     testPassed("CSSKeyframesRule exists on Window object");
  80 else
  81     testFailed("CSSKeyframesRule does not exist on Window object");
  82
  83 if (window.CSSRule.WEBKIT_KEYFRAME_RULE)
  84     testPassed("WEBKIT_KEYFRAME_RULE exists on Window.CSSRule object");
  85 else
  86     testFailed("WEBKIT_KEYFRAME_RULE does not exist on Window.CSSRule object");
  87
  88 if (window.CSSRule.WEBKIT_KEYFRAMES_RULE)
  89     testPassed("WEBKIT_KEYFRAMES_RULE exists on Window.CSSRule object");
  90 else
  91     testFailed("WEBKIT_KEYFRAMES_RULE does not exist on Window.CSSRule object");
  92
  93 if (window.CSSRule.KEYFRAME_RULE)
  94     testPassed("KEYFRAME_RULE exists on Window.CSSRule object");
  95 else
  96     testFailed("KEYFRAME_RULE does not exist on Window.CSSRule object");
  97
  98 if (window.CSSRule.KEYFRAMES_RULE)
  99     testPassed("KEYFRAMES_RULE exists on Window.CSSRule object");
 100 else
 101     testFailed("KEYFRAMES_RULE does not exist on Window.CSSRule object");
 102
 103 debug("");
 104 debug("Basic queries");
 105
 106 var keyframes1 = document.styleSheets.item(0).cssRules.item(0);
 107 shouldBe("keyframes1.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
 108 shouldBe("keyframes1.name", "'test1'");
 109
 110 var rules1 = keyframes1.cssRules;
 111 shouldBe("rules1.length", "2");
 112 shouldBe("rules1.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 113 shouldBe("rules1.item(0).cssText", "'0% { left: 10px; }'");
 114 shouldBe("rules1.item(1).cssText", "'100% { left: 20px; }'");
 115
 116 debug("");
 117 debug("Insert new rules");
 118
 119 keyframes1.appendRule("30% { left: 30px; }");
 120 keyframes1.appendRule("60% { left: 60px; }");
 121 keyframes1.appendRule("20% { left: 50px; }");
 122
 123 shouldBe("rules1.length", "5");
 124 shouldBe("rules1.item(0).cssText", "'0% { left: 10px; }'");
 125 shouldBe("rules1.item(1).cssText", "'100% { left: 20px; }'");
 126 shouldBe("rules1.item(2).cssText", "'30% { left: 30px; }'");
 127 shouldBe("rules1.item(3).cssText", "'60% { left: 60px; }'");
 128 shouldBe("rules1.item(4).cssText", "'20% { left: 50px; }'");
 129
 130 debug("");
 131 debug("Insert invalid rules");
 132
 133 var keyframes2 = document.styleSheets.item(0).cssRules.item(1);
 134 keyframes2.appendRule("foo");
 135 keyframes2.appendRule("foo { left: 30px; }");
 136 keyframes2.appendRule("-10% { left: 30px; }");
 137 keyframes2.appendRule("10% { left: 30px; }");
 138
 139 var rules2 = keyframes2.cssRules;
 140 shouldBe("rules2.length", "6");
 141 shouldBe("rules2.item(5).cssText", "'10% { left: 30px; }'");
 142
 143 debug("");
 144 debug("Keys");
 145
 146 var keyframes3 = document.styleSheets.item(0).cssRules.item(2);
 147 shouldBe("keyframes3.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
 148 shouldBe("keyframes3.name", "'test3'");
 149
 150 var rules3 = keyframes3.cssRules;
 151 shouldBe("rules3.length", "3");
 152 shouldBe("rules3.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 153 shouldBe("rules3.item(0).keyText", "'0%'");
 154 shouldBe("rules3.item(1).keyText", "'50%,60%'");
 155 shouldBe("rules3.item(2).keyText", "'90%,100%'");
 156 shouldBe("rules3.item(0).cssText", "'0% { left: 10px; }'");
 157 shouldBe("rules3.item(1).cssText", "'50%,60% { left: 30px; }'");
 158 shouldBe("rules3.item(2).cssText", "'90%,100% { left: 20px; }'");
 159
 160 debug("");
 161 debug("Find a rule");
 162
 163 shouldBeType("rules3.item(0).style", "CSSStyleDeclaration");
 164 shouldBe("rules3.item(0).style.length", "1");
 165 var rule = keyframes3.findRule("0%");
 166
 167 if (!rule)
 168   testFailed("Could not extract '0%' keyframe rule");
 169 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 170 shouldBe("rule.cssText", "'0% { left: 10px; }'");
 171
 172 debug("");
 173 debug("Find a rule with multiple key values");
 174 var rule = keyframes3.findRule("50%,60%");
 175
 176 if (!rule)
 177   testFailed("Could not extract '50%,60%' keyframe rule");
 178 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 179 shouldBe("rule.cssText", "'50%,60% { left: 30px; }'");
 180
 181 debug("");
 182 debug("Find a rule using from and to");
 183
 184 var keyframes4 = document.styleSheets.item(0).cssRules.item(3);
 185 shouldBe("keyframes4.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
 186
 187 rule = keyframes4.findRule("From");
 188 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 189 shouldBe("rule.cssText", "'0% { left: 10px; }'");
 190
 191 rule = keyframes4.findRule("TO");
 192 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 193 shouldBe("rule.cssText", "'100% { left: 20px; }'");
 194
 195 debug("");
 196 debug("Try to find a rule that doesn't exist");
 197
 198 rule = keyframes4.findRule("70%");
 199 if (rule)
 200   testFailed("Was able to find the non-existent '70%' keyframe rule");
 201 else
 202   testPassed("Non-existent rule was not found");
 203
 204 debug("");
 205 debug("Delete a rule");
 206
 207 var keyframes5 = document.styleSheets.item(0).cssRules.item(4);
 208 keyframes5.deleteRule("50%,60%");
 209 var rules5 = keyframes5.cssRules;
 210 shouldBe("rules5.length", "2");
 211 shouldBe("rules5.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 212 shouldBe("rules5.item(0).keyText", "'0%'");
 213 shouldBe("rules5.item(1).keyText", "'90%,100%'");
 214
 215 debug("");
 216 debug("Delete a from rule");
 217
 218 var keyframes6 = document.styleSheets.item(0).cssRules.item(5);
 219 keyframes6.deleteRule("0%");
 220 var rules6 = keyframes6.cssRules;
 221 shouldBe("rules6.length", "2");
 222 shouldBe("rules6.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 223 shouldBe("rules6.item(0).keyText", "'50%'");
 224 shouldBe("rules6.item(1).keyText", "'100%'");
 225
 226 debug("");
 227 debug("Delete a rule that doesn't exist");
 228
 229 var keyframes7 = document.styleSheets.item(0).cssRules.item(6);
 230 keyframes7.deleteRule("70%");
 231 var rules7 = keyframes7.cssRules;
 232 shouldBe("rules7.length", "2");
 233 shouldBe("rules7.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 234 shouldBe("rules7.item(0).keyText", "'0%'");
 235 shouldBe("rules7.item(1).keyText", "'90%,100%'");
 236
 237 debug("");
 238 debug("Set a keyframe key");
 239
 240 var rules8 = document.styleSheets.item(0).cssRules.item(7).cssRules;
 241 rules8.item(0).keyText = "70%";
 242 shouldBe("rules8.length", "2");
 243 shouldBe("rules8.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 244 shouldBe("rules8.item(0).keyText", "'70%'");
 245 shouldBe("rules8.item(1).keyText", "'90%,100%'");
 246
 247 debug("");
 248 debug("Set a keyframe key with 'from'");
 249
 250 var rules9 = document.styleSheets.item(0).cssRules.item(8).cssRules;
 251 rules9.item(0).keyText = "from";
 252 shouldBe("rules9.length", "2");
 253 shouldBe("rules9.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 254 shouldBe("rules9.item(0).keyText", "'0%'");
 255 shouldBe("rules9.item(1).keyText", "'90%,100%'");
 256
 257 debug("");
 258 debug("Set a keyframe key with multiple values");
 259
 260 var rules10 = document.styleSheets.item(0).cssRules.item(9).cssRules;
 261 rules10.item(0).keyText = "0%, 10%, from, 20%, 30%, to";
 262 shouldBe("rules10.length", "2");
 263 shouldBe("rules10.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 264 shouldBe("rules10.item(0).keyText", "'0%,10%,0%,20%,30%,100%'");
 265 shouldBe("rules10.item(1).keyText", "'90%,100%'");
 266
 267 debug("");
 268 debug("Set a keyframe key with an out-of-range value");
 269
 270 var rules11 = document.styleSheets.item(0).cssRules.item(10).cssRules;
 271 shouldThrow('rules11.item(0).keyText = "40%, -50%, 60%";');
 272 shouldBe("rules11.length", "2");
 273 shouldBe("rules11.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 274 shouldBe("rules11.item(0).keyText", "'0%'");
 275 shouldBe("rules11.item(1).keyText", "'90%,100%'");
 276
 277 debug("");
 278 debug("Set a keyframe key with an invalid value");
 279
 280 var rules12 = document.styleSheets.item(0).cssRules.item(11).cssRules;
 281 shouldThrow('rules12.item(0).keyText = "foo";');
 282 shouldBe("rules12.length", "2");
 283 shouldBe("rules12.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 284 shouldBe("rules12.item(0).keyText", "'0%'");
 285 shouldBe("rules12.item(1).keyText", "'90%,100%'");
 286
 287 debug("");
 288 debug("Set a keyframe key with a null value");
 289
 290 var rules13 = document.styleSheets.item(0).cssRules.item(12).cssRules;
 291 shouldThrow('rules13.item(0).keyText = null;');
 292 shouldBe("rules13.length", "2");
 293 shouldBe("rules13.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 294 shouldBe("rules13.item(0).keyText", "'0%'");
 295 shouldBe("rules13.item(1).keyText", "'90%,100%'");
 296
 297 </script>
 298 </body>
 299 </html>