<!DOCTYPE html>
<html>
<head>
<script src="../resources/js-test.js"></script>
</head>
<body>
<script>
description("Test the parsing and the computed style values of the animations properties.")

var testContainer = document.createElement("div");
document.body.appendChild(testContainer);

testContainer.innerHTML = '<div style="width:500px;height:500px"><div id="test">hello</div></div>';

e = document.getElementById('test');
style = e.style;
computedStyle = window.getComputedStyle(e, null);

// This function checks the return value of computedStyle.animation and verifies Blink can parse it.
function checkAnimationShorthandValue() {
    var before = computedStyle.getPropertyValue('animation');
    e.style.animation = '';
    e.style.animation = before;
    return (computedStyle.getPropertyValue('animation') == before);
}

debug("Valid animation-name values.");
// Initial test.
shouldBe("computedStyle.animationName", "'none'");
shouldBe("computedStyle.webkitAnimationName", "'none'");

style.animationName = "none";
shouldNotBe("Object.keys(style).indexOf('animationName')", "-1");
shouldBe("Object.keys(style).indexOf('webkitAnimationName')", "-1");
shouldBe("style.animationName", "'none'");
shouldBe("computedStyle.animationName", "'none'");
shouldBe("style.webkitAnimationName", "'none'");
shouldBe("computedStyle.webkitAnimationName", "'none'");

style.animationName = "none, none";
shouldBe("style.animationName", "'none, none'");
shouldBe("computedStyle.animationName", "'none, none'");
shouldBe("style.webkitAnimationName", "'none, none'");
shouldBe("computedStyle.webkitAnimationName", "'none, none'");

style.animationName = "myAnim";
shouldBe("style.animationName", "'myAnim'");
shouldBe("computedStyle.animationName", "'myAnim'");
shouldBe("style.webkitAnimationName", "'myAnim'");
shouldBe("computedStyle.webkitAnimationName", "'myAnim'");

style.animationName = "background-position, font-size";
shouldBe("style.animationName", "'background-position, font-size'");
shouldBe("computedStyle.animationName", "'background-position, font-size'");
shouldBe("style.webkitAnimationName", "'background-position, font-size'");
shouldBe("computedStyle.webkitAnimationName", "'background-position, font-size'");

style.animationName = "background-position, font-size, color";
shouldBe("style.animationName", "'background-position, font-size, color'");
shouldBe("computedStyle.animationName", "'background-position, font-size, color'");
shouldBe("style.webkitAnimationName", "'background-position, font-size, color'");
shouldBe("computedStyle.webkitAnimationName", "'background-position, font-size, color'");

style.animationName = "all, font-size, color";
shouldBe("style.animationName", "'all, font-size, color'");
shouldBe("computedStyle.animationName", "'all, font-size, color'");
shouldBe("style.webkitAnimationName", "'all, font-size, color'");
shouldBe("computedStyle.webkitAnimationName", "'all, font-size, color'");

style.animationName = "inherit";
shouldBe("style.animationName", "'inherit'");
shouldBe("computedStyle.animationName", "'none'");
shouldBe("style.webkitAnimationName", "'inherit'");
shouldBe("computedStyle.webkitAnimationName", "'none'");

style.animationName = "initial";
shouldBe("style.animationName", "'initial'");
shouldBe("computedStyle.animationName", "'none'");
shouldBe("style.webkitAnimationName", "'initial'");
shouldBe("computedStyle.webkitAnimationName", "'none'");

debug("Invalid animation-name values.");
style.animationName = "";

style.animationName = "0";
shouldBe("style.animationName", "''");
shouldBe("computedStyle.animationName", "'none'");
shouldBe("style.webkitAnimationName", "''");
shouldBe("computedStyle.webkitAnimationName", "'none'");

style.animationName = "all none";
shouldBe("style.animationName", "''");
shouldBe("computedStyle.animationName", "'none'");
shouldBe("style.webkitAnimationName", "''");
shouldBe("computedStyle.webkitAnimationName", "'none'");

style.animationName = "opacity width";
shouldBe("style.animationName", "''");
shouldBe("computedStyle.animationName", "'none'");
shouldBe("style.webkitAnimationName", "''");
shouldBe("computedStyle.webkitAnimationName", "'none'");

style.animationName = "";

debug("Valid animation-duration values.");
// Initial test.
shouldBe("computedStyle.animationDuration", "'0s'");
shouldBe("computedStyle.webkitAnimationDuration", "'0s'");

style.animationDuration = "0s";
shouldNotBe("Object.keys(style).indexOf('animationDuration')", "-1");
shouldBe("Object.keys(style).indexOf('webkitAnimationDuration')", "-1");
shouldBe("style.animationDuration", "'0s'");
shouldBe("computedStyle.animationDuration", "'0s'");
shouldBe("style.webkitAnimationDuration", "'0s'");
shouldBe("computedStyle.webkitAnimationDuration", "'0s'");

style.animationDuration = "5s";
shouldBe("style.animationDuration", "'5s'");
shouldBe("computedStyle.animationDuration", "'5s'");
shouldBe("style.webkitAnimationDuration", "'5s'");
shouldBe("computedStyle.webkitAnimationDuration", "'5s'");

style.animationDuration = "10ms";
shouldBe("style.animationDuration", "'10ms'");
shouldBe("computedStyle.animationDuration", "'0.01s'");
shouldBe("style.webkitAnimationDuration", "'10ms'");
shouldBe("computedStyle.webkitAnimationDuration", "'0.01s'");

