blob: eb127d5de448361d99f99a24b64123e450603427 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../fast/js/resources/js-test-pre.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");
shouldNotBe("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'");
shouldBe("style.webkitAnimationName", "'none, none'");
shouldBe("computedStyle.webkitAnimationName", "'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");
shouldNotBe("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");
shouldNotBe("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'");
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");
shouldNotBe("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");
shouldNotBe("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");
shouldNotBe("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");
shouldNotBe("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");
shouldNotBe("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'");
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");
shouldNotBe("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");
shouldNotBe("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'");
// 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>
<script src="../fast/js/resources/js-test-post.js"></script>
</body>
</html>