/* This is the helper function to run animation 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)
    event [optional]: which DOM event to wait for before starting the test ("webkitAnimationStart" by default)

    Each sub-array must contain these items in this order:
    - the name of the CSS animation (may be null) [1]
    - the time in seconds at which to snapshot the CSS property
    - the id of the element on which to get the CSS property value [2]
    - the name of the CSS property to get [3]
    - the expected value for the CSS property
    - the tolerance to use when comparing the effective CSS property value with its expected value

    [1] If null is passed, a regular setTimeout() will be used instead to snapshot the animated property in the future,
    instead of fast forwarding using the pauseAnimationAtTimeOnElement() function.
    
    [2] If a single string is passed, it is the id of the element to test. If an array with 2 elements is passed they
    are the ids of 2 elements, whose values are compared for equality. In this case the expected value is ignored
    but the tolerance is used in the comparison. If the second element is prefixed with "static:", no animation on that
    element is required, allowing comparison with an unanimated "expected value" element.
    
    If a string with a '.' is passed, this is an element in an iframe. The string before the dot is the iframe id
    and the string after the dot is the element name in that iframe.

    [3] If the CSS property name is "webkitTransform", 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 "webkitTransform.N", expected value must be a number corresponding to the Nth element of the matrix

*/

function isCloseEnough(actual, expected, tolerance)
{
    if (isNaN(actual) || isNaN(expected))
        return false;
    var diff = Math.abs(actual - expected);
    return diff <= tolerance;
}

function matrixStringToArray(s)
{
    if (s == "none")
        return [ 1, 0, 0, 1, 0, 0 ];
    var m = s.split("(");
    m = m[1].split(")");
    return m[0].split(",");
}

function parseCSSImage(s)
{
    // Special case none.
    if (s == "none")
        return ["none"];

    // Separate function name from function value.
    var matches = s.match("([\\w\\-]+)\\((.*)\\)");
    if (!matches){
        console.error("Parsing error. Value not a CSS Image function ", s);
        return false;
    }

    var functionName = matches[1];
    var functionValue = matches[2];

    // Generator functions can have CSS images as values themself.
    // These functions will call parseCSSImage for each CSS Image.
    switch (functionName) {
    case "filter":
        return parseFilterImage(functionValue);
    case "cross-fade":
    case "-webkit-cross-fade":
        return parseCrossFade(functionValue);
    case "url":
        return ["url", functionValue];
    // FIXME: Add support for linear and redial gradient.
    default:
        // All supported filter functions must be listed above.
        return false;
    }
}

// This should just be called by parseCSSImage.
function parseCrossFade(s)
{
    var matches = s.match("(.*)\\s*,\\s*(.*)\\s*,\\s*(.*)\\s*");
    if (!matches) {
        console.error("Parsing error on 'cross-fade()'.");
        return null;
    }

    var from = parseCSSImage(matches[1]);
    var to = parseCSSImage(matches[2]);
    if (!from || !to) {
        console.error("Parsing error on images passed to 'cross-fade()' ", s);
        return null;
    }

    var fadeValue = matches[3];
    var percent;
    if (isNaN(fadeValue)) {
        // Check if last char is '%' and rip it off.
        // Normalize it to number.
        if (fadeValue.search('%') != fadeValue.length - 1) {
            console.error("Passed value to 'cross-fade()' is not a number or percentage ", fadeValue);
            return null;
        }
        fadeValue = fadeValue.slice(0, fadeValue.length - 1);
        if (isNaN(fadeValue)) {
            console.error("Passed value to 'cross-fade()' is not a number or percentage ", fadeValue);
            return null;
        }
        percent = parseFloat(fadeValue) / 100;
    } else
        percent = parseFloat(fadeValue);

    return ["cross-fade", from, to, percent];
}