style.animationDuration = "10ms, 20s";
shouldBe("style.animationDuration", "'10ms, 20s'");
shouldBe("computedStyle.animationDuration", "'0.01s, 20s'");
shouldBe("style.webkitAnimationDuration", "'10ms, 20s'");
shouldBe("computedStyle.webkitAnimationDuration", "'0.01s, 20s'");

debug("Invalid animation-duration values.");
style.animationDuration = "";

// Negative values are invalid.
style.animationDuration = "-10ms";
shouldBe("style.animationDuration", "''");
shouldBe("computedStyle.animationDuration", "'0s'");
shouldBe("style.webkitAnimationDuration", "''");
shouldBe("computedStyle.webkitAnimationDuration", "'0s'");

style.animationDuration = "'5ms'";
shouldBe("style.animationDuration", "''");
shouldBe("computedStyle.animationDuration", "'0s'");
shouldBe("style.webkitAnimationDuration", "''");
shouldBe("computedStyle.webkitAnimationDuration", "'0s'");

style.animationDuration = "30px";
shouldBe("style.animationDuration", "''");
shouldBe("computedStyle.animationDuration", "'0s'");
shouldBe("style.webkitAnimationDuration", "''");
shouldBe("computedStyle.webkitAnimationDuration", "'0s'");

style.animationDuration = "solid";
shouldBe("style.animationDuration", "''");
shouldBe("computedStyle.animationDuration", "'0s'");
shouldBe("style.webkitAnimationDuration", "''");
shouldBe("computedStyle.webkitAnimationDuration", "'0s'");

style.animationDuration = "20";
shouldBe("style.animationDuration", "''");
shouldBe("computedStyle.animationDuration", "'0s'");
shouldBe("style.webkitAnimationDuration", "''");
shouldBe("computedStyle.webkitAnimationDuration", "'0s'");

style.animationDuration = "20%";
shouldBe("style.animationDuration", "''");
shouldBe("computedStyle.animationDuration", "'0s'");
shouldBe("style.webkitAnimationDuration", "''");
shouldBe("computedStyle.webkitAnimationDuration", "'0s'");

style.animationDuration = "0s, 20px";
shouldBe("style.animationDuration", "''");
shouldBe("computedStyle.animationDuration", "'0s'");
shouldBe("style.webkitAnimationDuration", "''");
shouldBe("computedStyle.webkitAnimationDuration", "'0s'");

debug("Valid animation-timing-function values.");
// Initial test.
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "linear";
shouldNotBe("Object.keys(style).indexOf('animationTimingFunction')", "-1");
shouldBe("Object.keys(style).indexOf('webkitAnimationTimingFunction')", "-1");
shouldBe("style.animationTimingFunction", "'linear'");
shouldBe("computedStyle.animationTimingFunction", "'linear'");
shouldBe("style.webkitAnimationTimingFunction", "'linear'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'linear'");

style.animationTimingFunction = "ease";
shouldBe("style.animationTimingFunction", "'ease'");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "'ease'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "ease-in";
shouldBe("style.animationTimingFunction", "'ease-in'");
shouldBe("computedStyle.animationTimingFunction", "'ease-in'");
shouldBe("style.webkitAnimationTimingFunction", "'ease-in'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-in'");

style.animationTimingFunction = "ease-out";
shouldBe("style.animationTimingFunction", "'ease-out'");
shouldBe("computedStyle.animationTimingFunction", "'ease-out'");
shouldBe("style.webkitAnimationTimingFunction", "'ease-out'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-out'");

style.animationTimingFunction = "ease-in-out";
shouldBe("style.animationTimingFunction", "'ease-in-out'");
shouldBe("computedStyle.animationTimingFunction", "'ease-in-out'");
shouldBe("style.webkitAnimationTimingFunction", "'ease-in-out'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-in-out'");

style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1)";
shouldBe("style.animationTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'");

style.animationTimingFunction = "cubic-bezier(0.1, 0, 0.23, 0.4)";
shouldBe("style.animationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'");

style.animationTimingFunction = "cubic-bezier(0.1, 0, 0.23, 3)";
shouldBe("style.animationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'");

style.animationTimingFunction = "cubic-bezier(0.1, 5, 0.23, 3)";
shouldBe("style.animationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'");

style.animationTimingFunction = "cubic-bezier(0.1, 5, 0.23, 0)";
shouldBe("style.animationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'");

style.animationTimingFunction = "cubic-bezier(0.2, 2, 0.2, -0.4)";
shouldBe("style.animationTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'");

style.animationTimingFunction = "cubic-bezier(0.2, -2, 0.2, 0.4)";
shouldBe("style.animationTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'");

style.animationTimingFunction = "step-start";
shouldBe("style.animationTimingFunction", "'step-start'");
shouldBe("computedStyle.animationTimingFunction", "'step-start'");
shouldBe("style.webkitAnimationTimingFunction", "'step-start'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'step-start'");

style.animationTimingFunction = "step-end";
shouldBe("style.animationTimingFunction", "'step-end'");
shouldBe("computedStyle.animationTimingFunction", "'step-end'");
shouldBe("style.webkitAnimationTimingFunction", "'step-end'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'step-end'");

style.animationTimingFunction = "steps(3)";
shouldBe("style.animationTimingFunction", "'steps(3, end)'");
shouldBe("computedStyle.animationTimingFunction", "'steps(3, end)'");
shouldBe("style.webkitAnimationTimingFunction", "'steps(3, end)'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'steps(3, end)'");

