<!DOCTYPE html><!-- webkit-test-runner [ experimental:WebAnimationsCSSIntegrationEnabled=false ] -->
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<script>
description("Test the parsing and the computed style values of the transitions 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.transition and verifies WebKit can parse it.
function checkTransitionShorthandValue() {
    var before = computedStyle.getPropertyValue('transition');
    e.style.transition = '';
    e.style.transition = before;
    return (computedStyle.getPropertyValue('transition') == before);
}

debug("Valid transition-property values.");
// Initial test.
shouldBe("computedStyle.transitionProperty", "'all'");
shouldBe("computedStyle.webkitTransitionProperty", "'all'");

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

style.transitionProperty = "all";
shouldBe("style.transitionProperty", "'all'");
shouldBe("computedStyle.transitionProperty", "'all'");
shouldBe("style.webkitTransitionProperty", "'all'");
shouldBe("computedStyle.webkitTransitionProperty", "'all'");

style.transitionProperty = "all, all";
shouldBe("style.transitionProperty", "'all, all'");
shouldBe("computedStyle.transitionProperty", "'all'");
shouldBe("style.webkitTransitionProperty", "'all, all'");
shouldBe("computedStyle.webkitTransitionProperty", "'all'");

style.transitionProperty = "background-position";
shouldBe("style.transitionProperty", "'background-position'");
shouldBe("computedStyle.transitionProperty", "'background-position'");
shouldBe("style.webkitTransitionProperty", "'background-position'");
shouldBe("computedStyle.webkitTransitionProperty", "'background-position'");

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

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

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

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

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

debug("Invalid transition-property values.");
style.transitionProperty = "";

style.transitionProperty = "solid, font-size";
shouldBe("style.transitionProperty", "'solid, font-size'");
shouldBe("computedStyle.transitionProperty", "'solid, font-size'");
shouldBe("style.webkitTransitionProperty", "'solid, font-size'");
shouldBe("computedStyle.webkitTransitionProperty", "'solid, font-size'");

style.transitionProperty = "solid, left";
shouldBe("style.transitionProperty", "'solid, left'");
shouldBe("computedStyle.transitionProperty", "'solid, left'");
shouldBe("style.webkitTransitionProperty", "'solid, left'");
shouldBe("computedStyle.webkitTransitionProperty", "'solid, left'");

style.transitionProperty = "solid";
shouldBe("style.transitionProperty", "'solid'");
shouldBe("computedStyle.transitionProperty", "'solid'");
shouldBe("style.webkitTransitionProperty", "'solid'");
shouldBe("computedStyle.webkitTransitionProperty", "'solid'");

style.transitionProperty = '';

style.transitionProperty = "20px";
shouldBe("style.transitionProperty", "''");
shouldBe("computedStyle.transitionProperty", "'all'");
shouldBe("style.webkitTransitionProperty", "''");
shouldBe("computedStyle.webkitTransitionProperty", "'all'");

style.transitionProperty = "0";
shouldBe("style.transitionProperty", "''");
shouldBe("computedStyle.transitionProperty", "'all'");
shouldBe("style.webkitTransitionProperty", "''");
shouldBe("computedStyle.webkitTransitionProperty", "'all'");

style.transitionProperty = "'font-size'";
shouldBe("style.transitionProperty", "''");
shouldBe("computedStyle.transitionProperty", "'all'");
shouldBe("style.webkitTransitionProperty", "''");
shouldBe("computedStyle.webkitTransitionProperty", "'all'");

style.transitionProperty = "all none";
shouldBe("style.transitionProperty", "''");
shouldBe("computedStyle.transitionProperty", "'all'");
shouldBe("style.webkitTransitionProperty", "''");
shouldBe("computedStyle.webkitTransitionProperty", "'all'");

style.transitionProperty = "opacity width";
shouldBe("style.transitionProperty", "''");
shouldBe("computedStyle.transitionProperty", "'all'");
shouldBe("style.webkitTransitionProperty", "''");
shouldBe("computedStyle.webkitTransitionProperty", "'all'");

style.transitionProperty = "all, none";
shouldBe("style.transitionProperty", "''");
shouldBe("computedStyle.transitionProperty", "'all'");
shouldBe("style.webkitTransitionProperty", "''");
shouldBe("computedStyle.webkitTransitionProperty", "'all'");

style.transitionProperty = "none, none";
shouldBe("style.transitionProperty", "''");
shouldBe("computedStyle.transitionProperty", "'all'");
shouldBe("style.webkitTransitionProperty", "''");
shouldBe("computedStyle.webkitTransitionProperty", "'all'");

style.transitionProperty = "none, all";
shouldBe("style.transitionProperty", "''");
shouldBe("computedStyle.transitionProperty", "'all'");
shouldBe("style.webkitTransitionProperty", "''");
shouldBe("computedStyle.webkitTransitionProperty", "'all'");

style.transitionProperty = "width, none";
shouldBe("style.transitionProperty", "''");
shouldBe("computedStyle.transitionProperty", "'all'");
shouldBe("style.webkitTransitionProperty", "''");
shouldBe("computedStyle.webkitTransitionProperty", "'all'");

style.transitionProperty = "none, width";
shouldBe("style.transitionProperty", "''");
shouldBe("computedStyle.transitionProperty", "'all'");
shouldBe("style.webkitTransitionProperty", "''");
shouldBe("computedStyle.webkitTransitionProperty", "'all'");

style.transitionProperty = "";

debug("Valid transition-duration values.");
// Initial test.
shouldBe("computedStyle.transitionDuration", "'0s'");
shouldBe("computedStyle.webkitTransitionDuration", "'0s'");

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

style.transitionDuration = "5s";
shouldBe("style.transitionDuration", "'5s'");
shouldBe("computedStyle.transitionDuration", "'5s'");
shouldBe("style.webkitTransitionDuration", "'5s'");
shouldBe("computedStyle.webkitTransitionDuration", "'5s'");

style.transitionDuration = "10ms";
shouldBe("style.transitionDuration", "'10ms'");
shouldBe("computedStyle.transitionDuration", "'0.01s'");
shouldBe("style.webkitTransitionDuration", "'10ms'");
shouldBe("computedStyle.webkitTransitionDuration", "'0.01s'");

style.transitionProperty = "opacity, width";

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

debug("Invalid transition-duration values.");
style.transitionProperty = "opacity";
style.transitionDuration = "";

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

style.transitionDuration = "'5ms'";
shouldBe("style.transitionDuration", "''");
shouldBe("computedStyle.transitionDuration", "'0s'");
shouldBe("style.webkitTransitionDuration", "''");
shouldBe("computedStyle.webkitTransitionDuration", "'0s'");

style.transitionDuration = "30px";
shouldBe("style.transitionDuration", "''");
shouldBe("computedStyle.transitionDuration", "'0s'");
shouldBe("style.webkitTransitionDuration", "''");
shouldBe("computedStyle.webkitTransitionDuration", "'0s'");

style.transitionDuration = "solid";
shouldBe("style.transitionDuration", "''");
shouldBe("computedStyle.transitionDuration", "'0s'");
shouldBe("style.webkitTransitionDuration", "''");
shouldBe("computedStyle.webkitTransitionDuration", "'0s'");

style.transitionDuration = "20";
shouldBe("style.transitionDuration", "''");
shouldBe("computedStyle.transitionDuration", "'0s'");
shouldBe("style.webkitTransitionDuration", "''");
shouldBe("computedStyle.webkitTransitionDuration", "'0s'");

style.transitionDuration = "20%";
shouldBe("style.transitionDuration", "''");
shouldBe("computedStyle.transitionDuration", "'0s'");
shouldBe("style.webkitTransitionDuration", "''");
shouldBe("computedStyle.webkitTransitionDuration", "'0s'");

style.transitionDuration = "0s, 20px";
shouldBe("style.transitionDuration", "''");
shouldBe("computedStyle.transitionDuration", "'0s'");
shouldBe("style.webkitTransitionDuration", "''");
shouldBe("computedStyle.webkitTransitionDuration", "'0s'");

debug("Valid transition-timing-function values.");
// Initial test.
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");

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

style.transitionTimingFunction = "ease";
shouldBe("style.transitionTimingFunction", "'ease'");
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
shouldBe("style.webkitTransitionTimingFunction", "'ease'");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");

style.transitionTimingFunction = "ease-in";
shouldBe("style.transitionTimingFunction", "'ease-in'");
shouldBe("computedStyle.transitionTimingFunction", "'ease-in'");
shouldBe("style.webkitTransitionTimingFunction", "'ease-in'");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in'");

style.transitionTimingFunction = "ease-out";
shouldBe("style.transitionTimingFunction", "'ease-out'");
shouldBe("computedStyle.transitionTimingFunction", "'ease-out'");
shouldBe("style.webkitTransitionTimingFunction", "'ease-out'");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-out'");

style.transitionTimingFunction = "ease-in-out";
shouldBe("style.transitionTimingFunction", "'ease-in-out'");
shouldBe("computedStyle.transitionTimingFunction", "'ease-in-out'");
shouldBe("style.webkitTransitionTimingFunction", "'ease-in-out'");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in-out'");

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

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

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

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

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

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

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

style.transitionTimingFunction = "step-start";
shouldBe("style.transitionTimingFunction", "'step-start'");
shouldBe("computedStyle.transitionTimingFunction", "'steps(1, start)'");
shouldBe("style.webkitTransitionTimingFunction", "'step-start'");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(1, start)'");

style.transitionTimingFunction = "step-end";
shouldBe("style.transitionTimingFunction", "'step-end'");
shouldBe("computedStyle.transitionTimingFunction", "'steps(1, end)'");
shouldBe("style.webkitTransitionTimingFunction", "'step-end'");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(1, end)'");

style.transitionTimingFunction = "steps(3)";
shouldBe("style.transitionTimingFunction", "'steps(3, end)'");
shouldBe("computedStyle.transitionTimingFunction", "'steps(3, end)'");
shouldBe("style.webkitTransitionTimingFunction", "'steps(3, end)'");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(3, end)'");

style.transitionTimingFunction = "steps(4, end)";
shouldBe("style.transitionTimingFunction", "'steps(4, end)'");
shouldBe("computedStyle.transitionTimingFunction", "'steps(4, end)'");
shouldBe("style.webkitTransitionTimingFunction", "'steps(4, end)'");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(4, end)'");

style.transitionTimingFunction = "steps(5, start)";
shouldBe("style.transitionTimingFunction", "'steps(5, start)'");
shouldBe("computedStyle.transitionTimingFunction", "'steps(5, start)'");
shouldBe("style.webkitTransitionTimingFunction", "'steps(5, start)'");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(5, start)'");

style.transitionTimingFunction = "frames(2)";
shouldBe("style.transitionTimingFunction", "'frames(2)'");
shouldBe("computedStyle.transitionTimingFunction", "'frames(2)'");
shouldBe("style.webkitTransitionTimingFunction", "'frames(2)'");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'frames(2)'");

style.transitionProperty = "opacity, width";

style.transitionTimingFunction = "ease-in-out, ease-in";
shouldBe("style.transitionTimingFunction", "'ease-in-out, ease-in'");
shouldBe("computedStyle.transitionTimingFunction", "'ease-in-out, ease-in'");
shouldBe("style.webkitTransitionTimingFunction", "'ease-in-out, ease-in'");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in-out, ease-in'");

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

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

debug("Invalid transition-timing-function values.");
style.transitionProperty = "";
style.transitionTimingFunction = "";

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

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

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

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

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

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

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

style.transitionTimingFunction = "steps(5, 3)";
shouldBe("style.transitionTimingFunction", "''");
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
shouldBe("style.webkitTransitionTimingFunction", "''");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");

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

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

style.transitionTimingFunction = "step(5)";
shouldBe("style.transitionTimingFunction", "''");
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
shouldBe("style.webkitTransitionTimingFunction", "''");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");

style.transitionTimingFunction = "red";
shouldBe("style.transitionTimingFunction", "''");
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
shouldBe("style.webkitTransitionTimingFunction", "''");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");

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

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

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

debug("Valid transition-delay values.");
// Initial test.
shouldBe("computedStyle.transitionDelay", "'0s'");
shouldBe("computedStyle.webkitTransitionDelay", "'0s'");

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

style.transitionDelay = "5s";
shouldBe("style.transitionDelay", "'5s'");
shouldBe("computedStyle.transitionDelay", "'5s'");
shouldBe("style.webkitTransitionDelay", "'5s'");
shouldBe("computedStyle.webkitTransitionDelay", "'5s'");

style.transitionDelay = "10ms";
shouldBe("style.transitionDelay", "'10ms'");
shouldBe("computedStyle.transitionDelay", "'0.01s'");
shouldBe("style.webkitTransitionDelay", "'10ms'");
shouldBe("computedStyle.webkitTransitionDelay", "'0.01s'");

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

style.transitionProperty = "opacity, width";

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

debug("Invalid transition-duration values.");
style.transitionProperty = "opacity";
style.transitionDelay = "";

style.transitionDelay = "'5ms'";
shouldBe("style.transitionDelay", "''");
shouldBe("computedStyle.transitionDelay", "'0s'");
shouldBe("style.webkitTransitionDelay", "''");
shouldBe("computedStyle.webkitTransitionDelay", "'0s'");

style.transitionDelay = "30px";
shouldBe("style.transitionDelay", "''");
shouldBe("computedStyle.transitionDelay", "'0s'");
shouldBe("style.webkitTransitionDelay", "''");
shouldBe("computedStyle.webkitTransitionDelay", "'0s'");

style.transitionDelay = "solid";
shouldBe("style.transitionDelay", "''");
shouldBe("computedStyle.transitionDelay", "'0s'");
shouldBe("style.webkitTransitionDelay", "''");
shouldBe("computedStyle.webkitTransitionDelay", "'0s'");

style.transitionDelay = "20";
shouldBe("style.transitionDelay", "''");
shouldBe("computedStyle.transitionDelay", "'0s'");
shouldBe("style.webkitTransitionDelay", "''");
shouldBe("computedStyle.webkitTransitionDelay", "'0s'");

style.transitionDelay = "20%";
shouldBe("style.transitionDelay", "''");
shouldBe("computedStyle.transitionDelay", "'0s'");
shouldBe("style.webkitTransitionDelay", "''");
shouldBe("computedStyle.webkitTransitionDelay", "'0s'");

style.transitionDelay = "0s, 20px";
shouldBe("style.transitionDelay", "''");
shouldBe("computedStyle.transitionDelay", "'0s'");
shouldBe("style.webkitTransitionDelay", "''");
shouldBe("computedStyle.webkitTransitionDelay", "'0s'");

debug("Valid transition shorthand values.");
style.transition = "";
// Initial test.
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");

style.transition = "none";
shouldNotBe("Object.keys(style).indexOf('transition')", "-1");
shouldBe("Object.keys(style).indexOf('webkitTransition')", "-1");
shouldBe("style.transition", "'none'");
shouldBe("computedStyle.transition", "'none 0s ease 0s'");
shouldBe("style.webkitTransition", "'none'");
shouldBe("computedStyle.webkitTransition", "'none 0s ease 0s'");
shouldBe("checkTransitionShorthandValue()", "true");

style.transition = "none 20s";
shouldBe("style.transition", "'none 20s'");
shouldBe("computedStyle.transition", "'none 20s ease 0s'");
shouldBe("style.webkitTransition", "'none 20s'");
shouldBe("computedStyle.webkitTransition", "'none 20s ease 0s'");
shouldBe("checkTransitionShorthandValue()", "true");

style.transition = "ease-in none 20s";
shouldBe("style.transition", "'none 20s ease-in'");
shouldBe("computedStyle.transition", "'none 20s ease-in 0s'");
shouldBe("style.webkitTransition", "'none 20s ease-in'");
shouldBe("computedStyle.webkitTransition", "'none 20s ease-in 0s'");
shouldBe("checkTransitionShorthandValue()", "true");

style.transition = "ease-in opacity 20s";
shouldBe("style.transition", "'opacity 20s ease-in'");
shouldBe("computedStyle.transition", "'opacity 20s ease-in 0s'");
shouldBe("style.webkitTransition", "'opacity 20s ease-in'");
shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 0s'");
shouldBe("checkTransitionShorthandValue()", "true");

style.transition = "ease-in opacity 20s 10s";
shouldBe("style.transition", "'opacity 20s ease-in 10s'");
shouldBe("computedStyle.transition", "'opacity 20s ease-in 10s'");
shouldBe("style.webkitTransition", "'opacity 20s ease-in 10s'");
shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 10s'");
// 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.transitionDuration", "'20s'");
shouldBe("computedStyle.webkitTransitionDuration", "'20s'");
shouldBe("computedStyle.transitionDelay", "'10s'");
shouldBe("computedStyle.webkitTransitionDelay", "'10s'");
shouldBe("checkTransitionShorthandValue()", "true");

style.transition = "20s ease-in opacity 10s";
shouldBe("style.transition", "'opacity 20s ease-in 10s'");
shouldBe("computedStyle.transition", "'opacity 20s ease-in 10s'");
shouldBe("style.webkitTransition", "'opacity 20s ease-in 10s'");
shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 10s'");
shouldBe("computedStyle.transitionDuration", "'20s'");
shouldBe("computedStyle.webkitTransitionDuration", "'20s'");
shouldBe("computedStyle.transitionDelay", "'10s'");
shouldBe("computedStyle.webkitTransitionDelay", "'10s'");
shouldBe("checkTransitionShorthandValue()", "true");

style.transition = "ease-in opacity 20s 10s, cubic-bezier(0.32, 0, 1, 1) 10s width 20s";
shouldBe("style.transition", "'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
shouldBe("computedStyle.transition", "'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
shouldBe("style.webkitTransition", "'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'");
// 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.transitionDuration", "'20s, 10s'");
shouldBe("computedStyle.webkitTransitionDuration", "'20s, 10s'");
shouldBe("computedStyle.transitionDelay", "'10s, 20s'");
shouldBe("computedStyle.webkitTransitionDelay", "'10s, 20s'");
shouldBe("checkTransitionShorthandValue()", "true");

style.transition = "all, all";
shouldBe("style.transition", "'all, all'");
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
shouldBe("style.webkitTransition", "'all, all'");
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");

style.transition = "all 20s 10s ease-in, all ease-out 20s";
shouldBe("style.transition", "'all 20s ease-in 10s, all 20s ease-out'");
shouldBe("computedStyle.transition", "'all 20s ease-out 0s'");
shouldBe("style.webkitTransition", "'all 20s ease-in 10s, all 20s ease-out'");
shouldBe("computedStyle.webkitTransition", "'all 20s ease-out 0s'");

style.transition = "ease-in opacity 20s 10s, all ease-out 20s";
shouldBe("style.transition", "'opacity 20s ease-in 10s, all 20s ease-out'");
shouldBe("computedStyle.transition", "'opacity 20s ease-in 10s, all 20s ease-out 0s'");
shouldBe("style.webkitTransition", "'opacity 20s ease-in 10s, all 20s ease-out'");
shouldBe("computedStyle.webkitTransition", "'opacity 20s ease-in 10s, all 20s ease-out 0s'");
shouldBe("checkTransitionShorthandValue()", "true");

style.transition = " all ease-out 20s, ease-in opacity 20s 10s";
shouldBe("style.transition", "'all 20s ease-out, opacity 20s ease-in 10s'");
shouldBe("computedStyle.transition", "'all 20s ease-out 0s, opacity 20s ease-in 10s'");
shouldBe("style.webkitTransition", "'all 20s ease-out, opacity 20s ease-in 10s'");
shouldBe("computedStyle.webkitTransition", "'all 20s ease-out 0s, opacity 20s ease-in 10s'");
shouldBe("checkTransitionShorthandValue()", "true");

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

style.transition = "20";
shouldBe("style.transition", "''");
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
shouldBe("style.webkitTransition", "''");
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");

style.transition = "20, 20";
shouldBe("style.transition", "''");
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
shouldBe("style.webkitTransition", "''");
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");

style.transition = "widthFoo";
shouldBe("style.transition", "'widthFoo'");
shouldBe("computedStyle.transition", "'widthFoo 0s ease 0s'");
shouldBe("style.webkitTransition", "'widthFoo'");
shouldBe("computedStyle.webkitTransition", "'widthFoo 0s ease 0s'");

style.transition = '';

style.transition = "all 30s width ease-in";
shouldBe("style.transition", "''");
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
shouldBe("style.webkitTransition", "''");
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");

style.transition = "all 30s ease-in 20px";
shouldBe("style.transition", "''");
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
shouldBe("style.webkitTransition", "''");
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");

style.transition = "all 30s ease-in 20s, 20px";
shouldBe("style.transition", "''");
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
shouldBe("style.webkitTransition", "''");
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");

style.transition = "all 30s ease-in 20s, step-start(2)";
shouldBe("style.transition", "''");
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
shouldBe("style.webkitTransition", "''");
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");

style.transition = "ease-in opacity 20s 10s, none";
shouldBe("style.transition", "''");
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
shouldBe("style.webkitTransition", "''");
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");

style.transition = "none, ease-in opacity 20s 10s, none";
shouldBe("style.transition", "''");
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
shouldBe("style.webkitTransition", "''");
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");

style.transition = "none, ease-in opacity 20s 10s";
shouldBe("style.transition", "''");
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
shouldBe("style.webkitTransition", "''");
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");

style.transition = "ease-in opacity 20s 10s, all 20s ease-out 0s, none";
shouldBe("style.transition", "''");
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
shouldBe("style.webkitTransition", "''");
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");

style.transition = "ease-in opacity 20s 10s, ease-in width 20s 10s, none";
shouldBe("style.transition", "''");
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
shouldBe("style.webkitTransition", "''");
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");

style.transition = "none, none";
shouldBe("style.transition", "''");
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
shouldBe("style.webkitTransition", "''");
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");

document.body.removeChild(testContainer);

let framesInvalidElement;
[-10, 0, 1, 2.5, "", "eggs", NaN, new Array, {}].forEach(invalidValue => {
    framesInvalidElement = document.body.appendChild(document.createElement("div"));
    const value = `frames(${invalidValue})`;
    debug("");
    debug(`Testing frames() invalid values: ${value}`);
    framesInvalidElement.style.transitionTimingFunction = value;
    shouldBe("framesInvalidElement.style.transitionTimingFunction", "''");
    shouldBe("getComputedStyle(framesInvalidElement).transitionTimingFunction", "'ease'");
    shouldBe("framesInvalidElement.style.webkitTransitionTimingFunction", "''");
    shouldBe("getComputedStyle(framesInvalidElement).webkitTransitionTimingFunction", "'ease'");
    framesInvalidElement.remove();
});

</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>