/* 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

*/

var usePauseAPI = true;
var dontUsePauseAPI = false;

var shouldBeTransitioning = true;
var 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 == '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+\.?\d*)px\s*(-?\d+\.?\d*)px/;
    var result = shadowPositionRegExp.exec(text);
    console.log(text, result);
    return [parseFloat(result[1]), parseFloat(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 extractPathValues(path)
{
    var components = path.split(' ');
    var result = [];
    for (component of components) {
        var compMatch;
        if (compMatch = component.match(/[0-9.-]+/)) {
            result.push(parseFloat(component))
        }
    }
    return result;
}

function parseClipPath(s)
{
    var pathMatch;
    if (pathMatch = s.match(/path\(((evenodd|nonzero), ?)?\'(.+)\'\)/))
        return extractPathValues(pathMatch[pathMatch.length - 1]);

    if (pathMatch = s.match(/path\(((evenodd|nonzero), ?)?\"(.+)\"\)/))
        return extractPathValues(pathMatch[pathMatch.length - 1]);

    // FIXME: This only matches a subset of the shape syntax, and the polygon expects 4 points.
    var patterns = [
        /inset\(([\d.]+)\w+ ([\d.]+)\w+\)/,
        /circle\(([\d.]+)\w+ at ([\d.]+)\w+ ([\d.]+)\w+\)/,
        /ellipse\(([\d.]+)\w+ ([\d.]+)\w+ at ([\d.]+)\w+ ([\d.]+)\w+\)/,
        /polygon\(([\d.]+)\w* ([\d.]+)\w*\, ([\d.]+)\w* ([\d.]+)\w*\, ([\d.]+)\w* ([\d.]+)\w*\, ([\d.]+)\w* ([\d.]+)\w*\)/,
    ];
    
    for (pattern of patterns) {
        var matchResult;
        if (matchResult = s.match(pattern)) {
            var result = [];
            for (var i = 1; i < matchResult.length; ++i)
                result.push(parseFloat(matchResult[i]));
            return result;
        }
    }

    window.console.log('failed to match ' + s);
    return null;
}

function hasFloatValue(value)
{
    switch (value.primitiveType) {
    case CSSPrimitiveValue.CSS_FR:
    case CSSPrimitiveValue.CSS_NUMBER:
    case CSSPrimitiveValue.CSS_PARSER_INTEGER:
    case CSSPrimitiveValue.CSS_PERCENTAGE:
    case CSSPrimitiveValue.CSS_EMS:
    case CSSPrimitiveValue.CSS_EXS:
    case CSSPrimitiveValue.CSS_CHS:
    case CSSPrimitiveValue.CSS_REMS:
    case CSSPrimitiveValue.CSS_PX:
    case CSSPrimitiveValue.CSS_CM:
    case CSSPrimitiveValue.CSS_MM:
    case CSSPrimitiveValue.CSS_IN:
    case CSSPrimitiveValue.CSS_PT:
    case CSSPrimitiveValue.CSS_PC:
    case CSSPrimitiveValue.CSS_DEG:
    case CSSPrimitiveValue.CSS_RAD:
    case CSSPrimitiveValue.CSS_GRAD:
    case CSSPrimitiveValue.CSS_TURN:
    case CSSPrimitiveValue.CSS_MS:
    case CSSPrimitiveValue.CSS_S:
    case CSSPrimitiveValue.CSS_HZ:
    case CSSPrimitiveValue.CSS_KHZ:
    case CSSPrimitiveValue.CSS_DIMENSION:
    case CSSPrimitiveValue.CSS_VW:
    case CSSPrimitiveValue.CSS_VH:
    case CSSPrimitiveValue.CSS_VMIN:
    case CSSPrimitiveValue.CSS_VMAX:
    case CSSPrimitiveValue.CSS_DPPX:
    case CSSPrimitiveValue.CSS_DPI:
    case CSSPrimitiveValue.CSS_DPCM:
        return true;
    }
    return false;
}

function getNumericValue(cssValue)
{
    if (hasFloatValue(cssValue.primitiveType))
        return cssValue.getFloatValue(cssValue.primitiveType);

    return -1;
}

function isCalcPrimitiveValue(value)
{
    switch (value.primitiveType) {
    case 113: // CSSPrimitiveValue.CSS_CALC:
    case 114: // CSSPrimitiveValue.CSS_CALC_PERCENTAGE_WITH_NUMBER:
    case 115: // CSSPrimitiveValue.CSS_CALC_PERCENTAGE_WITH_LENGTH:
    return true;
    }
    return false;
}

function extractNumbersFromCalcExpression(value, values)
{
    var calcRegexp = /^calc\((.+)\)$/;
    var result = calcRegexp.exec(value.cssText);
    var numberMatch = /([^\.\-0-9]*)(-?[\.0-9]+)/;
    var remainder = result[1];
    var match;
    while ((match = numberMatch.exec(remainder)) !== null) {
        var skipLength = match[1].length + match[2].length;
        values.push(parseFloat(match[2]))
        remainder = remainder.substr(skipLength + 1);
    }
}

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 == "background-position-x" || property == "background-position-y") {
        computedValue = window.getComputedStyle(document.getElementById(elementId))[property];
        pass = computedValue == expectedValue;
    } 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 if (property == "-webkit-clip-path" || property == "-webkit-shape-outside") {
        computedValue = window.getComputedStyle(document.getElementById(elementId)).getPropertyCSSValue(property).cssText;

        var expectedValues = parseClipPath(expectedValue);
        var values = parseClipPath(computedValue);
        
        pass = false;
        if (values && values.length == expectedValues.length) {
            pass = true
            for (var i = 0; i < values.length; ++i)
                pass &= isCloseEnough(values[i], expectedValues[i], 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) {
                var styleValue = computedStyle[i];
                switch (styleValue.cssValueType) {
                  case CSSValue.CSS_PRIMITIVE_VALUE:
                    if (hasFloatValue(styleValue))
                        values.push(styleValue.getFloatValue(CSSPrimitiveValue.CSS_NUMBER));
                    else if (isCalcPrimitiveValue(styleValue))
                        extractNumbersFromCalcExpression(styleValue, values);
                    break;
                  case CSSValue.CSS_CUSTOM:
                    // arbitrarily pick shadow-x and shadow-y
                    if (isShadow) {
                      var shadowXY = getShadowXY(styleValue);
                      console.log('shadowXY', shadowXY);
                      values.push(shadowXY[0]);
                      values.push(shadowXY[1]);
                    } else
                      values.push(styleValue.cssText);
                    break;
                }
            }
            computedValue = values.join(',');
            pass = values.length > 0;
            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); };
}

const prefix = "-webkit-";
const propertiesRequiringPrefix = ["-webkit-text-stroke-color", "-webkit-text-fill-color"];

function pauseTransitionAtTimeOnElement(transitionProperty, time, element)
{
    if (transitionProperty.startsWith(prefix) && !propertiesRequiringPrefix.includes(transitionProperty))
        transitionProperty = transitionProperty.substr(prefix.length);

    const animations = element.getAnimations();
    for (let animation of animations) {
        if (animation instanceof CSSTransition && animation.transitionProperty == transitionProperty) {
            animation.pause();
            animation.currentTime = time * 1000;
            return true;
        }
    }
    console.log(`A transition for property ${transitionProperty} could not be found`);
    return false;
}

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);
              if (!pauseTransitionAtTimeOnElement(property, time, element))
                window.console.log("Failed to pause '" + property + "' transition on element '" + elementId + "'");
            }
            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 = true;

function runTransitionTest(expected, callback, usePauseAPI, doPixelTest)
{
    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);
}