style.animationTimingFunction = "steps(4, end)";
shouldBe("style.animationTimingFunction", "'steps(4, end)'");
shouldBe("computedStyle.animationTimingFunction", "'steps(4, end)'");
shouldBe("style.webkitAnimationTimingFunction", "'steps(4, end)'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'steps(4, end)'");

style.animationTimingFunction = "steps(5, start)";
shouldBe("style.animationTimingFunction", "'steps(5, start)'");
shouldBe("computedStyle.animationTimingFunction", "'steps(5, start)'");
shouldBe("style.webkitAnimationTimingFunction", "'steps(5, start)'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'steps(5, start)'");

style.animationName = "anim1, anim2";

style.animationTimingFunction = "ease-in-out, ease-in";
shouldBe("style.animationTimingFunction", "'ease-in-out, ease-in'");
shouldBe("computedStyle.animationTimingFunction", "'ease-in-out, ease-in'");
shouldBe("style.webkitAnimationTimingFunction", "'ease-in-out, ease-in'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-in-out, ease-in'");

style.animationTimingFunction = "ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)";
shouldBe("style.animationTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
shouldBe("computedStyle.animationTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
shouldBe("style.webkitAnimationTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");

style.animationTimingFunction = "steps(3, start), ease-in-out";
shouldBe("style.animationTimingFunction", "'steps(3, start), ease-in-out'");
shouldBe("computedStyle.animationTimingFunction", "'steps(3, start), ease-in-out'");
shouldBe("style.webkitAnimationTimingFunction", "'steps(3, start), ease-in-out'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'steps(3, start), ease-in-out'");

debug("Invalid animation-timing-function values.");
style.animationName = "";
style.animationTimingFunction = "";

style.animationTimingFunction = "cubic-bezier(3, 0.1, 4, 1)";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "cubic-bezier(1, 0.1, 3, 1)";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "cubic-bezier(0.1, 0, 4, 0.4)";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "cubic-bezier(3, 0, 4, 0.4)";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "cubic-bezier(3, 0, 0.2, 0.4)";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "cubic-bezier(-0.2, 0, 0.2, 0.4)";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "cubic-bezier(0.2, 2, -0.2, 0.4)";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "steps(5, 3)";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "steps(-5, start)";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "steps(5, start, end)";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "step(5)";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "red";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25)";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1, 2)";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "cubic-foo(0.25, 0.1, 0.25, 1)";
shouldBe("style.animationTimingFunction", "''");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "''");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "step-middle";
shouldBe("style.animationTimingFunction", "'step-middle'");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "'step-middle'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

style.animationTimingFunction = "steps(5, middle)";
shouldBe("style.animationTimingFunction", "'steps(5, middle)'");
shouldBe("computedStyle.animationTimingFunction", "'ease'");
shouldBe("style.webkitAnimationTimingFunction", "'steps(5, middle)'");
shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'");

debug("Valid animation-delay values.");
// Initial test.
shouldBe("computedStyle.animationDelay", "'0s'");
shouldBe("computedStyle.webkitAnimationDelay", "'0s'");

style.animationDelay = "0s";
shouldNotBe("Object.keys(style).indexOf('animationDelay')", "-1");
shouldBe("Object.keys(style).indexOf('webkitAnimationDelay')", "-1");
shouldBe("style.animationDelay", "'0s'");
shouldBe("computedStyle.animationDelay", "'0s'");
shouldBe("style.webkitAnimationDelay", "'0s'");
shouldBe("computedStyle.webkitAnimationDelay", "'0s'");

style.animationDelay = "5s";
shouldBe("style.animationDelay", "'5s'");
shouldBe("computedStyle.animationDelay", "'5s'");
shouldBe("style.webkitAnimationDelay", "'5s'");
shouldBe("computedStyle.webkitAnimationDelay", "'5s'");

style.animationDelay = "10ms";
shouldBe("style.animationDelay", "'10ms'");
shouldBe("computedStyle.animationDelay", "'0.01s'");
shouldBe("style.webkitAnimationDelay", "'10ms'");
shouldBe("computedStyle.webkitAnimationDelay", "'0.01s'");

style.animationDelay = "-10ms";
shouldBe("style.animationDelay", "'-10ms'");
shouldBe("computedStyle.animationDelay", "'-0.01s'");
shouldBe("style.webkitAnimationDelay", "'-10ms'");
shouldBe("computedStyle.webkitAnimationDelay", "'-0.01s'");

style.transitionProperty = "opacity, width";

style.animationDelay = "-10ms, 20s";
shouldBe("style.animationDelay", "'-10ms, 20s'");
shouldBe("computedStyle.animationDelay", "'-0.01s, 20s'");
shouldBe("style.webkitAnimationDelay", "'-10ms, 20s'");
shouldBe("computedStyle.webkitAnimationDelay", "'-0.01s, 20s'");

debug("Invalid animation-delay values.");
style.transitionProperty = "opacity";
style.animationDelay = "";

style.animationDelay = "'5ms'";
shouldBe("style.animationDelay", "''");
shouldBe("computedStyle.animationDelay", "'0s'");
shouldBe("style.webkitAnimationDelay", "''");
shouldBe("computedStyle.webkitAnimationDelay", "'0s'");

style.animationDelay = "30px";
shouldBe("style.animationDelay", "''");
shouldBe("computedStyle.animationDelay", "'0s'");
shouldBe("style.webkitAnimationDelay", "''");
shouldBe("computedStyle.webkitAnimationDelay", "'0s'");

