3 <link rel=
"stylesheet" href=
"../fast/js/resources/js-test-style.css">
4 <style type=
"text/css" media=
"screen">
5 @-webkit-keyframes test1 {
9 @-webkit-keyframes test2 {
15 <script src=
"../fast/js/resources/js-test-pre.js"></script>
18 <p id=
"description"></p>
19 <div id=
"console"></div>
22 description("This tests the WebKitCSSKeyframeRule and WebKitCSSKeyframesRule interfaces.");
24 if (window
.CSSRule
.WEBKIT_KEYFRAME_RULE
)
25 testPassed("WEBKIT_KEYFRAME_RULE exists on Window object");
27 testFailed("WEBKIT_KEYFRAME_RULE does not exist on Window object");
29 if (window
.CSSRule
.WEBKIT_KEYFRAMES_RULE
)
30 testPassed("WEBKIT_KEYFRAMES_RULE exists on Window object");
32 testFailed("WEBKIT_KEYFRAMES_RULE does not exist on Window object");
36 var keyframes1
= document
.styleSheets
.item(1).cssRules
.item(0);
38 shouldBe("keyframes1.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
39 shouldBe("keyframes1.name", "'test1'");
43 var rules1
= keyframes1
.cssRules
;
44 shouldBe("rules1.length", "2");
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; }'");
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");
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; }'");
65 var keyframes2
= document
.styleSheets
.item(1).cssRules
.item(1);
67 shouldBe("keyframes2.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
68 shouldBe("keyframes2.name", "'test2'");
70 var rules2
= keyframes2
.cssRules
;
74 shouldBe("rules2.length", "3");
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%'");
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; }'");
87 shouldBe("typeof(rules2.item(0).style)", "typeof(CSSStyleDeclaration)");
88 shouldBe("rules2.item(0).style.length", "1");
93 var rule
= keyframes2
.findRule("50%");
96 testFailed("Could not extract '50%' keyframe rule");
98 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
99 shouldBe("rule.cssText", "'50% { left: 30px; }'");
102 debug("Try to find a rule that doesn't exist");
104 rule
= keyframes2
.findRule("70%");
107 testFailed("Was able to find the non-existent '70%' keyframe rule");
109 testPassed("Non-existent rule was not found");
112 debug("Delete a rule");
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%'");
121 debug("Delete a rule that doesn't exist");
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%'");
130 successfullyParsed
= true;
133 <script src=
"../fast/js/resources/js-test-post.js"></script>