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

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

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

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

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

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

const PROPERTIES_TO_TEST = [
    "webkitAnimationName",
    "webkitAnimationDuration",
    "webkitAnimationTimingFunction",
    "webkitAnimationDelay",
    "webkitAnimationIterationCount",
    "webkitAnimationDirection",
    "webkitAnimationFillMode"
];

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);

    // Unfortunately need to force a style recalculation before testing.
    setTimeout(function () {
        element.style.webkitAnimation = TEST_INPUTS[testIndex];

        // And another forced style recalculation.
        setTimeout(function() {
            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();
            }
        }, 0);
    }, 0);
}

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>