Support transitions/animations of background-position with right/bottom-relative...
[WebKit-https.git] / LayoutTests / transitions / resources / transition-test-helpers.js
1 /* This is the helper function to run transition tests:
2
3 Test page requirements:
4 - The body must contain an empty div with id "result"
5 - Call this function directly from the <script> inside the test page
6
7 Function parameters:
8     expected [required]: an array of arrays defining a set of CSS properties that must have given values at specific times (see below)
9     callback [optional]: a function to be executed just before the test starts (none by default)
10     
11     Each sub-array must contain these items in this order:
12     - the time in seconds at which to snapshot the CSS property
13     - the id of the element on which to get the CSS property value
14     - the name of the CSS property to get [1]
15     - the expected value for the CSS property
16     - the tolerance to use when comparing the effective CSS property value with its expected value
17     
18     [1] If the CSS property name is "-webkit-transform", expected value must be an array of 1 or more numbers corresponding to the matrix elements,
19     or a string which will be compared directly (useful if the expected value is "none")
20     If the CSS property name is "-webkit-transform.N", expected value must be a number corresponding to the Nth element of the matrix
21
22 */
23
24 var usePauseAPI = true;
25 var dontUsePauseAPI = false;
26
27 var shouldBeTransitioning = true;
28 var shouldNotBeTransitioning = false;
29
30 function roundNumber(num, decimalPlaces)
31 {
32   return Math.round(num * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces);
33 }
34
35 function isCloseEnough(actual, desired, tolerance)
36 {
37     var diff = Math.abs(actual - desired);
38     return diff <= tolerance;
39 }
40
41 function isShadow(property)
42 {
43   return (property == '-webkit-box-shadow' || property == 'text-shadow');
44 }
45
46 function getShadowXY(cssValue)
47 {
48     var text = cssValue.cssText;
49     // Shadow cssText looks like "rgb(0, 0, 255) 0px -3px 10px 0px"
50     var shadowPositionRegExp = /\)\s*(-?\d+)px\s*(-?\d+)px/;
51     var result = shadowPositionRegExp.exec(text);
52     return [parseInt(result[1]), parseInt(result[2])];
53 }
54
55 function compareRGB(rgb, expected, tolerance)
56 {
57     return (isCloseEnough(parseInt(rgb[0]), expected[0], tolerance) &&
58             isCloseEnough(parseInt(rgb[1]), expected[1], tolerance) &&
59             isCloseEnough(parseInt(rgb[2]), expected[2], tolerance));
60 }
61
62 function parseCrossFade(s)
63 {
64     var matches = s.match("(?:-webkit-)?cross-fade\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\)");
65
66     if (!matches)
67         return null;
68
69     return {"from": matches[1], "to": matches[2], "percent": parseFloat(matches[3])}
70 }
71
72 function extractPathValues(path)
73 {
74     var components = path.split(' ');
75     var result = [];
76     for (component of components) {
77         var compMatch;
78         if (compMatch = component.match(/[0-9.-]+/)) {
79             result.push(parseFloat(component))
80         }
81     }
82     return result;
83 }
84
85 function parseClipPath(s)
86 {
87     var pathMatch;
88     if (pathMatch = s.match(/path\(((evenodd|nonzero), ?)?\'(.+)\'\)/))
89         return extractPathValues(pathMatch[pathMatch.length - 1]);
90     
91     // FIXME: This only matches a subset of the shape syntax, and the polygon expects 4 points.
92     var patterns = [
93         /inset\(([\d.]+)\w+ ([\d.]+)\w+\)/,
94         /circle\(([\d.]+)\w+ at ([\d.]+)\w+ ([\d.]+)\w+\)/,
95         /ellipse\(([\d.]+)\w+ ([\d.]+)\w+ at ([\d.]+)\w+ ([\d.]+)\w+\)/,
96         /polygon\(([\d.]+)\w* ([\d.]+)\w*\, ([\d.]+)\w* ([\d.]+)\w*\, ([\d.]+)\w* ([\d.]+)\w*\, ([\d.]+)\w* ([\d.]+)\w*\)/,
97     ];
98     
99     for (pattern of patterns) {
100         var matchResult;
101         if (matchResult = s.match(pattern)) {
102             var result = [];
103             for (var i = 1; i < matchResult.length; ++i)
104                 result.push(parseFloat(matchResult[i]));
105             return result;
106         }
107     }
108
109     window.console.log('failed to match ' + s);
110     return null;
111 }
112
113 function hasFloatValue(value)
114 {
115     switch (value.primitiveType) {
116     case CSSPrimitiveValue.CSS_FR:
117     case CSSPrimitiveValue.CSS_NUMBER:
118     case CSSPrimitiveValue.CSS_PARSER_INTEGER:
119     case CSSPrimitiveValue.CSS_PERCENTAGE:
120     case CSSPrimitiveValue.CSS_EMS:
121     case CSSPrimitiveValue.CSS_EXS:
122     case CSSPrimitiveValue.CSS_CHS:
123     case CSSPrimitiveValue.CSS_REMS:
124     case CSSPrimitiveValue.CSS_PX:
125     case CSSPrimitiveValue.CSS_CM:
126     case CSSPrimitiveValue.CSS_MM:
127     case CSSPrimitiveValue.CSS_IN:
128     case CSSPrimitiveValue.CSS_PT:
129     case CSSPrimitiveValue.CSS_PC:
130     case CSSPrimitiveValue.CSS_DEG:
131     case CSSPrimitiveValue.CSS_RAD:
132     case CSSPrimitiveValue.CSS_GRAD:
133     case CSSPrimitiveValue.CSS_TURN:
134     case CSSPrimitiveValue.CSS_MS:
135     case CSSPrimitiveValue.CSS_S:
136     case CSSPrimitiveValue.CSS_HZ:
137     case CSSPrimitiveValue.CSS_KHZ:
138     case CSSPrimitiveValue.CSS_DIMENSION:
139     case CSSPrimitiveValue.CSS_VW:
140     case CSSPrimitiveValue.CSS_VH:
141     case CSSPrimitiveValue.CSS_VMIN:
142     case CSSPrimitiveValue.CSS_VMAX:
143     case CSSPrimitiveValue.CSS_DPPX:
144     case CSSPrimitiveValue.CSS_DPI:
145     case CSSPrimitiveValue.CSS_DPCM:
146         return true;
147     }
148     return false;
149 }
150
151 function getNumericValue(cssValue)
152 {
153     if (hasFloatValue(cssValue.primitiveType))
154         return cssValue.getFloatValue(cssValue.primitiveType);
155
156     return -1;
157 }
158
159 function isCalcPrimitiveValue(value)
160 {
161     switch (value.primitiveType) {
162     case 113: // CSSPrimitiveValue.CSS_CALC:
163     case 114: // CSSPrimitiveValue.CSS_CALC_PERCENTAGE_WITH_NUMBER:
164     case 115: // CSSPrimitiveValue.CSS_CALC_PERCENTAGE_WITH_LENGTH:
165     return true;
166     }
167     return false;
168 }
169
170 function extractNumbersFromCalcExpression(value, values)
171 {
172     var calcRegexp = /^calc\((.+)\)$/;
173     var result = calcRegexp.exec(value.cssText);
174     var numberMatch = /([^\.\-0-9]*)(-?[\.0-9]+)/;
175     var remainder = result[1];
176     var match;
177     while ((match = numberMatch.exec(remainder)) !== null) {
178         var skipLength = match[1].length + match[2].length;
179         values.push(parseFloat(match[2]))
180         remainder = remainder.substr(skipLength + 1);
181     }
182 }
183
184 function checkExpectedValue(expected, index)
185 {
186     var time = expected[index][0];
187     var elementId = expected[index][1];
188     var property = expected[index][2];
189     var expectedValue = expected[index][3];
190     var tolerance = expected[index][4];
191     var postCompletionCallback = expected[index][5];
192
193     var computedValue;
194     var pass = false;
195     var transformRegExp = /^-webkit-transform(\.\d+)?$/;
196     if (transformRegExp.test(property)) {
197         computedValue = window.getComputedStyle(document.getElementById(elementId)).webkitTransform;
198         if (typeof expectedValue == "string")
199             pass = (computedValue == expectedValue);
200         else if (typeof expectedValue == "number") {
201             var m = computedValue.split("(");
202             var m = m[1].split(",");
203             pass = isCloseEnough(parseFloat(m[parseInt(property.substring(18))]), expectedValue, tolerance);
204         } else {
205             var m = computedValue.split("(");
206             var m = m[1].split(",");
207             for (i = 0; i < expectedValue.length; ++i) {
208                 pass = isCloseEnough(parseFloat(m[i]), expectedValue[i], tolerance);
209                 if (!pass)
210                     break;
211             }
212         }
213     } else if (property == "fill" || property == "stroke") {
214         computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).rgbColor;
215         if (compareRGB([computedValue.red.cssText, computedValue.green.cssText, computedValue.blue.cssText], expectedValue, tolerance))
216             pass = true;
217         else {
218             // We failed. Make sure computed value is something we can read in the error message
219             computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;
220         }
221     } else if (property == "stop-color" || property == "flood-color" || property == "lighting-color") {
222         computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property);
223         // The computedValue cssText is rgb(num, num, num)
224         var components = computedValue.cssText.split("(")[1].split(")")[0].split(",");
225         if (compareRGB(components, expectedValue, tolerance))
226             pass = true;
227         else {
228             // We failed. Make sure computed value is something we can read in the error message
229             computedValue = computedValue.cssText;
230         }
231     } else if (property == "lineHeight") {
232         computedValue = parseInt(window.getComputedStyle(document.getElementById(elementId)).lineHeight);
233         pass = isCloseEnough(computedValue, expectedValue, tolerance);
234     } else if (property == "background-image"
235                || property == "border-image-source"
236                || property == "border-image"
237                || property == "list-style-image"
238                || property == "-webkit-mask-image"
239                || property == "-webkit-mask-box-image") {
240         if (property == "border-image" || property == "-webkit-mask-image" || property == "-webkit-mask-box-image")
241             property += "-source";
242         
243         computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;
244         computedCrossFade = parseCrossFade(computedValue);
245
246         if (!computedCrossFade) {
247             pass = false;
248         } else {
249             pass = isCloseEnough(computedCrossFade.percent, expectedValue, tolerance);
250         }
251     } else if (property == "-webkit-clip-path" || property == "-webkit-shape-outside") {
252         computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;
253
254         var expectedValues = parseClipPath(expectedValue);
255         var values = parseClipPath(computedValue);
256         
257         pass = false;
258         if (values && values.length == expectedValues.length) {
259             pass = true
260             for (var i = 0; i < values.length; ++i)
261                 pass &= isCloseEnough(values[i], expectedValues[i], tolerance);
262         }
263     } else {
264         var computedStyle = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property);
265         if (computedStyle.cssValueType == CSSValue.CSS_VALUE_LIST) {
266             var values = [];
267             for (var i = 0; i < computedStyle.length; ++i) {
268                 var styleValue = computedStyle[i];
269                 switch (styleValue.cssValueType) {
270                   case CSSValue.CSS_PRIMITIVE_VALUE:
271                     if (hasFloatValue(styleValue))
272                         values.push(styleValue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER));
273                     else if (isCalcPrimitiveValue(styleValue))
274                         extractNumbersFromCalcExpression(styleValue, values);
275                     break;
276                   case CSSValue.CSS_CUSTOM:
277                     // arbitrarily pick shadow-x and shadow-y
278                     if (isShadow) {
279                       var shadowXY = getShadowXY(styleValue);
280                       values.push(shadowXY[0]);
281                       values.push(shadowXY[1]);
282                     } else
283                       values.push(styleValue.cssText);
284                     break;
285                 }
286             }
287             computedValue = values.join(',');
288             pass = values.length > 0;
289             for (var i = 0; i < values.length; ++i)
290                 pass &= isCloseEnough(values[i], expectedValue[i], tolerance);
291         } else if (computedStyle.cssValueType == CSSValue.CSS_PRIMITIVE_VALUE) {
292             switch (computedStyle.primitiveType) {
293                 case CSSPrimitiveValue.CSS_STRING:
294                 case CSSPrimitiveValue.CSS_IDENT:
295                     computedValue = computedStyle.getStringValue();
296                     pass = computedValue == expectedValue;
297                     break;
298                 case CSSPrimitiveValue.CSS_RGBCOLOR:
299                     var rgbColor = computedStyle.getRGBColorValue();
300                     computedValue = [rgbColor.red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
301                                      rgbColor.green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
302                                      rgbColor.blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)]; // alpha is not exposed to JS
303                     pass = true;
304                     for (var i = 0; i < 3; ++i)
305                         pass &= isCloseEnough(computedValue[i], expectedValue[i], tolerance);
306                     break;
307                 case CSSPrimitiveValue.CSS_RECT:
308                     computedValue = computedStyle.getRectValue();
309                     computedValue = [computedValue.top.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
310                                      computedValue.right.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
311                                      computedValue.bottom.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
312                                      computedValue.left.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)];
313                      pass = true;
314                      for (var i = 0; i < 4; ++i)
315                          pass &= isCloseEnough(computedValue[i], expectedValue[i], tolerance);
316                     break;
317                 case CSSPrimitiveValue.CSS_PERCENTAGE:
318                     computedValue = parseFloat(computedStyle.cssText);
319                     pass = isCloseEnough(computedValue, expectedValue, tolerance);
320                     break;
321                 default:
322                     computedValue = computedStyle.getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
323                     pass = isCloseEnough(computedValue, expectedValue, tolerance);
324             }
325         }
326     }
327
328     if (pass)
329         result += "PASS - \"" + property + "\" property for \"" + elementId + "\" element at " + time + "s saw something close to: " + expectedValue + "<br>";
330     else
331         result += "FAIL - \"" + property + "\" property for \"" + elementId + "\" element at " + time + "s expected: " + expectedValue + " but saw: " + computedValue + "<br>";
332
333     if (postCompletionCallback)
334       result += postCompletionCallback();
335 }
336
337 function endTest()
338 {
339     document.getElementById('result').innerHTML = result;
340
341     if (window.testRunner)
342         testRunner.notifyDone();
343 }
344
345 function checkExpectedValueCallback(expected, index)
346 {
347     return function() { checkExpectedValue(expected, index); };
348 }
349
350 function runTest(expected, usePauseAPI)
351 {
352     var maxTime = 0;
353     for (var i = 0; i < expected.length; ++i) {
354         var time = expected[i][0];
355         var elementId = expected[i][1];
356         var property = expected[i][2];
357         if (!property.indexOf("-webkit-transform."))
358             property = "-webkit-transform";
359
360         var tryToPauseTransition = expected[i][6];
361         if (tryToPauseTransition === undefined)
362           tryToPauseTransition = shouldBeTransitioning;
363
364         if (hasPauseTransitionAPI && usePauseAPI) {
365             if (tryToPauseTransition) {
366               var element = document.getElementById(elementId);
367               if (!internals.pauseTransitionAtTimeOnElement(property, time, element))
368                 window.console.log("Failed to pause '" + property + "' transition on element '" + elementId + "'");
369             }
370             checkExpectedValue(expected, i);
371         } else {
372             if (time > maxTime)
373                 maxTime = time;
374
375             window.setTimeout(checkExpectedValueCallback(expected, i), time * 1000);
376         }
377     }
378
379     if (maxTime > 0)
380         window.setTimeout(endTest, maxTime * 1000 + 50);
381     else
382         endTest();
383 }
384
385 function waitForAnimationStart(callback, delay)
386 {
387     var delayTimeout = delay ? 1000 * delay + 10 : 0;
388     // Why the two setTimeouts? Well, for hardware animations we need to ensure that the hardware animation
389     // has started before we try to pause it, and timers fire before animations get committed in the runloop.
390     window.setTimeout(function() {
391         window.setTimeout(function() {
392             callback();
393         }, 0);
394     }, delayTimeout);
395 }
396
397 function startTest(expected, usePauseAPI, callback)
398 {
399     if (callback)
400         callback();
401
402     waitForAnimationStart(function() {
403         runTest(expected, usePauseAPI);
404     });
405 }
406
407 var result = "";
408 var hasPauseTransitionAPI;
409
410 function runTransitionTest(expected, callback, usePauseAPI, doPixelTest)
411 {
412     hasPauseTransitionAPI = 'internals' in window;
413     
414     if (window.testRunner) {
415         if (!doPixelTest)
416             testRunner.dumpAsText();
417         testRunner.waitUntilDone();
418     }
419     
420     if (!expected)
421         throw("Expected results are missing!");
422     
423     window.addEventListener("load", function() { startTest(expected, usePauseAPI, callback); }, false);
424 }