<!DOCTYPE html>
<html>
<head>
<title>Shorthand animation name ordering test</title>
<style>
#box {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: red;
    margin: 5px;
}

@keyframes test {
    from { left: 0px; }
    to { left: 100px; }
}

@keyframes backwards {
    from { left: 0px; }
    to { left: 100px; }
}

@keyframes alternate {
    from { left: 0px; }
    to { left: 100px; }
}

@keyframes linear {
    from { left: 0px; }
    to { left: 100px; }
}

@keyframes ease {
    from { left: 0px; }
    to { left: 100px; }
}
</style>
<script>

const PROPERTIES_TO_TEST = [
    "animationName",
    "animationDuration",
    "animationTimingFunction",
    "animationDelay",
    "animationIterationCount",
    "animationDirection",
    "animationFillMode"
];

const DEFAULT_VALUES = [
    "none",
    "0",
    "ease",
    "0",
    "1",
    "normal",
    "none"
];

const TEST_INPUTS = [
    "test 3s",
    "3s test",  // name is not first
    "3s test forwards",  // includes fill mode
    "3s forwards test",  // fill mode will match before name
    "3s linear forwards test", // both timing and fill mode will match first
    "3s forwards test linear", // name in between two keywords
    "3s 4s 5 forwards linear test", // name coming last
    "3s 4s infinite alternate forwards linear test", // all keywords before name
    "3s 4s infinite alternate none linear test", // none keyword for fill mode before none keyword for name
    "3s 4s infinite alternate forwards ease linear", // a special case where the 'linear' animation name will actually work because the timing function already parsed
];

const EXPECTED_VALUES = [
    ["test", "3s", "ease", "0s", "1", "normal", "none"],
    ["test", "3s", "ease", "0s", "1", "normal", "none"],
    ["test", "3s", "ease", "0s", "1", "normal", "forwards"],
    ["test", "3s", "ease", "0s", "1", "normal", "forwards"],
    ["test", "3s", "linear", "0s", "1", "normal", "forwards"],
    ["test", "3s", "linear", "0s", "1", "normal", "forwards"],
    ["test", "3s", "linear", "4s", "5", "normal", "forwards"],
    ["test", "3s", "linear", "4s", "infinite", "alternate", "forwards"],
    ["test", "3s", "linear", "4s", "infinite", "alternate", "none"],
    ["linear", "3s", "ease", "4s", "infinite", "alternate", "forwards"],
];

var numTestsComplete = 0;

function runTests() {
    runIndividualTest(0);
}

function clearElementAnimationStyle(element) {
    for (var i=0; i < PROPERTIES_TO_TEST.length; i++)
        element.style[PROPERTIES_TO_TEST[i]] = DEFAULT_VALUES[i];
}

function runIndividualTest(testIndex) {
    var result = document.getElementById("result");
    var element = document.getElementById("box");

    clearElementAnimationStyle(element);

    element.offsetTop; // force style recalc

    element.style.animation = TEST_INPUTS[testIndex];

    element.offsetTop; // force another style recalc

    var computedStyle = window.getComputedStyle(element);

    for (var i=0; i < PROPERTIES_TO_TEST.length; i++) {
        var value = computedStyle[PROPERTIES_TO_TEST[i]];
        if (value == EXPECTED_VALUES[testIndex][i])
            result.innerHTML += "PASS Test " + (numTestsComplete + 1) + ": " + PROPERTIES_TO_TEST[i] + " was " + value + "<br>";
        else
            result.innerHTML += "FAIL Test " + (numTestsComplete + 1) + ": " + PROPERTIES_TO_TEST[i] + " was " + value + " should be " + EXPECTED_VALUES[testIndex][i] + "<br>";
    }

    numTestsComplete++;
    if (numTestsComplete < TEST_INPUTS.length)
        runIndividualTest(numTestsComplete);
    else {
        if (window.testRunner)
            testRunner.notifyDone();
    }
}

if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

window.addEventListener("load", runTests, false);
</script>
</head>
<body>
<div id="box"></div>
<div id="result"></div>
</body>
</html>