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