style.animationDelay = "solid";
shouldBe("style.animationDelay", "''");
shouldBe("computedStyle.animationDelay", "'0s'");
shouldBe("style.webkitAnimationDelay", "''");
shouldBe("computedStyle.webkitAnimationDelay", "'0s'");

style.animationDelay = "20";
shouldBe("style.animationDelay", "''");
shouldBe("computedStyle.animationDelay", "'0s'");
shouldBe("style.webkitAnimationDelay", "''");
shouldBe("computedStyle.webkitAnimationDelay", "'0s'");

style.animationDelay = "20%";
shouldBe("style.animationDelay", "''");
shouldBe("computedStyle.animationDelay", "'0s'");
shouldBe("style.webkitAnimationDelay", "''");
shouldBe("computedStyle.webkitAnimationDelay", "'0s'");

style.animationDelay = "0s, 20px";
shouldBe("style.animationDelay", "''");
shouldBe("computedStyle.animationDelay", "'0s'");
shouldBe("style.webkitAnimationDelay", "''");
shouldBe("computedStyle.webkitAnimationDelay", "'0s'");

debug("Valid animation-iteration-count values.");
// Initial test.
shouldBe("computedStyle.animationIterationCount", "'1'");
shouldBe("computedStyle.webkitAnimationIterationCount", "'1'");

style.animationIterationCount = "4";
shouldNotBe("Object.keys(style).indexOf('animationIterationCount')", "-1");
shouldBe("Object.keys(style).indexOf('webkitAnimationIterationCount')", "-1");
shouldBe("style.animationIterationCount", "'4'");
shouldBe("computedStyle.animationIterationCount", "'4'");
shouldBe("style.webkitAnimationIterationCount", "'4'");
shouldBe("computedStyle.webkitAnimationIterationCount", "'4'");

style.animationIterationCount = "2.5";
shouldBe("style.animationIterationCount", "'2.5'");
shouldBe("computedStyle.animationIterationCount", "'2.5'");
shouldBe("style.webkitAnimationIterationCount", "'2.5'");
shouldBe("computedStyle.webkitAnimationIterationCount", "'2.5'");

style.animationIterationCount = "infinite";
shouldBe("style.animationIterationCount", "'infinite'");
shouldBe("computedStyle.animationIterationCount", "'infinite'");
shouldBe("style.webkitAnimationIterationCount", "'infinite'");
shouldBe("computedStyle.webkitAnimationIterationCount", "'infinite'");

style.animationIterationCount = "infinite, 3";
shouldBe("style.animationIterationCount", "'infinite, 3'");
shouldBe("computedStyle.animationIterationCount", "'infinite, 3'");
shouldBe("style.webkitAnimationIterationCount", "'infinite, 3'");
shouldBe("computedStyle.webkitAnimationIterationCount", "'infinite, 3'");

style.animationIterationCount = "0";
shouldBe("style.animationIterationCount", "'0'");
shouldBe("computedStyle.animationIterationCount", "'0'");
shouldBe("style.webkitAnimationIterationCount", "'0'");
shouldBe("computedStyle.webkitAnimationIterationCount", "'0'");

style.animationIterationCount = "infinite, infinite";
shouldBe("style.animationIterationCount", "'infinite, infinite'");
shouldBe("computedStyle.animationIterationCount", "'infinite, infinite'");
shouldBe("style.webkitAnimationIterationCount", "'infinite, infinite'");
shouldBe("computedStyle.webkitAnimationIterationCount", "'infinite, infinite'");

debug("Invalid animation-iteration-count values.");
style.animationIterationCount = "";

style.animationIterationCount = "none";
shouldBe("style.animationIterationCount", "''");
shouldBe("computedStyle.animationIterationCount", "'1'");
shouldBe("style.webkitAnimationIterationCount", "''");
shouldBe("computedStyle.webkitAnimationIterationCount", "'1'");

style.animationIterationCount = "-3";
shouldBe("style.animationIterationCount", "''");
shouldBe("computedStyle.animationIterationCount", "'1'");
shouldBe("style.webkitAnimationIterationCount", "''");
shouldBe("computedStyle.webkitAnimationIterationCount", "'1'");

style.animationIterationCount = "infinite, -3";
shouldBe("style.animationIterationCount", "''");
shouldBe("computedStyle.animationIterationCount", "'1'");
shouldBe("style.webkitAnimationIterationCount", "''");
shouldBe("computedStyle.webkitAnimationIterationCount", "'1'");

style.animationIterationCount = "solid";
shouldBe("style.animationIterationCount", "''");
shouldBe("computedStyle.animationIterationCount", "'1'");
shouldBe("style.webkitAnimationIterationCount", "''");
shouldBe("computedStyle.webkitAnimationIterationCount", "'1'");

style.animationIterationCount = "-1, infinite";
shouldBe("style.animationIterationCount", "''");
shouldBe("computedStyle.animationIterationCount", "'1'");
shouldBe("style.webkitAnimationIterationCount", "''");
shouldBe("computedStyle.webkitAnimationIterationCount", "'1'");

style.animationIterationCount = "-1, 3";
shouldBe("style.animationIterationCount", "''");
shouldBe("computedStyle.animationIterationCount", "'1'");
shouldBe("style.webkitAnimationIterationCount", "''");
shouldBe("computedStyle.webkitAnimationIterationCount", "'1'");

