[Web Animations] Expose Web Animations CSS integration as an experimental feature
[WebKit-https.git] / LayoutTests / animations / unprefixed-properties.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../resources/js-test-pre.js"></script>
5 </head>
6 <body>
7 <p id="description"></p>
8 <div id="console"></div>
9 <script>
10
11 description("Test the unprefixed animation properties.");
12
13 // These have to be global for the test helpers to see them.
14 var stylesheet, cssRule, declaration, animationRule, subRule, animationStyle;
15 var styleElement = document.createElement("style");
16 document.head.appendChild(styleElement);
17 stylesheet = styleElement.sheet;
18
19 function testAnimationRule(description, property, value, expectedTexts)
20 {
21     debug("");
22     debug("Parsing - " + description + " : " + value);
23
24     stylesheet.insertRule("section { " + property + ": " + value + "; }", 0);
25     cssRule = stylesheet.cssRules.item(0);
26
27     shouldBe("cssRule.type", "1");
28
29     declaration = cssRule.style;
30     shouldBe("declaration.length", "1");
31     shouldBe("declaration.getPropertyValue('" + property + "')", "'" + value + "'");
32     shouldBe("declaration.getPropertyValue('-webkit-" + property + "')", "'" + value + "'");
33
34     animationRule = declaration.getPropertyCSSValue(property);
35
36     if (animationRule && animationRule.length > 1 && expectedTexts && expectedTexts.length > 1) {
37         for (var i = 0; i < expectedTexts.length; i++) {
38             subRule = animationRule[i];
39             shouldBe("subRule.cssText", "'" + expectedTexts[i] + "'");
40         }
41     }
42
43     stylesheet.deleteRule(0);
44 }
45
46 function testInvalidAnimationRule(description, property, value)
47 {
48     debug("");
49     debug("Invalid - " + description + " : " + value);
50
51     stylesheet.insertRule("section { " + property + ": " + value + "; }", 0);
52     cssRule = stylesheet.cssRules.item(0);
53
54     shouldBe("cssRule.type", "1");
55
56     declaration = cssRule.style;
57     shouldBe("declaration.length", "0");
58     shouldBeEqualToString("declaration.getPropertyValue('" + property + "')", "");
59
60     stylesheet.deleteRule(0);
61 }
62
63 function testComputedAnimationRule(description, property, value, expectedTexts)
64 {
65     debug("");
66     debug("Computed Style - " + description + " : " + value);
67
68     stylesheet.insertRule("body { " + property + ": " + value + "; }", 0);
69
70     animationStyle = window.getComputedStyle(document.body).getPropertyCSSValue(property);
71
72     if (animationStyle && animationStyle.length > 1 && expectedTexts && expectedTexts.length > 1) {
73         for (var i = 0; i < expectedTexts.length; i++) {
74             subRule = animationStyle[i];
75             shouldBe("subRule.cssText", "'" + expectedTexts[i] + "'");
76         }
77     } else
78         shouldBe("animationStyle.cssText", "'" + value + "'");
79
80     stylesheet.deleteRule(0);
81 }
82
83
84 testAnimationRule("Basic animation-name",
85                   "animation-name", "waldo");
86
87 testAnimationRule("Multiple animation-names",
88                   "animation-name", "waldo, wally",
89                   ["waldo", "wally"]);
90
91 testAnimationRule("Basic animation-duration",
92                   "animation-duration", "5s");
93
94 testAnimationRule("Multiple animation-durations",
95                   "animation-duration", "10s, 20ms",
96                   ["10s", "20ms"]);
97
98 testAnimationRule("Basic animation-delay",
99                   "animation-delay", "5s");
100
101 testAnimationRule("Multiple animation-delays",
102                   "animation-delay", "10s, 20ms",
103                   ["10s", "20ms"]);
104
105 testAnimationRule("Basic animation-timing-function",
106                   "animation-timing-function", "ease-in-out");
107
108 testAnimationRule("animation-timing-function with bezier",
109                   "animation-timing-function", "cubic-bezier(0.2, 0.3, 0.4, 0.5)");
110
111 testAnimationRule("Multiple animation-timing-functions",
112                   "animation-timing-function", "ease-in, ease-out",
113                   ["ease-in", "ease-out"]);
114
115 testAnimationRule("Basic animation-iteration-count",
116                   "animation-iteration-count", "4");
117
118 testAnimationRule("animation-iteration-count with keyword",
119                   "animation-iteration-count", "infinite");
120
121 testAnimationRule("Multiple animation-iteration-counts",
122                   "animation-iteration-count", "2, infinite, 4",
123                   ["2", "infinite", "4"]);
124
125 testAnimationRule("Normal animation-direction",
126                   "animation-direction", "normal");
127
128 testAnimationRule("Alternate animation-direction",
129                   "animation-direction", "alternate");
130
131 testAnimationRule("Reverse animation-direction",
132                   "animation-direction", "reverse");
133
134 testAnimationRule("Alternate Reverse animation-direction",
135                   "animation-direction", "alternate-reverse");
136
137 testAnimationRule("Multiple animation-directions",
138                   "animation-direction", "alternate, alternate, normal",
139                   ["alternate", "alternate", "normal"]);
140
141 testAnimationRule("None animation-fill-mode",
142                   "animation-fill-mode", "none");
143
144 testAnimationRule("Forwards animation-fill-mode",
145                   "animation-fill-mode", "forwards");
146
147 testAnimationRule("Backwards animation-fill-mode",
148                   "animation-fill-mode", "backwards");
149
150 testAnimationRule("Both animation-fill-mode",
151                   "animation-fill-mode", "both");
152
153 testAnimationRule("Multiple animation-fill-modes",
154                   "animation-fill-mode", "none, forwards, backwards, both",
155                   ["none", "forwards", "backwards", "both"]);
156
157 testInvalidAnimationRule("duration - Bad value", "animation-duration", "10cm");
158 testInvalidAnimationRule("duration - List with bad value", "animation-duration", "10ms, 10cm, 10s");
159
160 testInvalidAnimationRule("delay - Bad value", "animation-delay", "10cm");
161 testInvalidAnimationRule("delay - List with bad value", "animation-delay", "10ms, 10cm, 10s");
162
163 testInvalidAnimationRule("timing-function - Wrong keyword parameter", "animation-timing-function", "egg");
164 testInvalidAnimationRule("timing-function - List with wrong keyword parameter", "animation-timing-function", "ease-in, egg, ease-out");
165
166 testInvalidAnimationRule("iteration-count - Wrong keyword parameter", "animation-iteration-count", "banana");
167 testInvalidAnimationRule("iteration-count - List with wrong keyword parameter", "animation-iteration-count", "infinite, 10, banana");
168
169 testInvalidAnimationRule("direction - Wrong keyword parameter", "animation-direction", "all");
170 testInvalidAnimationRule("direction - List with wrong keyword parameter", "animation-direction", "normal, alternate, none");
171
172 testInvalidAnimationRule("fill-mode - Wrong keyword parameter", "animation-fill-mode", "all");
173 testInvalidAnimationRule("fill-mode - List with wrong keyword parameter", "animation-fill-mode", "none, backwards, left, alternate, forwards");
174
175 testComputedAnimationRule("Basic animation-name",
176                           "animation-name", "waldo");
177
178 testComputedAnimationRule("Multiple animation-names",
179                           "animation-name", "waldo, wally",
180                           ["waldo", "wally"]);
181
182 testComputedAnimationRule("Basic animation-duration",
183                           "animation-duration", "5s");
184
185 testComputedAnimationRule("Multiple animation-durations",
186                           "animation-duration", "10s, 20ms",
187                           ["10s", "0.02s"]);
188
189 testComputedAnimationRule("Basic animation-delay",
190                           "animation-delay", "5s");
191
192 testComputedAnimationRule("Multiple animation-delays",
193                           "animation-delay", "10s, 20ms",
194                           ["10s", "0.02s"]);
195
196 testComputedAnimationRule("Basic animation-timing-function",
197                           "animation-timing-function", "ease-in-out");
198
199 testComputedAnimationRule("animation-timing-function with bezier",
200                           "animation-timing-function", "cubic-bezier(0.2, 0.3, 0.4, 0.5)");
201
202 testComputedAnimationRule("Multiple animation-timing-functions",
203                           "animation-timing-function", "ease-in, ease-out",
204                           ["ease-in", "ease-out"]);
205
206 testComputedAnimationRule("Basic animation-iteration-count",
207                           "animation-iteration-count", "4");
208
209 testComputedAnimationRule("animation-iteration-count with keyword",
210                           "animation-iteration-count", "infinite");
211
212 testComputedAnimationRule("Multiple animation-iteration-counts",
213                           "animation-iteration-count", "2, infinite, 4",
214                           ["2", "infinite", "4"]);
215
216 testComputedAnimationRule("Normal animation-direction",
217                           "animation-direction", "normal");
218
219 testComputedAnimationRule("Alternate animation-direction",
220                           "animation-direction", "alternate");
221
222 testComputedAnimationRule("Reverse animation-direction",
223                           "animation-direction", "reverse");
224
225 testComputedAnimationRule("Alternate Reverse animation-direction",
226                           "animation-direction", "alternate-reverse");
227
228 testComputedAnimationRule("Multiple animation-directions",
229                           "animation-direction", "alternate, alternate, normal",
230                           ["alternate", "alternate", "normal"]);
231
232 testComputedAnimationRule("None animation-fill-mode",
233                           "animation-fill-mode", "none");
234
235 testComputedAnimationRule("Forwards animation-fill-mode",
236                           "animation-fill-mode", "forwards");
237
238 testComputedAnimationRule("Backwards animation-fill-mode",
239                           "animation-fill-mode", "backwards");
240
241 testComputedAnimationRule("Both animation-fill-mode",
242                           "animation-fill-mode", "both");
243
244 testComputedAnimationRule("Multiple animation-fill-modes",
245                           "animation-fill-mode", "none, forwards, backwards, both",
246                           ["none", "forwards", "backwards", "both"]);
247
248 successfullyParsed = true;
249
250 </script>
251 <script src="../resources/js-test-post.js"></script>
252 </body>
253 </html>