Implement filter function shorthands
[WebKit-https.git] / LayoutTests / css3 / filters / script-tests / filter-property-parsing.js
1 description("Test the parsing of the -webkit-filter property.");
2
3 function jsWrapperClass(node)
4 {
5     if (!node)
6         return "[null]";
7     var string = Object.prototype.toString.apply(node);
8     return string.substr(8, string.length - 9);
9 }
10
11 function shouldBeType(expression, className, prototypeName, constructorName)
12 {
13     if (!prototypeName)
14         prototypeName = className + "Prototype";
15     if (!constructorName)
16         constructorName = className + "Constructor";
17     shouldBe("jsWrapperClass(" + expression + ")", "'" + className + "'");
18     shouldBe("jsWrapperClass(" + expression + ".__proto__)", "'" + prototypeName + "'");
19     shouldBe("jsWrapperClass(" + expression + ".constructor)", "'" + constructorName + "'");
20 }
21
22 // These have to be global for the test helpers to see them.
23 var stylesheet, cssRule, declaration, filterRule, subRule;
24
25 function testFilterRule(description, rule, expectedLength, expectedValue, expectedTypes, expectedTexts)
26 {
27     debug("");
28     debug(description + " : " + rule);
29
30     stylesheet = document.styleSheets.item(0);
31     stylesheet.insertRule("body { -webkit-filter: " + rule + "; }", 0);
32     cssRule = stylesheet.cssRules.item(0);
33   
34     shouldBe("cssRule.type", "1");
35
36     declaration = cssRule.style;
37     shouldBe("declaration.length", "1");
38     shouldBe("declaration.getPropertyValue('-webkit-filter')", "'" + expectedValue + "'");
39
40     filterRule = declaration.getPropertyCSSValue('-webkit-filter');
41     shouldBeType("filterRule", "CSSValueList");
42   
43     shouldBe("filterRule.length", "" + expectedLength); // shouldBe expects string arguments
44   
45     if (filterRule) {
46         for (var i = 0; i < expectedLength; i++) {
47             subRule = filterRule[i];
48             shouldBe("subRule.operationType", expectedTypes[i]);
49             shouldBe("subRule.cssText", "'" + expectedTexts[i] + "'");
50         }
51     }
52 }
53
54 testFilterRule("Basic reference",
55                "url('#a')", 1, "url(\\'#a\\')",
56                ["WebKitCSSFilterValue.CSS_FILTER_REFERENCE"],
57                ["url(\\'#a\\')"]);
58
59 testFilterRule("Bare unquoted reference converting to quoted form",
60                "url(#a)", 1, "url(\\'#a\\')",
61                ["WebKitCSSFilterValue.CSS_FILTER_REFERENCE"],
62                ["url(\\'#a\\')"]);
63
64 testFilterRule("Multiple references",
65                "url('#a') url('#b')", 2, "url(\\'#a\\') url(\\'#b\\')",
66                ["WebKitCSSFilterValue.CSS_FILTER_REFERENCE", "WebKitCSSFilterValue.CSS_FILTER_REFERENCE"],
67                ["url(\\'#a\\')", "url(\\'#b\\')"]);
68
69 testFilterRule("Reference as 2nd value",
70                "grayscale(1) url('#a')", 2, "grayscale(1) url(\\'#a\\')",
71                ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE", "WebKitCSSFilterValue.CSS_FILTER_REFERENCE"],
72                ["grayscale(1)", "url(\\'#a\\')"]);
73
74 testFilterRule("Integer value",
75                "grayscale(1)", 1, "grayscale(1)",
76                ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
77                ["grayscale(1)"]);
78
79 testFilterRule("Float value converts to integer",
80                "grayscale(1.0)", 1, "grayscale(1)",
81                ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
82                ["grayscale(1)"]);
83
84 testFilterRule("Zero value",
85                "grayscale(0)", 1, "grayscale(0)",
86                ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
87                ["grayscale(0)"]);
88
89 testFilterRule("No values",
90                "grayscale()", 1, "grayscale()",
91                ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
92                ["grayscale()"]);
93
94 testFilterRule("Multiple values",
95                "grayscale(0.5) grayscale(0.25)", 2, "grayscale(0.5) grayscale(0.25)",
96                ["WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
97                ["grayscale(0.5)", "grayscale(0.25)"]);
98
99 testFilterRule("Integer value",
100                "sepia(1)", 1, "sepia(1)",
101                ["WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
102                ["sepia(1)"]);
103
104 testFilterRule("Float value converts to integer",
105                "sepia(1.0)", 1, "sepia(1)",
106                ["WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
107                ["sepia(1)"]);
108
109 testFilterRule("Zero value",
110                "sepia(0)", 1, "sepia(0)",
111                ["WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
112                ["sepia(0)"]);
113
114 testFilterRule("No values",
115                "sepia()", 1, "sepia()",
116                ["WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
117                ["sepia()"]);
118
119 testFilterRule("Multiple values",
120                "sepia(0.5) sepia(0.25)", 2, "sepia(0.5) sepia(0.25)",
121                ["WebKitCSSFilterValue.CSS_FILTER_SEPIA", "WebKitCSSFilterValue.CSS_FILTER_SEPIA"],
122                ["sepia(0.5)", "sepia(0.25)"]);
123
124 testFilterRule("Rule combinations",
125                "sepia(0.5) grayscale(0.25)", 2, "sepia(0.5) grayscale(0.25)",
126                ["WebKitCSSFilterValue.CSS_FILTER_SEPIA", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
127                ["sepia(0.5)", "grayscale(0.25)"]);
128
129 testFilterRule("Integer value",
130                "saturate(1)", 1, "saturate(1)",
131                ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
132                ["saturate(1)"]);
133
134 testFilterRule("Float value converts to integer",
135                "saturate(1.0)", 1, "saturate(1)",
136                ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
137                ["saturate(1)"]);
138
139 testFilterRule("Input value > 1",
140                "saturate(5.5)", 1, "saturate(5.5)",
141                ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
142                ["saturate(5.5)"]);
143
144 testFilterRule("Zero value",
145                "saturate(0)", 1, "saturate(0)",
146                ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
147                ["saturate(0)"]);
148
149 testFilterRule("No values",
150                "saturate()", 1, "saturate()",
151                ["WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
152                ["saturate()"]);
153
154 testFilterRule("Multiple values",
155                "saturate(0.5) saturate(0.25)", 2, "saturate(0.5) saturate(0.25)",
156                ["WebKitCSSFilterValue.CSS_FILTER_SATURATE", "WebKitCSSFilterValue.CSS_FILTER_SATURATE"],
157                ["saturate(0.5)", "saturate(0.25)"]);
158
159 testFilterRule("Rule combinations",
160                "saturate(0.5) grayscale(0.25)", 2, "saturate(0.5) grayscale(0.25)",
161                ["WebKitCSSFilterValue.CSS_FILTER_SATURATE", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
162                ["saturate(0.5)", "grayscale(0.25)"]);
163
164 testFilterRule("Degrees value as integer",
165                "hue-rotate(10deg)", 1, "hue-rotate(10deg)",
166                ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
167                ["hue-rotate(10deg)"]);
168
169 testFilterRule("Degrees float value converts to integer",
170                "hue-rotate(10.0deg)", 1, "hue-rotate(10deg)",
171                ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
172                ["hue-rotate(10deg)"]);
173
174 testFilterRule("Radians value",
175                "hue-rotate(10rad)", 1, "hue-rotate(10rad)",
176                ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
177                ["hue-rotate(10rad)"]);
178
179 testFilterRule("Gradians value",
180                "hue-rotate(10grad)", 1, "hue-rotate(10grad)",
181                ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
182                ["hue-rotate(10grad)"]);
183
184 testFilterRule("Turns value",
185                "hue-rotate(0.5turn)", 1, "hue-rotate(0.5turn)",
186                ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
187                ["hue-rotate(0.5turn)"]);
188
189 testFilterRule("Zero value",
190                "hue-rotate(0)", 1, "hue-rotate(0deg)",
191                ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
192                ["hue-rotate(0deg)"]);
193
194 testFilterRule("No values",
195                "hue-rotate()", 1, "hue-rotate()",
196                ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE"],
197                ["hue-rotate()"]);
198
199 testFilterRule("Rule combinations",
200                "hue-rotate(10deg) grayscale(0.25)", 2, "hue-rotate(10deg) grayscale(0.25)",
201                ["WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
202                ["hue-rotate(10deg)", "grayscale(0.25)"]);
203
204 testFilterRule("Integer value",
205                "invert(1)", 1, "invert(1)",
206                ["WebKitCSSFilterValue.CSS_FILTER_INVERT"],
207                ["invert(1)"]);
208
209 testFilterRule("Float value converts to integer",
210                "invert(1.0)", 1, "invert(1)",
211                ["WebKitCSSFilterValue.CSS_FILTER_INVERT"],
212                ["invert(1)"]);
213
214 testFilterRule("Zero value",
215                "invert(0)", 1, "invert(0)",
216                ["WebKitCSSFilterValue.CSS_FILTER_INVERT"],
217                ["invert(0)"]);
218
219 testFilterRule("No values",
220                "invert()", 1, "invert()",
221                ["WebKitCSSFilterValue.CSS_FILTER_INVERT"],
222                ["invert()"]);
223
224 testFilterRule("Multiple values",
225                "invert(0.5) invert(0.25)", 2, "invert(0.5) invert(0.25)",
226                ["WebKitCSSFilterValue.CSS_FILTER_INVERT", "WebKitCSSFilterValue.CSS_FILTER_INVERT"],
227                ["invert(0.5)", "invert(0.25)"]);
228
229 testFilterRule("Rule combinations",
230                "invert(0.5) grayscale(0.25)", 2, "invert(0.5) grayscale(0.25)",
231                ["WebKitCSSFilterValue.CSS_FILTER_INVERT", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
232                ["invert(0.5)", "grayscale(0.25)"]);
233
234 testFilterRule("Integer value",
235                "opacity(1)", 1, "opacity(1)",
236                ["WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
237                ["opacity(1)"]);
238
239 testFilterRule("Float value converts to integer",
240                "opacity(1.0)", 1, "opacity(1)",
241                ["WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
242                ["opacity(1)"]);
243
244 testFilterRule("Zero value",
245                "opacity(0)", 1, "opacity(0)",
246                ["WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
247                ["opacity(0)"]);
248
249 testFilterRule("No values",
250                "opacity()", 1, "opacity()",
251                ["WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
252                ["opacity()"]);
253
254 testFilterRule("Multiple values",
255                "opacity(0.5) opacity(0.25)", 2, "opacity(0.5) opacity(0.25)",
256                ["WebKitCSSFilterValue.CSS_FILTER_OPACITY", "WebKitCSSFilterValue.CSS_FILTER_OPACITY"],
257                ["opacity(0.5)", "opacity(0.25)"]);
258
259 testFilterRule("Rule combinations",
260                "opacity(0.5) grayscale(0.25)", 2, "opacity(0.5) grayscale(0.25)",
261                ["WebKitCSSFilterValue.CSS_FILTER_OPACITY", "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE"],
262                ["opacity(0.5)", "grayscale(0.25)"]);
263
264 testFilterRule("Three values",
265                "gamma(1 1 0)", 1, "gamma(1 1 0)",
266                ["WebKitCSSFilterValue.CSS_FILTER_GAMMA"],
267                ["gamma(1 1 0)"]);
268
269 testFilterRule("Two values",
270                "gamma(1 1)", 1, "gamma(1 1)",
271                ["WebKitCSSFilterValue.CSS_FILTER_GAMMA"],
272                ["gamma(1 1)"]);
273
274 testFilterRule("One value",
275                "gamma(1)", 1, "gamma(1)",
276                ["WebKitCSSFilterValue.CSS_FILTER_GAMMA"],
277                ["gamma(1)"]);
278
279 testFilterRule("Float value",
280                "gamma(1.3)", 1, "gamma(1.3)",
281                ["WebKitCSSFilterValue.CSS_FILTER_GAMMA"],
282                ["gamma(1.3)"]);
283
284 testFilterRule("No values",
285                "gamma()", 1, "gamma()",
286                ["WebKitCSSFilterValue.CSS_FILTER_GAMMA"],
287                ["gamma()"]);
288
289 testFilterRule("Two zeros to px",
290                "blur(0 0)", 1, "blur(0px 0px)",
291                ["WebKitCSSFilterValue.CSS_FILTER_BLUR"],
292                ["blur(0px 0px)"]);
293
294 testFilterRule("One zero to px",
295                "blur(0)", 1, "blur(0px)",
296                ["WebKitCSSFilterValue.CSS_FILTER_BLUR"],
297                ["blur(0px)"]);
298
299 testFilterRule("Two lengths",
300                "blur(5px 2em)", 1, "blur(5px 2em)",
301                ["WebKitCSSFilterValue.CSS_FILTER_BLUR"],
302                ["blur(5px 2em)"]);
303
304 testFilterRule("One length",
305                "blur(10%)", 1, "blur(10%)",
306                ["WebKitCSSFilterValue.CSS_FILTER_BLUR"],
307                ["blur(10%)"]);
308
309 testFilterRule("No values",
310                "blur()", 1, "blur()",
311                ["WebKitCSSFilterValue.CSS_FILTER_BLUR"],
312                ["blur()"]);
313
314 testFilterRule("Three values",
315                "sharpen(1.0 10px 1)", 1, "sharpen(1 10px 1)",
316                ["WebKitCSSFilterValue.CSS_FILTER_SHARPEN"],
317                ["sharpen(1 10px 1)"]);
318
319 testFilterRule("Three values with zero length",
320                "sharpen(1.0 0 1)", 1, "sharpen(1 0px 1)",
321                ["WebKitCSSFilterValue.CSS_FILTER_SHARPEN"],
322                ["sharpen(1 0px 1)"]);
323
324 testFilterRule("Two values",
325                "sharpen(0.5 1em)", 1, "sharpen(0.5 1em)",
326                ["WebKitCSSFilterValue.CSS_FILTER_SHARPEN"],
327                ["sharpen(0.5 1em)"]);
328
329 testFilterRule("One value",
330                "sharpen(0.25)", 1, "sharpen(0.25)",
331                ["WebKitCSSFilterValue.CSS_FILTER_SHARPEN"],
332                ["sharpen(0.25)"]);
333
334 testFilterRule("No values",
335                "sharpen()", 1, "sharpen()",
336                ["WebKitCSSFilterValue.CSS_FILTER_SHARPEN"],
337                ["sharpen()"]);
338
339 testFilterRule("Color then three values",
340               "drop-shadow(red 1px 2px 3px)", 1, "drop-shadow(red 1px 2px 3px)",
341               ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
342               ["drop-shadow(red 1px 2px 3px)"]);
343
344 testFilterRule("Three values then color",
345               "drop-shadow(1px 2px 3px red)", 1, "drop-shadow(red 1px 2px 3px)",
346               ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
347               ["drop-shadow(red 1px 2px 3px)"]);
348
349 testFilterRule("Color then three values with zero length",
350               "drop-shadow(#abc 0 0 0)", 1, "drop-shadow(rgb(170, 187, 204) 0px 0px 0px)",
351               ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
352               ["drop-shadow(rgb(170, 187, 204) 0px 0px 0px)"]);
353
354 testFilterRule("Three values with zero length",
355               "drop-shadow(0 0 0)", 1, "drop-shadow(0px 0px 0px)",
356               ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
357               ["drop-shadow(0px 0px 0px)"]);
358
359 testFilterRule("Two values no color",
360               "drop-shadow(1px 2px)", 1, "drop-shadow(1px 2px)",
361               ["WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"],
362               ["drop-shadow(1px 2px)"]);
363
364 testFilterRule("Multiple operations",
365                "grayscale(0.5) sepia(0.25) saturate(0.75) hue-rotate(35deg) invert(0.2) opacity(0.9) gamma(2 1.1 1) blur(5px 2em) sharpen(0.5 3px 2) drop-shadow(green 1px 2px 3px)", 10,
366                "grayscale(0.5) sepia(0.25) saturate(0.75) hue-rotate(35deg) invert(0.2) opacity(0.9) gamma(2 1.1 1) blur(5px 2em) sharpen(0.5 3px 2) drop-shadow(green 1px 2px 3px)",
367                [
368                    "WebKitCSSFilterValue.CSS_FILTER_GRAYSCALE",
369                    "WebKitCSSFilterValue.CSS_FILTER_SEPIA",
370                    "WebKitCSSFilterValue.CSS_FILTER_SATURATE",
371                    "WebKitCSSFilterValue.CSS_FILTER_HUE_ROTATE",
372                    "WebKitCSSFilterValue.CSS_FILTER_INVERT",
373                    "WebKitCSSFilterValue.CSS_FILTER_OPACITY",
374                    "WebKitCSSFilterValue.CSS_FILTER_GAMMA",
375                    "WebKitCSSFilterValue.CSS_FILTER_BLUR",
376                    "WebKitCSSFilterValue.CSS_FILTER_SHARPEN",
377                    "WebKitCSSFilterValue.CSS_FILTER_DROP_SHADOW"
378                ],
379                [
380                    "grayscale(0.5)",
381                    "sepia(0.25)",
382                    "saturate(0.75)",
383                    "hue-rotate(35deg)",
384                    "invert(0.2)",
385                    "opacity(0.9)",
386                    "gamma(2 1.1 1)",
387                    "blur(5px 2em)",
388                    "sharpen(0.5 3px 2)",
389                    "drop-shadow(green 1px 2px 3px)"
390                ]);
391
392 successfullyParsed = true;