debug("Valid animation-direction values.");
// Initial test.
shouldBe("computedStyle.animationDirection", "'normal'");
shouldBe("computedStyle.webkitAnimationDirection", "'normal'");

style.animationDirection = "reverse";
shouldNotBe("Object.keys(style).indexOf('animationDirection')", "-1");
shouldBe("Object.keys(style).indexOf('webkitAnimationDirection')", "-1");
shouldBe("style.animationDirection", "'reverse'");
shouldBe("computedStyle.animationDirection", "'reverse'");
shouldBe("style.webkitAnimationDirection", "'reverse'");
shouldBe("computedStyle.webkitAnimationDirection", "'reverse'");

style.animationDirection = "normal";
shouldBe("style.animationDirection", "'normal'");
shouldBe("computedStyle.animationDirection", "'normal'");
shouldBe("style.webkitAnimationDirection", "'normal'");
shouldBe("computedStyle.webkitAnimationDirection", "'normal'");

style.animationDirection = "normal, alternate";
shouldBe("style.animationDirection", "'normal, alternate'");
shouldBe("computedStyle.animationDirection", "'normal, alternate'");
shouldBe("style.webkitAnimationDirection", "'normal, alternate'");
shouldBe("computedStyle.webkitAnimationDirection", "'normal, alternate'");

style.animationDirection = "alternate";
shouldBe("style.animationDirection", "'alternate'");
shouldBe("computedStyle.animationDirection", "'alternate'");
shouldBe("style.webkitAnimationDirection", "'alternate'");
shouldBe("computedStyle.webkitAnimationDirection", "'alternate'");

style.animationDirection = "alternate-reverse";
shouldBe("style.animationDirection", "'alternate-reverse'");
shouldBe("computedStyle.animationDirection", "'alternate-reverse'");
shouldBe("style.webkitAnimationDirection", "'alternate-reverse'");
shouldBe("computedStyle.webkitAnimationDirection", "'alternate-reverse'");

debug("Invalid animation-direction values.");
style.animationDirection = "";

style.animationDirection = "solid";
shouldBe("style.animationDirection", "''");
shouldBe("computedStyle.animationDirection", "'normal'");
shouldBe("style.webkitAnimationDirection", "''");
shouldBe("computedStyle.webkitAnimationDirection", "'normal'");

style.animationDirection = "0";
shouldBe("style.animationDirection", "''");
shouldBe("computedStyle.animationDirection", "'normal'");
shouldBe("style.webkitAnimationDirection", "''");
shouldBe("computedStyle.webkitAnimationDirection", "'normal'");

style.animationDirection = "3px";
shouldBe("style.animationDirection", "''");
shouldBe("computedStyle.animationDirection", "'normal'");
shouldBe("style.webkitAnimationDirection", "''");
shouldBe("computedStyle.webkitAnimationDirection", "'normal'");

style.animationDirection = "alternate-normal";
shouldBe("style.animationDirection", "''");
shouldBe("computedStyle.animationDirection", "'normal'");
shouldBe("style.webkitAnimationDirection", "''");
shouldBe("computedStyle.webkitAnimationDirection", "'normal'");

style.animationDirection = "3.5";
shouldBe("style.animationDirection", "''");
shouldBe("computedStyle.animationDirection", "'normal'");
shouldBe("style.webkitAnimationDirection", "''");
shouldBe("computedStyle.webkitAnimationDirection", "'normal'");

style.animationDirection = "3.5, reverse";
shouldBe("style.animationDirection", "''");
shouldBe("computedStyle.animationDirection", "'normal'");
shouldBe("style.webkitAnimationDirection", "''");
shouldBe("computedStyle.webkitAnimationDirection", "'normal'");

style.animationDirection = "reverse, solid";
shouldBe("style.animationDirection", "''");
shouldBe("computedStyle.animationDirection", "'normal'");
shouldBe("style.webkitAnimationDirection", "''");
shouldBe("computedStyle.webkitAnimationDirection", "'normal'");

debug("Valid animation-play-state values.");
// Initial test.
shouldBe("computedStyle.animationPlayState", "'running'");
shouldBe("computedStyle.webkitAnimationPlayState", "'running'");

style.animationPlayState = "paused";
shouldNotBe("Object.keys(style).indexOf('animationPlayState')", "-1");
shouldBe("Object.keys(style).indexOf('webkitAnimationPlayState')", "-1");
shouldBe("style.animationPlayState", "'paused'");
shouldBe("computedStyle.animationPlayState", "'paused'");
shouldBe("style.webkitAnimationPlayState", "'paused'");
shouldBe("computedStyle.webkitAnimationPlayState", "'paused'");

style.animationPlayState = "running";
shouldBe("style.animationPlayState", "'running'");
shouldBe("computedStyle.animationPlayState", "'running'");
shouldBe("style.webkitAnimationPlayState", "'running'");
shouldBe("computedStyle.webkitAnimationPlayState", "'running'");

style.animationPlayState = "running, running";
shouldBe("style.animationPlayState", "'running, running'");
shouldBe("computedStyle.animationPlayState", "'running, running'");
shouldBe("style.webkitAnimationPlayState", "'running, running'");
shouldBe("computedStyle.webkitAnimationPlayState", "'running, running'");

style.animationPlayState = "paused, paused";
shouldBe("style.animationPlayState", "'paused, paused'");
shouldBe("computedStyle.animationPlayState", "'paused, paused'");
shouldBe("style.webkitAnimationPlayState", "'paused, paused'");
shouldBe("computedStyle.webkitAnimationPlayState", "'paused, paused'");

