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