transition-shorthand-cssText.html | Explore in Territory

<!DOCTYPE HTML>
<html>
<style>
#target {
   transition-duration: 1s;
}
</style>
<div id="target"></div>
<script src="../../resources/js-test.js"></script>

<script>
if (window.testRunner)
    testRunner.dumpAsText();

description("Test for Bug 310403: CssStyleDeclaration improperly sets transition shorthand when transition-duration is set.");

var sheet = document.styleSheets[0];
var rule = sheet.rules[0];
shouldBe("rule.cssText","'#target { transition-duration: 1s; }'");
rule.style.setProperty('transition-delay', '0s');
shouldBe("rule.cssText","'#target { transition-duration: 1s; transition-delay: 0s; }'");
rule.style.setProperty('transition-property', 'all');
shouldBe("rule.cssText","'#target { transition-duration: 1s; transition-delay: 0s; transition-property: all; }'");
rule.style.setProperty('transition-timing-function', 'ease');
shouldBe("rule.cssText","'#target { transition-duration: 1s; transition-delay: 0s; transition-property: all; transition-timing-function: ease; }'");
rule.style.setProperty('transition-behavior', 'allow-discrete');
shouldBe("rule.cssText","'#target { transition: 1s allow-discrete; }'");

</script>

</html>

chromium/third_party/blink/web_tests/fast/css/transition-shorthand-cssText.html