// This should just be called by parseCSSImage.
function parseFilterImage(s)
{
    // Separate image value from filter function list.
    var matches = s.match("([\\-\\w]+\\(.*\\))\\s*,\\s*(.*)\\s*");
    if (!matches) {
        console.error("Parsing error on 'filter()' ", s);
        return false;
    }

    var image = parseCSSImage(matches[1]);
    if (!image) {
        console.error("Parsing error on image passed to 'filter()' ", s);
        return false;
    }

    var filterFunctionList = parseFilterFunctionList(matches[2]);
    if (!filterFunctionList) {
        console.error("Parsing error on filter function list passed to 'filter()' ", s);
        return false;
    }

    return ["-webkit-filter", image, filterFunctionList];
}

function parseFilterFunctionList(s)
{
    var reg = /\)*\s*(blur|brightness|contrast|drop\-shadow|grayscale|hue\-rotate|invert|opacity|saturate|sepia|url)\(/
    var matches = s.split(reg);

    // First item must be empty. All other items are of functionName, functionValue.
    if (!matches || matches.shift() != "")
        return null;

    // Odd items are the function name, even items the function value.
    if (!matches.length || matches.length % 2)
        return null;

    var functionList = [];
    for (var i = 0; i < matches.length; i += 2) {
        var functionName = matches[i];
        var functionValue = matches[i+1];
        functionList.push(functionName);
        if (functionName == "drop-shadow" || functionName == "url") {
            // FIXME: Support parsing of drop-shadow.
            functionList.push(functionValue);
            continue;
        }
        functionList.push(parseFloat(functionValue));
    }
    return functionList;
}

function parseBasicShape(s)
{
    var shapeFunction = s.match(/(\w+)\((.+)\)/);
    if (!shapeFunction)
        return null;

    var matches;
    switch (shapeFunction[1]) {
    case "inset":
        matches = s.match("inset\\(\\s*(.*)\\s*\\)");
        matches = matches[1].split(/\s+/);
        matches.unshift(s);
        break;
    case "circle":
        matches = s.match("circle\\((.*)\\s+at\\s+(.*)\\s+(.*)\\)");
        break;
    case "ellipse":
        matches = s.match("ellipse\\((.*)\\s+(.*)\\s+at\\s+(.*)\\s+(.*)\\)");
        break;
    case "polygon":
        matches = s.match("polygon\\(\\s*(.*)\\s*\\)");
        matches = matches[1].split(/\s*,\s*/);
        matches = matches.map(function(match) {
            return match.split(/\s+/);
        });
        matches = Array.prototype.concat.apply([s], matches);
        break;
    default:
        return null;
    }

    if (!matches)
        return null;

    matches.shift();
    var i = 0;
    if (shapeFunction[1] == "polygon")
        i++; // skip nonzero|evenodd below

    // Normalize percentage values.
    for (; i < matches.length; ++i) {
        var param = parseFloat(matches[i]);

        if (isNaN(param))
            continue;

        if (matches[i].indexOf('%') != -1)
            matches[i] = param / 100;
        else
            matches[i] = param;
    }

    return {"shape": shapeFunction[1], "params": matches};
}

function compareCSSImages(computedValue, expectedValue, tolerance)
{
    var actual = typeof computedValue === "string" ? parseCSSImage(computedValue) : computedValue;
    var expected = typeof expectedValue === "string" ? parseCSSImage(expectedValue) : expectedValue;
    if (!actual || !Array.isArray(actual)         // Check that: actual is an array,
        || !expected || !Array.isArray(expected)  // expected is an array,
        || actual[0] != expected[0]) {            // and image function names are the same.
        console.error("Unexpected mismatch between CSS Image functions.");
        return false;
    }
    switch (actual[0]) {
    case "none":
        return true;
    case "-webkit-filter":
        return compareCSSImages(actual[1], expected[1], tolerance)
            && compareFilterFunctions(actual[2], expected[2], tolerance);
    case "cross-fade":
    case "-webkit-cross-fade":
        return compareCSSImages(actual[1], expected[1], tolerance)
            && compareCSSImages(actual[2], expected[2], tolerance)
            && isCloseEnough(actual[3], expected[3], tolerance);
    case "url":
        return actual[1].search(expected[1]) >= 0;
    default:
        console.error("Unknown CSS Image function ", actual[0]);
        return false;
    }
}

