[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / unprefixed-keyframes-rule.html
1 <html>
2 <head>
3 <style>
4   @keyframes test1 {
5     from { left: 10px; }
6     to { left: 20px; }
7   }
8   @keyframes test2 {
9     0% { left: 10px; }
10     50% { left: 30px; }
11     100% { left: 20px; }
12   }
13   @keyframes test-from-to {
14     from { left: 10px; }
15     50% { left: 30px; }
16     to { left: 20px; }
17   }
18   @keyframes test-find-last {
19     from { left: -1px;  }
20     0% { left: 0px; }
21     10% { left: -1px; }
22     10% { left: 10px;}
23     10%, 20% { left: -1px;   }
24     10%,20% { left: 1020px; }
25     100% { left: -1px; }
26     to { left: 100px; }
27   }
28   @keyframes test-delete-last {
29     from { left: 0px;  }
30     0% { left: -1px; }
31     10% { left: 10px; }
32     10% { left: -1px;}
33     10%, 20% { left: 1020px;   }
34     10%,20% { left: -1px; }
35     100% { left: 100px; }
36     to { left: -1px; }
37   }
38
39 </style>
40 <script src="../resources/js-test-pre.js"></script>
41 </head>
42 <body>
43 <script>
44
45 description("This tests unprefixed @keyframes parsing and the CSSKeyframeRule and CSSKeyframesRule interfaces.");
46
47 if (window.CSSKeyframeRule)
48     testPassed("CSSKeyframeRule exists on Window object");
49 else
50     testFailed("CSSKeyframeRule does not exist on Window object");
51
52 if (window.CSSKeyframesRule)
53     testPassed("CSSKeyframesRule exists on Window object");
54 else
55     testFailed("CSSKeyframesRule does not exist on Window object");
56
57 if (window.CSSRule.KEYFRAME_RULE)
58     testPassed("KEYFRAME_RULE exists on Window.CSSRule object");
59 else
60     testFailed("KEYFRAME_RULE does not exist on Window.CSSRule object");
61
62 if (window.CSSRule.KEYFRAMES_RULE)
63     testPassed("KEYFRAMES_RULE exists on Window.CSSRule object");
64 else
65     testFailed("KEYFRAMES_RULE does not exist on Window.CSSRule object");
66
67 debug("");
68
69 debug("Check that the old values still work.");
70 shouldBe("window.CSSRule.KEYFRAME_RULE", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
71 shouldBe("window.CSSRule.KEYFRAMES_RULE", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
72
73 debug("")
74
75 var keyframes1 = document.styleSheets.item(0).cssRules.item(0);
76
77 shouldBe("keyframes1.type", "window.CSSRule.KEYFRAMES_RULE");
78 shouldBe("keyframes1.name", "'test1'");
79
80 debug("");
81
82 var rules1 = keyframes1.cssRules;
83 shouldBe("rules1.length", "2");
84
85 shouldBe("rules1.item(0).type", "window.CSSRule.KEYFRAME_RULE");
86 shouldBe("rules1.item(0).cssText", "'0% { left: 10px; }'");
87 shouldBe("rules1.item(1).cssText", "'100% { left: 20px; }'");
88
89 debug("");
90 debug("Insert three new rules");
91 keyframes1.appendRule("30% { left: 30px; }");
92 keyframes1.appendRule("60% { left: 60px; }");
93 keyframes1.appendRule("20% { left: 50px; }");
94 shouldBe("rules1.length", "5");
95
96 shouldBe("rules1.item(0).cssText", "'0% { left: 10px; }'");
97 shouldBe("rules1.item(1).cssText", "'100% { left: 20px; }'");
98 shouldBe("rules1.item(2).cssText", "'30% { left: 30px; }'");
99 shouldBe("rules1.item(3).cssText", "'60% { left: 60px; }'");
100 shouldBe("rules1.item(4).cssText", "'20% { left: 50px; }'");
101
102 debug("");
103
104 var keyframes2 = document.styleSheets.item(0).cssRules.item(1);
105
106 shouldBe("keyframes2.type", "window.CSSRule.KEYFRAMES_RULE");
107 shouldBe("keyframes2.name", "'test2'");
108
109 var rules2 = keyframes2.cssRules;
110
111 debug("");
112
113 shouldBe("rules2.length", "3");
114
115 shouldBe("rules2.item(0).type", "window.CSSRule.KEYFRAME_RULE");
116 shouldBe("rules2.item(0).keyText", "'0%'");
117 shouldBe("rules2.item(1).keyText", "'50%'");
118 shouldBe("rules2.item(2).keyText", "'100%'");
119
120 shouldBe("rules2.item(0).cssText", "'0% { left: 10px; }'");
121 shouldBe("rules2.item(1).cssText", "'50% { left: 30px; }'");
122 shouldBe("rules2.item(2).cssText", "'100% { left: 20px; }'");
123
124 debug("");
125
126 shouldBeType("rules2.item(0).style", "CSSStyleDeclaration");
127 shouldBe("rules2.item(0).style.length", "1");
128
129 debug("");
130 debug("Find a rule");
131
132 var rule = keyframes2.findRule("50%");
133
134 if (!rule)
135   testFailed("Could not extract '50%' keyframe rule");
136
137 shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
138 shouldBe("rule.cssText", "'50% { left: 30px; }'");
139
140 debug("");
141 debug("Find a rule using from and to");
142
143 var keyframesFromTo = document.styleSheets.item(0).cssRules.item(2);
144 shouldBe("keyframesFromTo.type", "window.CSSRule.KEYFRAMES_RULE");
145 rule = keyframesFromTo.findRule("From");
146 shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
147 shouldBe("rule.cssText", "'0% { left: 10px; }'");
148
149 rule = keyframesFromTo.findRule("TO");
150 shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
151 shouldBe("rule.cssText", "'100% { left: 20px; }'");
152
153 debug("");
154 debug("Try to find a rule that doesn't exist");
155
156 rule = keyframes2.findRule("70%");
157
158 if (rule)
159   testFailed("Was able to find the non-existent '70%' keyframe rule");
160 else
161   testPassed("Non-existent rule was not found");
162
163 debug("");
164 debug("Try to find a rule using a malformed key");
165
166 rule = keyframes2.findRule("1");
167
168 shouldBe("rule", "null");
169
170 debug("");
171 debug("Delete a rule");
172
173 keyframes2.deleteRule("50%");
174 shouldBe("rules2.length", "2");
175 shouldBe("rules2.item(0).type", "window.CSSRule.KEYFRAME_RULE");
176 shouldBe("rules2.item(0).keyText", "'0%'");
177 shouldBe("rules2.item(1).keyText", "'100%'");
178
179 debug("");
180 debug("Delete a from rule");
181 keyframesFromTo.deleteRule("0%");
182 var rulesFromTo = keyframesFromTo.cssRules;
183 shouldBe("rulesFromTo.length", "2");
184 shouldBe("rulesFromTo.item(0).type", "window.CSSRule.KEYFRAME_RULE");
185 shouldBe("rulesFromTo.item(0).keyText", "'50%'");
186 shouldBe("rulesFromTo.item(1).keyText", "'100%'");
187
188
189 debug("");
190 debug("Delete a rule that doesn't exist");
191
192 keyframes2.deleteRule("70%");
193 shouldBe("rules2.length", "2");
194 shouldBe("rules2.item(0).type", "window.CSSRule.KEYFRAME_RULE");
195 shouldBe("rules2.item(0).keyText", "'0%'");
196 shouldBe("rules2.item(1).keyText", "'100%'");
197
198 debug("");
199 debug("findRule matching order: from last to first specified");
200
201 var keyframesFindLast = document.styleSheets.item(0).cssRules.item(3);
202 shouldBe("keyframesFindLast.type", "window.CSSRule.KEYFRAMES_RULE");
203 shouldBe("keyframesFindLast.name", "'test-find-last'");
204
205
206 rule = keyframesFindLast.findRule("10%");
207 shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
208 shouldBe("rule.cssText", "'10% { left: 10px; }'");
209 rule = keyframesFindLast.findRule("10.0%");
210 shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
211 shouldBe("rule.cssText", "'10% { left: 10px; }'");
212 rule = keyframesFindLast.findRule("10%,20%");
213 shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
214 shouldBe("rule.cssText", "'10%,20%  { left: 10px; }'");
215 rule = keyframesFindLast.findRule("   10%, 20% ");
216 shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
217 shouldBe("rule.cssText", "'10%,20%  { left: 10px; }'");
218 rule = keyframesFindLast.findRule("20%, 10% ");
219 shouldBe("rule", "null");
220 rule = keyframesFindLast.findRule("from");
221 shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
222 shouldBe("rule.cssText", "'0% { left: 0px; }'");
223 rule = keyframesFindLast.findRule("100%");
224 shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
225 shouldBe("rule.cssText", "'100% { left: 100px; }'");
226
227 debug("");
228 debug("deleteRule matching order: from last to first specified");
229
230 var keyframesDeleteLast = document.styleSheets.item(0).cssRules.item(4);
231 shouldBe("keyframesDeleteLast.type", "window.CSSRule.KEYFRAMES_RULE");
232 shouldBe("keyframesDeleteLast.name", "'test-delete-last'");
233
234 var rulesDeleteLast = keyframesDeleteLast.cssRules;
235 shouldBe("rulesDeleteLast.length", "8");
236
237 keyframesDeleteLast.deleteRule("10%");
238 shouldBe("rulesDeleteLast.length", "7");
239 rule = keyframesDeleteLast.findRule("10%");
240 shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
241 shouldBe("rule.cssText", "'10% { left: 10px; }'");
242 keyframesDeleteLast.deleteRule("10%,20%");
243 shouldBe("rulesDeleteLast.length", "6");
244 rule = keyframesDeleteLast.findRule("10%,20%");
245 shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
246 shouldBe("rule.cssText", "'10%,20% { left: 1020px; }'");
247 keyframesDeleteLast.deleteRule("20%, 10% ");
248 shouldBe("rulesDeleteLast.length", "6");
249 keyframesDeleteLast.deleteRule("from");
250 shouldBe("rulesDeleteLast.length", "5");
251 rule = keyframesDeleteLast.findRule("from");
252 shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
253 shouldBe("rule.cssText", "'0% { left: 0px; }'");
254 keyframesDeleteLast.deleteRule("100%");
255 shouldBe("rulesDeleteLast.length", "4");
256 rule = keyframesDeleteLast.findRule("100%");
257 shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
258 shouldBe("rule.cssText", "'100% { left: 100px; }'");
259
260 debug("");
261
262 </script>
263 <script src="../resources/js-test-post.js"></script>
264 </body>
265 </html>