<!DOCTYPE html>
<html>
<head>
<script src="../resources/js-test.js"></script>
<style>
#base {
    transition-property: width;
    transition-duration: 5s;
    transition-timing-function: linear;
    transition-delay: 2s;
}

#inherit {
    transition-property: inherit;
    transition-duration: inherit;
    transition-timing-function: inherit;
    transition-delay: inherit;
}

#initial {
    transition-property: initial;
    transition-duration: initial;
    transition-timing-function: initial;
    transition-delay: initial;
}

</style>
</head>
<body>
<div style="width:500px;height:500px" id="base">
    <div id="inherit"></div>
    <div id="initial"></div>
</div>
<script>
description("Test that inherit and initial works on unprefixed transitions.")

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

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

debug("Testing inherit.");
shouldBe("computedStyle.transitionProperty", "'width'");
shouldBe("computedStyle.webkitTransitionProperty", "'width'");

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

shouldBe("computedStyle.transitionTimingFunction", "'linear'");
shouldBe("computedStyle.webkitTransitionTimingFunction", "'linear'");

shouldBe("computedStyle.transitionDelay", "'2s'");
shouldBe("computedStyle.webkitTransitionDelay", "'2s'");

e = document.getElementById('initial');
computedStyle = window.getComputedStyle(e, null);
debug("Testing initial.");

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

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

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

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

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