style.animationPlayState = "paused, running";
shouldBe("style.animationPlayState", "'paused, running'");
shouldBe("computedStyle.animationPlayState", "'paused, running'");
shouldBe("style.webkitAnimationPlayState", "'paused, running'");
shouldBe("computedStyle.webkitAnimationPlayState", "'paused, running'");

debug("Invalid animation-play-state values.");
style.animationPlayState = "";

style.animationPlayState = "running3";
shouldBe("style.animationPlayState", "''");
shouldBe("computedStyle.animationPlayState", "'running'");
shouldBe("style.webkitAnimationPlayState", "''");
shouldBe("computedStyle.webkitAnimationPlayState", "'running'");

style.animationPlayState = "0";
shouldBe("style.animationPlayState", "''");
shouldBe("computedStyle.animationPlayState", "'running'");
shouldBe("style.webkitAnimationPlayState", "''");
shouldBe("computedStyle.webkitAnimationPlayState", "'running'");

style.animationPlayState = "solid";
shouldBe("style.animationPlayState", "''");
shouldBe("computedStyle.animationPlayState", "'running'");
shouldBe("style.webkitAnimationPlayState", "''");
shouldBe("computedStyle.webkitAnimationPlayState", "'running'");

style.animationPlayState = "20px";
shouldBe("style.animationPlayState", "''");
shouldBe("computedStyle.animationPlayState", "'running'");
shouldBe("style.webkitAnimationPlayState", "''");
shouldBe("computedStyle.webkitAnimationPlayState", "'running'");

style.animationPlayState = "all";
shouldBe("style.animationPlayState", "''");
shouldBe("computedStyle.animationPlayState", "'running'");
shouldBe("style.webkitAnimationPlayState", "''");
shouldBe("computedStyle.webkitAnimationPlayState", "'running'");

style.animationPlayState = "running, test";
shouldBe("style.animationPlayState", "''");
shouldBe("computedStyle.animationPlayState", "'running'");
shouldBe("style.webkitAnimationPlayState", "''");
shouldBe("computedStyle.webkitAnimationPlayState", "'running'");

style.animationPlayState = "all, paused";
shouldBe("style.animationPlayState", "''");
shouldBe("computedStyle.animationPlayState", "'running'");
shouldBe("style.webkitAnimationPlayState", "''");
shouldBe("computedStyle.webkitAnimationPlayState", "'running'");

debug("Valid animation-fill-mode values.");
// Initial test.
shouldBe("computedStyle.animationFillMode", "'none'");
shouldBe("computedStyle.webkitAnimationFillMode", "'none'");

style.animationFillMode = "forwards";
shouldNotBe("Object.keys(style).indexOf('animationFillMode')", "-1");
shouldBe("Object.keys(style).indexOf('webkitAnimationFillMode')", "-1");
shouldBe("style.animationFillMode", "'forwards'");
shouldBe("computedStyle.animationFillMode", "'forwards'");
shouldBe("style.webkitAnimationFillMode", "'forwards'");
shouldBe("computedStyle.webkitAnimationFillMode", "'forwards'");

style.animationFillMode = "backwards";
shouldBe("style.animationFillMode", "'backwards'");
shouldBe("computedStyle.animationFillMode", "'backwards'");
shouldBe("style.webkitAnimationFillMode", "'backwards'");
shouldBe("computedStyle.webkitAnimationFillMode", "'backwards'");

style.animationFillMode = "both";
shouldBe("style.animationFillMode", "'both'");
shouldBe("computedStyle.animationFillMode", "'both'");
shouldBe("style.webkitAnimationFillMode", "'both'");
shouldBe("computedStyle.webkitAnimationFillMode", "'both'");

style.animationFillMode = "none";
shouldBe("style.animationFillMode", "'none'");
shouldBe("computedStyle.animationFillMode", "'none'");
shouldBe("style.webkitAnimationFillMode", "'none'");
shouldBe("computedStyle.webkitAnimationFillMode", "'none'");

style.animationFillMode = "none, both";
shouldBe("style.animationFillMode", "'none, both'");
shouldBe("computedStyle.animationFillMode", "'none, both'");
shouldBe("style.webkitAnimationFillMode", "'none, both'");
shouldBe("computedStyle.webkitAnimationFillMode", "'none, both'");

style.animationFillMode = "backwards, forwards";
shouldBe("style.animationFillMode", "'backwards, forwards'");
shouldBe("computedStyle.animationFillMode", "'backwards, forwards'");
shouldBe("style.webkitAnimationFillMode", "'backwards, forwards'");
shouldBe("computedStyle.webkitAnimationFillMode", "'backwards, forwards'");

debug("Invalid animation-fill-mode values.");
style.animationFillMode = "";

style.animationFillMode = "foo";
shouldBe("style.animationFillMode", "''");
shouldBe("computedStyle.animationFillMode", "'none'");
shouldBe("style.webkitAnimationFillMode", "''");
shouldBe("computedStyle.webkitAnimationFillMode", "'none'");

style.animationFillMode = "0";
shouldBe("style.animationFillMode", "''");
shouldBe("computedStyle.animationFillMode", "'none'");
shouldBe("style.webkitAnimationFillMode", "''");
shouldBe("computedStyle.webkitAnimationFillMode", "'none'");

style.animationFillMode = "-";
shouldBe("style.animationFillMode", "''");
shouldBe("computedStyle.animationFillMode", "'none'");
shouldBe("style.webkitAnimationFillMode", "''");
shouldBe("computedStyle.webkitAnimationFillMode", "'none'");