function compareFontVariationSettings(computedValue, expectedValue, tolerance)
{
    if (!computedValue)
        return false;
    if (computedValue == "normal" || expectedValue == "normal")
        return computedValue == expectedValue;
    var computed = computedValue.split(", ");
    var expected = expectedValue.split(", ");
    if (computed.length != expected.length)
        return false;
    for (var i = 0; i < computed.length; ++i) {
        var computedPieces = computed[i].split(" ");
        var expectedPieces = expected[i].split(" ");
        if (computedPieces.length != 2 || expectedPieces.length != 2)
            return false;
        if (computedPieces[0] != expectedPieces[0])
            return false;
        var computedNumber = Number.parseFloat(computedPieces[1]);
        var expectedNumber = Number.parseFloat(expectedPieces[1]);
        if (Math.abs(computedNumber - expectedNumber) > tolerance)
            return false;
    }
    return true;
}

function compareFontStyle(computedValue, expectedValue, tolerance)
{
	var computed = computedValue.split(" ");
	var expected = expectedValue.split(" ");
	var computedAngle = computed[1].split("deg");
	var expectedAngle = expected[1].split("deg");
	return computed[0] == expected[0] && Math.abs(computedAngle[0] - expectedAngle[0]) <= tolerance;
}

// Called by CSS Image function filter() as well as filter property.
function compareFilterFunctions(computedValue, expectedValue, tolerance)
{
    var actual = typeof computedValue === "string" ? parseFilterFunctionList(computedValue) : computedValue;
    var expected = typeof expectedValue === "string" ? parseFilterFunctionList(expectedValue) : expectedValue;
    if (!actual || !Array.isArray(actual)         // Check that: actual is an array,
        || !expected || !Array.isArray(expected)  // expected is an array,
        || !actual.length                         // actual array has entries,
        || actual.length != expected.length       // actual and expected have same length
        || actual.length % 2 == 1)                // and image function names are the same.
        return false;

    for (var i = 0; i < actual.length; i += 2) {
        if (actual[i] != expected[i]) {
            console.error("Filter functions do not match.");
            return false;
        }
        if (!isCloseEnough(actual[i+1], expected[i+1], tolerance)) {
            console.error("Filter function values do not match.");
            return false;
        }
    }
    return true;
}

function basicShapeParametersMatch(paramList1, paramList2, tolerance)
{
    if (paramList1.shape != paramList2.shape
        || paramList1.params.length != paramList2.params.length)
        return false;
    var i = 0;
    for (; i < paramList1.params.length; ++i) {
        var param1 = paramList1.params[i], 
            param2 = paramList2.params[i];
        if (param1 === param2)
            continue;
        var match = isCloseEnough(param1, param2, tolerance);
        if (!match)
            return false;
    }
    return true;
}

