Beat the transition tests with a sanity stick.

LayoutTests/transitions/resources/transition-test-helpers.js

-/* This is the helper function to run transition tests:
-
-Test page requirements:
-- The body must contain an empty div with id "result"
-- Call this function directly from the <script> inside the test page
-
-Function parameters:
-    expected [required]: an array of arrays defining a set of CSS properties that must have given values at specific times (see below)
-    callback [optional]: a function to be executed just before the test starts (none by default)
-    
-    Each sub-array must contain these items in this order:
-    - the time in seconds at which to snapshot the CSS property
-    - the id of the element on which to get the CSS property value
-    - the name of the CSS property to get [1]
-    - the expected value for the CSS property
-    - the tolerance to use when comparing the effective CSS property value with its expected value
-    
-    [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,
-    or a string which will be compared directly (useful if the expected value is "none")
-    If the CSS property name is "-webkit-transform.N", expected value must be a number corresponding to the Nth element of the matrix
-
-*/
-
-const usePauseAPI = true;
-const dontUsePauseAPI = false;
-
-const shouldBeTransitioning = true;
-const shouldNotBeTransitioning = false;
-
-function roundNumber(num, decimalPlaces)
-{
-  return Math.round(num * Math.pow(10, decimalPlaces)) / Math.pow(10, decimalPlaces);
-}
-
-function isCloseEnough(actual, desired, tolerance)
-{
-    var diff = Math.abs(actual - desired);
-    return diff <= tolerance;
-}
-
-function isShadow(property)
-{
-  return (property == '-webkit-box-shadow' || property == 'text-shadow');
-}
-
-function getShadowXY(cssValue)
-{
-    var text = cssValue.cssText;
-    // Shadow cssText looks like "rgb(0, 0, 255) 0px -3px 10px 0px"
-    var shadowPositionRegExp = /\)\s*(-?\d+)px\s*(-?\d+)px/;
-    var result = shadowPositionRegExp.exec(text);
-    return [parseInt(result[1]), parseInt(result[2])];
-}
-
-function compareRGB(rgb, expected, tolerance)
-{
-    return (isCloseEnough(parseInt(rgb[0]), expected[0], tolerance) &&
-            isCloseEnough(parseInt(rgb[1]), expected[1], tolerance) &&
-            isCloseEnough(parseInt(rgb[2]), expected[2], tolerance));
-}
-
-function parseCrossFade(s)
-{
-    var matches = s.match("-webkit-cross-fade\\((.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\)");
-
-    if (!matches)
-        return null;
-
-    return {"from": matches[1], "to": matches[2], "percent": parseFloat(matches[3])}
-}
-
-function checkExpectedValue(expected, index)
-{
-    var time = expected[index][0];
-    var elementId = expected[index][1];
-    var property = expected[index][2];
-    var expectedValue = expected[index][3];
-    var tolerance = expected[index][4];
-    var postCompletionCallback = expected[index][5];
-
-    var computedValue;
-    var pass = false;
-    var transformRegExp = /^-webkit-transform(\.\d+)?$/;
-    if (transformRegExp.test(property)) {
-        computedValue = window.getComputedStyle(document.getElementById(elementId)).webkitTransform;
-        if (typeof expectedValue == "string")
-            pass = (computedValue == expectedValue);
-        else if (typeof expectedValue == "number") {
-            var m = computedValue.split("(");
-            var m = m[1].split(",");
-            pass = isCloseEnough(parseFloat(m[parseInt(property.substring(18))]), expectedValue, tolerance);
-        } else {
-            var m = computedValue.split("(");
-            var m = m[1].split(",");
-            for (i = 0; i < expectedValue.length; ++i) {
-                pass = isCloseEnough(parseFloat(m[i]), expectedValue[i], tolerance);
-                if (!pass)
-                    break;
-            }
-        }
-    } else if (property == "fill" || property == "stroke") {
-        computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).rgbColor;
-        if (compareRGB([computedValue.red.cssText, computedValue.green.cssText, computedValue.blue.cssText], expectedValue, tolerance))
-            pass = true;
-        else {
-            // We failed. Make sure computed value is something we can read in the error message
-            computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;
-        }
-    } else if (property == "stop-color" || property == "flood-color" || property == "lighting-color") {
-        computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property);
-        // The computedValue cssText is rgb(num, num, num)
-        var components = computedValue.cssText.split("(")[1].split(")")[0].split(",");
-        if (compareRGB(components, expectedValue, tolerance))
-            pass = true;
-        else {
-            // We failed. Make sure computed value is something we can read in the error message
-            computedValue = computedValue.cssText;
-        }
-    } else if (property == "lineHeight") {
-        computedValue = parseInt(window.getComputedStyle(document.getElementById(elementId)).lineHeight);
-        pass = isCloseEnough(computedValue, expectedValue, tolerance);
-    } else if (property == "background-image"
-               || property == "border-image-source"
-               || property == "border-image"
-               || property == "list-style-image"
-               || property == "-webkit-mask-image"
-               || property == "-webkit-mask-box-image") {
-        if (property == "border-image" || property == "-webkit-mask-image" || property == "-webkit-mask-box-image")
-            property += "-source";
-        
-        computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;
-        computedCrossFade = parseCrossFade(computedValue);
-
-        if (!computedCrossFade) {
-            pass = false;
-        } else {
-            pass = isCloseEnough(computedCrossFade.percent, expectedValue, tolerance);
-        }
-    } else {
-        var computedStyle = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property);
-        if (computedStyle.cssValueType == CSSValue.CSS_VALUE_LIST) {
-            var values = [];
-            for (var i = 0; i < computedStyle.length; ++i) {
-                switch (computedStyle[i].cssValueType) {
-                  case CSSValue.CSS_PRIMITIVE_VALUE:
-                    values.push(computedStyle[i].getFloatValue(CSSPrimitiveValue.CSS_NUMBER));
-                    break;
-                  case CSSValue.CSS_CUSTOM:
-                    // arbitrarily pick shadow-x and shadow-y
-                    if (isShadow) {
-                      var shadowXY = getShadowXY(computedStyle[i]);
-                      values.push(shadowXY[0]);
-                      values.push(shadowXY[1]);
-                    } else
-                      values.push(computedStyle[i].cssText);
-                    break;
-                }
-            }
-            computedValue = values.join(',');
-            pass = true;
-            for (var i = 0; i < values.length; ++i)
-                pass &= isCloseEnough(values[i], expectedValue[i], tolerance);
-        } else if (computedStyle.cssValueType == CSSValue.CSS_PRIMITIVE_VALUE) {
-            switch (computedStyle.primitiveType) {
-                case CSSPrimitiveValue.CSS_STRING:
-                case CSSPrimitiveValue.CSS_IDENT:
-                    computedValue = computedStyle.getStringValue();
-                    pass = computedValue == expectedValue;
-                    break;
-                case CSSPrimitiveValue.CSS_RGBCOLOR:
-                    var rgbColor = computedStyle.getRGBColorValue();
-                    computedValue = [rgbColor.red.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
-                                     rgbColor.green.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
-                                     rgbColor.blue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)]; // alpha is not exposed to JS
-                    pass = true;
-                    for (var i = 0; i < 3; ++i)
-                        pass &= isCloseEnough(computedValue[i], expectedValue[i], tolerance);
-                    break;
-                case CSSPrimitiveValue.CSS_RECT:
-                    computedValue = computedStyle.getRectValue();
-                    computedValue = [computedValue.top.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
-                                     computedValue.right.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
-                                     computedValue.bottom.getFloatValue(CSSPrimitiveValue.CSS_NUMBER),
-                                     computedValue.left.getFloatValue(CSSPrimitiveValue.CSS_NUMBER)];
-                     pass = true;
-                     for (var i = 0; i < 4; ++i)
-                         pass &= isCloseEnough(computedValue[i], expectedValue[i], tolerance);
-                    break;
-                case CSSPrimitiveValue.CSS_PERCENTAGE:
-                    computedValue = parseFloat(computedStyle.cssText);
-                    pass = isCloseEnough(computedValue, expectedValue, tolerance);
-                    break;
-                default:
-                    computedValue = computedStyle.getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
-                    pass = isCloseEnough(computedValue, expectedValue, tolerance);
-            }
-        }
-    }
-
-    if (pass)
-        result += "PASS - \"" + property + "\" property for \"" + elementId + "\" element at " + time + "s saw something close to: " + expectedValue + "<br>";
-    else
-        result += "FAIL - \"" + property + "\" property for \"" + elementId + "\" element at " + time + "s expected: " + expectedValue + " but saw: " + computedValue + "<br>";
-
-    if (postCompletionCallback)
-      result += postCompletionCallback();
-}
-
-function endTest()
-{
-    document.getElementById('result').innerHTML = result;
-
-    if (window.testRunner)
-        testRunner.notifyDone();
-}
-
-function checkExpectedValueCallback(expected, index)
-{
-    return function() { checkExpectedValue(expected, index); };
-}
-
-function runTest(expected, usePauseAPI)
-{
-    var maxTime = 0;
-    for (var i = 0; i < expected.length; ++i) {
-        var time = expected[i][0];
-        var elementId = expected[i][1];
-        var property = expected[i][2];
-        if (!property.indexOf("-webkit-transform."))
-            property = "-webkit-transform";
-
-        var tryToPauseTransition = expected[i][6];
-        if (tryToPauseTransition === undefined)
-          tryToPauseTransition = shouldBeTransitioning;
-
-        if (hasPauseTransitionAPI && usePauseAPI) {
-            if (tryToPauseTransition) {
-              var element = document.getElementById(elementId);
-              internals.pauseAnimations(time);
-            }
-            checkExpectedValue(expected, i);
-        } else {
-            if (time > maxTime)
-                maxTime = time;
-
-            window.setTimeout(checkExpectedValueCallback(expected, i), time * 1000);
-        }
-    }
-
-    if (maxTime > 0)
-        window.setTimeout(endTest, maxTime * 1000 + 50);
-    else
-        endTest();
-}
-
-function waitForAnimationStart(callback, delay)
-{
-    var delayTimeout = delay ? 1000 * delay + 10 : 0;
-    // Why the two setTimeouts? Well, for hardware animations we need to ensure that the hardware animation
-    // has started before we try to pause it, and timers fire before animations get committed in the runloop.
-    window.setTimeout(function() {
-        window.setTimeout(function() {
-            callback();
-        }, 0);
-    }, delayTimeout);
-}
-
-function startTest(expected, usePauseAPI, callback)
-{
-    if (callback)
-        callback();
-
-    waitForAnimationStart(function() {
-        runTest(expected, usePauseAPI);
-    });
-}
-
-var result = "";
-var hasPauseTransitionAPI;
-
-function runTransitionTest(expected, callback, usePauseAPI, doPixelTest)
-{
-    hasPauseTransitionAPI = 'internals' in window;
-    
-    if (window.testRunner) {
-        if (!doPixelTest)
-            testRunner.dumpAsText();
-        testRunner.waitUntilDone();
-    }
-    
-    if (!expected)
-        throw("Expected results are missing!");
-    
-    window.addEventListener("load", function() { startTest(expected, usePauseAPI, callback); }, false);
-}