style.animationFillMode = "3px";
shouldBe("style.animationFillMode", "''");
shouldBe("computedStyle.animationFillMode", "'none'");
shouldBe("style.webkitAnimationFillMode", "''");
shouldBe("computedStyle.webkitAnimationFillMode", "'none'");

style.animationFillMode = "backwards, test";
shouldBe("style.animationFillMode", "''");
shouldBe("computedStyle.animationFillMode", "'none'");
shouldBe("style.webkitAnimationFillMode", "''");
shouldBe("computedStyle.webkitAnimationFillMode", "'none'");

style.animationFillMode = "test, all";
shouldBe("style.animationFillMode", "''");
shouldBe("computedStyle.animationFillMode", "'none'");
shouldBe("style.webkitAnimationFillMode", "''");
shouldBe("computedStyle.webkitAnimationFillMode", "'none'");

style.animationFillMode = "test, none";
shouldBe("style.animationFillMode", "''");
shouldBe("computedStyle.animationFillMode", "'none'");
shouldBe("style.webkitAnimationFillMode", "''");
shouldBe("computedStyle.webkitAnimationFillMode", "'none'");

style.animationFillMode = "forwards,";
shouldBe("style.animationFillMode", "''");

debug("Valid animation shorthand values.");
style.animation = "";
// Initial test.
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");