function checkExpectedValue(expected, index)
{
    var animationName = expected[index][0];
    var time = expected[index][1];
    var elementId = expected[index][2];
    var property = expected[index][3];
    var expectedValue = expected[index][4];
    var tolerance = expected[index][5];

    // Check for a pair of element Ids
    var compareElements = false;
    var element2Static = false;
    var elementId2;
    if (typeof elementId != "string") {
        if (elementId.length != 2)
            return;
            
        elementId2 = elementId[1];
        elementId = elementId[0];

        if (elementId2.indexOf("static:") == 0) {
            elementId2 = elementId2.replace("static:", "");
            element2Static = true;
        }

        compareElements = true;
    }
    
    // Check for a dot separated string
    var iframeId;
    if (!compareElements) {
        var array = elementId.split('.');
        if (array.length == 2) {
            iframeId = array[0];
            elementId = array[1];
        }
    }

    if (animationName && hasPauseAnimationAPI && !pauseAnimationAtTimeOnElement(animationName, time, document.getElementById(elementId))) {
        result += "FAIL - animation \"" + animationName + "\" is not running" + "<br>";
        return;
    }
    
    if (compareElements && !element2Static && animationName && hasPauseAnimationAPI && !pauseAnimationAtTimeOnElement(animationName, time, document.getElementById(elementId2))) {
        result += "FAIL - animation \"" + animationName + "\" is not running" + "<br>";
        return;
    }
    
    var computedValue, computedValue2;
    if (compareElements) {
        computedValue = getPropertyValue(property, elementId, iframeId);
        computedValue2 = getPropertyValue(property, elementId2, iframeId);

        if (comparePropertyValue(property, computedValue, computedValue2, tolerance))
            result += "PASS - \"" + property + "\" property for \"" + elementId + "\" and \"" + elementId2 + 
                            "\" elements at " + time + "s are close enough to each other" + "<br>";
        else
            result += "FAIL - \"" + property + "\" property for \"" + elementId + "\" and \"" + elementId2 + 
                            "\" elements at " + time + "s saw: \"" + computedValue + "\" and \"" + computedValue2 + 
                                            "\" which are not close enough to each other" + "<br>";
    } else {
        var elementName;
        if (iframeId)
            elementName = iframeId + '.' + elementId;
        else
            elementName = elementId;

        computedValue = getPropertyValue(property, elementId, iframeId);

        if (comparePropertyValue(property, computedValue, expectedValue, tolerance))
            result += "PASS - \"" + property + "\" property for \"" + elementName + "\" element at " + time + 
                            "s saw something close to: " + expectedValue + "<br>";
        else
            result += "FAIL - \"" + property + "\" property for \"" + elementName + "\" element at " + time + 
                            "s expected: " + expectedValue + " but saw: " + computedValue + "<br>";
    }
}


function getPropertyValue(property, elementId, iframeId)
{
    var computedValue;
    var element;
    if (iframeId)
        element = document.getElementById(iframeId).contentDocument.getElementById(elementId);
    else
        element = document.getElementById(elementId);

    if (property == "lineHeight")
        computedValue = parseInt(window.getComputedStyle(element).lineHeight);
    else if (property == "backgroundImage"
               || property == "borderImageSource"
               || property == "listStyleImage"
               || property == "webkitMaskImage"
               || property == "webkitMaskBoxImage"
               || property == "filter"
               || property == "-apple-color-filter"
               || property == "webkitFilter"
               || property == "webkitBackdropFilter"
               || property == "webkitClipPath"
               || property == "webkitShapeInside"
               || property == "webkitShapeOutside"
               || property == "font-variation-settings"
               || property == "font-style"
               || !property.indexOf("webkitTransform")
               || !property.indexOf("transform")) {
        computedValue = window.getComputedStyle(element)[property.split(".")[0]];
    } else if (property == "font-stretch") {
        var computedStyle = window.getComputedStyle(element).getPropertyCSSValue(property);
        computedValue = computedStyle.getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE);
    } else {
        var computedStyle = window.getComputedStyle(element).getPropertyCSSValue(property);
        computedValue = computedStyle.getFloatValue(CSSPrimitiveValue.CSS_NUMBER);
    }

    return computedValue;
}