style.animation = "myShorthandAnim";
shouldNotBe("Object.keys(style).indexOf('animation')", "-1");
shouldBe("Object.keys(style).indexOf('webkitAnimation')", "-1");
shouldBe("style.animation", "'myShorthandAnim'");
shouldBe("computedStyle.animation", "'myShorthandAnim 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 0s ease 0s 1 normal none running'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "none";
shouldNotBe("Object.keys(style).indexOf('animation')", "-1");
shouldBe("Object.keys(style).indexOf('webkitAnimation')", "-1");
shouldBe("style.animation", "'none'");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "'none'");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "none 20s";
shouldBe("style.animation", "'20s none'");
shouldBe("computedStyle.animation", "'none 20s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "'20s none'");
shouldBe("computedStyle.webkitAnimation", "'none 20s ease 0s 1 normal none running'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim none 20s";
shouldBe("style.animation", "'myShorthandAnim 20s none'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s none'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease 0s 1 normal none running'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim ease-in none 20s";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in none'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in none'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 0s 1 normal none running'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim ease-in 20s";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 0s 1 normal none running'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim ease-in 20s 10s";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 1 normal none running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 1 normal none running'");
// Let's double check here the delay and duration. As stated in the spec the first value parsed
// is assigned to the duration.
shouldBe("computedStyle.animationDuration", "'20s'");
shouldBe("computedStyle.webkitAnimationDuration", "'20s'");
shouldBe("computedStyle.animationDelay", "'10s'");
shouldBe("computedStyle.webkitAnimationDelay", "'10s'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim 20s ease-in 10s";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 1 normal none running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 1 normal none running'");
shouldBe("computedStyle.animationDuration", "'20s'");
shouldBe("computedStyle.webkitAnimationDuration", "'20s'");
shouldBe("computedStyle.animationDelay", "'10s'");
shouldBe("computedStyle.webkitAnimationDelay", "'10s'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim paused 20s ease-in 10s";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s paused'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 1 normal none paused'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s paused'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 1 normal none paused'");
shouldBe("computedStyle.animationDuration", "'20s'");
shouldBe("computedStyle.webkitAnimationDuration", "'20s'");
shouldBe("computedStyle.animationDelay", "'10s'");
shouldBe("computedStyle.webkitAnimationDelay", "'10s'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim ease-in both 20s 5";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in 5 both'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 0s 5 normal both running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 5 both'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 0s 5 normal both running'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim ease-in 20s 5 backwards";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in 5 backwards'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 0s 5 normal backwards running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 5 backwards'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 0s 5 normal backwards running'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim forwards 20s 5";
shouldBe("style.animation", "'myShorthandAnim 20s 5 forwards'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease 0s 5 normal forwards running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s 5 forwards'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease 0s 5 normal forwards running'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim ease-in 20s 5";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in 5'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 0s 5 normal none running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 5'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 0s 5 normal none running'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim reverse ease-in 20s 5";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in 5 reverse'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 0s 5 reverse none running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 5 reverse'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 0s 5 reverse none running'");
shouldBe("checkAnimationShorthandValue()", "true");

// FIXME : https://code.google.com/p/chromium/issues/detail?id=273092
/*style.animation = "ease-in ease-out 5s";
shouldBe("style.animation", "'ease-in ease-out 5s'");
shouldBe("computedStyle.animation", "'ease-in 0s ease-out 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "'ease-in ease-out 5s'");
shouldBe("computedStyle.webkitAnimation", "'ease-in 0s ease-out 0s 1 normal none running'");
shouldBe("computedStyle.animationName", "'ease-in'");*/

style.animation = "myShorthandAnim reverse ease-in backwards 20s 5 paused";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in 5 reverse backwards paused'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 0s 5 reverse backwards paused'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 5 reverse backwards paused'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 0s 5 reverse backwards paused'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim ease-in 20s 10s, width cubic-bezier(0.32, 0, 1, 1) 10s 20s";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 1 normal none running, width 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 1 normal none running, width 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running'");
// Let's double check here the delay and duration. As stated in the spec the first value parsed
// is assigned to the duration.
shouldBe("computedStyle.animationDuration", "'20s, 10s'");
shouldBe("computedStyle.webkitAnimationDuration", "'20s, 10s'");
shouldBe("computedStyle.animationDelay", "'10s, 20s'");
shouldBe("computedStyle.webkitAnimationDelay", "'10s, 20s'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim ease-in 20s 10s paused, width cubic-bezier(0.32, 0, 1, 1) 10s 20s";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s paused, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 1 normal none paused, width 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s paused, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 1 normal none paused, width 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running'");
// Let's double check here the delay and duration. As stated in the spec the first value parsed
// is assigned to the duration.
shouldBe("computedStyle.animationDuration", "'20s, 10s'");
shouldBe("computedStyle.webkitAnimationDuration", "'20s, 10s'");
shouldBe("computedStyle.animationDelay", "'10s, 20s'");
shouldBe("computedStyle.webkitAnimationDelay", "'10s, 20s'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim reverse ease-in 20s 10s paused, test cubic-bezier(0.32, 0, 1, 1) 10s 20s both";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s reverse paused, test 10s cubic-bezier(0.32, 0, 1, 1) 20s both'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 1 reverse none paused, test 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal both running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s reverse paused, test 10s cubic-bezier(0.32, 0, 1, 1) 20s both'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 1 reverse none paused, test 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal both running'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "none, none";
shouldBe("style.animation", "'none, none'");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running, none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "'none, none'");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running, none 0s ease 0s 1 normal none running'");

style.animation = "ease-in test 20s 10s, none";
shouldBe("style.animation", "'test 20s ease-in 10s, none'");
shouldBe("computedStyle.animation", "'test 20s ease-in 10s 1 normal none running, none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "'test 20s ease-in 10s, none'");
shouldBe("computedStyle.webkitAnimation", "'test 20s ease-in 10s 1 normal none running, none 0s ease 0s 1 normal none running'");
shouldBe("computedStyle.animationName", "'test, none'");

style.animation = "none, ease-in test 20s 10s";
shouldBe("style.animation", "'none, test 20s ease-in 10s'");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running, test 20s ease-in 10s 1 normal none running'");
shouldBe("style.webkitAnimation", "'none, test 20s ease-in 10s'");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running, test 20s ease-in 10s 1 normal none running'");
shouldBe("computedStyle.animationName", "'none, test'");

style.animation = "myShorthandAnim both 20s 10s ease-in paused, myShorthandAnim ease-out 20s";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s both paused, myShorthandAnim 20s ease-out'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 1 normal both paused, myShorthandAnim 20s ease-out 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s both paused, myShorthandAnim 20s ease-out'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 1 normal both paused, myShorthandAnim 20s ease-out 0s 1 normal none running'");

style.animation = "myShorthandAnim ease-in 4 20s 10s backwards, myShorthandAnim2 50 ease-out 20s";
shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s 4 backwards, myShorthandAnim2 20s ease-out 50'");
shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 4 normal backwards running, myShorthandAnim2 20s ease-out 0s 50 normal none running'");
shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 4 backwards, myShorthandAnim2 20s ease-out 50'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 4 normal backwards running, myShorthandAnim2 20s ease-out 0s 50 normal none running'");
shouldBe("checkAnimationShorthandValue()", "true");

style.animation = "myShorthandAnim2 reverse ease-out 20s, ease-in myShorthandAnim 20s 10s paused";
shouldBe("style.animation", "'myShorthandAnim2 20s ease-out reverse, myShorthandAnim 20s ease-in 10s paused'");
shouldBe("computedStyle.animation", "'myShorthandAnim2 20s ease-out 0s 1 reverse none running, myShorthandAnim 20s ease-in 10s 1 normal none paused'");
shouldBe("style.webkitAnimation", "'myShorthandAnim2 20s ease-out reverse, myShorthandAnim 20s ease-in 10s paused'");
shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim2 20s ease-out 0s 1 reverse none running, myShorthandAnim 20s ease-in 10s 1 normal none paused'");
shouldBe("checkAnimationShorthandValue()", "true");

debug("Invalid animation shorthand values.");
style.animation = "";

style.animation = "solid red";
shouldBe("style.animation", "''");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "''");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");

style.animation = "all 30s width ease-in";
shouldBe("style.animation", "''");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "''");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");

style.animation = "animName 30s ease-in 20s, 20px";
shouldBe("style.animation", "''");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "''");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");

style.animation = "test 30s ease-in 20s, step-start(2)";
shouldBe("style.animation", "''");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "''");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");

style.animation = "ease-in opacity 20s 10s myAnim, none";
shouldBe("style.animation", "''");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "''");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");

style.animation = "none, ease-in opacity 20s 10s myAnim";
shouldBe("style.animation", "''");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "''");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");

style.animation = ",";
shouldBe("style.animation", "''");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "''");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");

style.animation = "running,";
shouldBe("style.animation", "''");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "''");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");

style.animation = ", alternate";
shouldBe("style.animation", "''");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "''");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");

style.animation = ", commas,";
shouldBe("style.animation", "''");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "''");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");

style.animation = "test,, 5s";
shouldBe("style.animation", "''");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "''");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");

// FIXME : https://code.google.com/p/chromium/issues/detail?id=273092
/*style.animation = "ease-in ease-otu 5s";
shouldBe("style.animation", "''");
shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'");
shouldBe("style.webkitAnimation", "''");
shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");*/

document.body.removeChild(testContainer);
</script>
</body>
</html>