function comparePropertyValue(property, computedValue, expectedValue, tolerance)
{
    var result = true;

    if (!property.indexOf("webkitTransform") || !property.indexOf("transform")) {
        if (typeof expectedValue == "string")
            result = (computedValue == expectedValue);
        else if (typeof expectedValue == "number") {
            var m = matrixStringToArray(computedValue);
            result = isCloseEnough(parseFloat(m[parseInt(property.substring(16))]), expectedValue, tolerance);
        } else {
            var m = matrixStringToArray(computedValue);
            for (i = 0; i < expectedValue.length; ++i) {
                result = isCloseEnough(parseFloat(m[i]), expectedValue[i], tolerance);
                if (!result)
                    break;
            }
        }
    } else if (property == "webkitFilter" || property == "webkitBackdropFilter" || property == "filter" || property == "-apple-color-filter") {
        var filterParameters = parseFilterFunctionList(computedValue);
        var filter2Parameters = parseFilterFunctionList(expectedValue);
        result = compareFilterFunctions(filterParameters, filter2Parameters, tolerance);
    } else if (property == "webkitClipPath" || property == "webkitShapeInside" || property == "webkitShapeOutside") {
        var clipPathParameters = parseBasicShape(computedValue);
        var clipPathParameters2 = parseBasicShape(expectedValue);
        if (!clipPathParameters || !clipPathParameters2)
            result = false;
        result = basicShapeParametersMatch(clipPathParameters, clipPathParameters2, tolerance);
    } else if (property == "backgroundImage"
               || property == "borderImageSource"
               || property == "listStyleImage"
               || property == "webkitMaskImage"
               || property == "webkitMaskBoxImage")
        result = compareCSSImages(computedValue, expectedValue, tolerance);
    else if (property == "font-variation-settings")
        result = compareFontVariationSettings(computedValue, expectedValue, tolerance);
    else if (property == "font-style")
        result = compareFontStyle(computedValue, expectedValue, tolerance);
    else
        result = isCloseEnough(computedValue, expectedValue, tolerance);
    return result;
}

function endTest(finishCallback)
{
    document.getElementById('result').innerHTML = result;

    if (finishCallback)
        finishCallback();

    if (window.testRunner)
        testRunner.notifyDone();
}

function checkExpectedValueCallback(expected, index)
{
    return function() { checkExpectedValue(expected, index); };
}

function pauseAnimationAtTimeOnElement(animationName, time, element)
{
    // If we haven't opted into CSS Animations and CSS Transitions as Web Animations, use the internal API.
    if ('internals' in window && !internals.settings.webAnimationsCSSIntegrationEnabled())
        return internals.pauseAnimationAtTimeOnElement(animationName, time, element);

    // Otherwise, use the Web Animations API.
    const animations = element.getAnimations();
    for (let animation of animations) {
        if (animation instanceof CSSAnimation && animation.animationName == animationName) {
            animation.currentTime = time * 1000;
            animation.pause();
            return true;
        }
    }
    return false;
}

var testStarted = false;
function startTest(expected, startCallback, finishCallback)
{
    if (testStarted) return;
    testStarted = true;

    if (startCallback)
        startCallback();

    var maxTime = 0;

    for (var i = 0; i < expected.length; ++i) {
        var animationName = expected[i][0];
        var time = expected[i][1];

        // We can only use the animation fast-forward mechanism if there's an animation name
        if (animationName && hasPauseAnimationAPI)
            checkExpectedValue(expected, i);
        else {
            if (time > maxTime)
                maxTime = time;

            window.setTimeout(checkExpectedValueCallback(expected, i), time * 1000);
        }
    }

    if (maxTime > 0)
        window.setTimeout(function () {
            endTest(finishCallback);
        }, maxTime * 1000 + 50);
    else
        endTest(finishCallback);
}

var result = "";
var hasPauseAnimationAPI = true;

if (window.testRunner)
    testRunner.waitUntilDone();

function runAnimationTest(expected, startCallback, event, disablePauseAnimationAPI, doPixelTest, finishCallback)
{
    if (disablePauseAnimationAPI)
        hasPauseAnimationAPI = false;

    if (window.testRunner) {
        if (!doPixelTest)
            testRunner.dumpAsText();
    }
    
    if (!expected)
        throw("Expected results are missing!");
    
    var target = document;
    if (event == undefined)
        waitForAnimationToStart(target, function() { startTest(expected, startCallback, finishCallback); });
    else if (event == "load")
        window.addEventListener(event, function() {
            startTest(expected, startCallback, finishCallback);
        }, false);
}

function waitForAnimationToStart(element, callback)
{
    element.addEventListener('webkitAnimationStart', function() {
        requestAnimationFrame(callback); // delay to give hardware animations a chance to start
    }, false);
}