2012-12-19 19:35:57 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
2013-09-08 05:47:54 +00:00
|
|
|
<script src="../resources/js-test-pre.js"></script>
|
2012-12-19 19:35:57 +00:00
|
|
|
</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);
|
|
|
|
|
2013-01-09 18:04:04 +00:00
|
|
|
// 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);
|
|
|
|
}
|
|
|
|
|
2012-12-19 19:35:57 +00:00
|
|
|
debug("Valid transition-property values.");
|
|
|
|
// Initial test.
|
|
|
|
shouldBe("computedStyle.transitionProperty", "'all'");
|
|
|
|
shouldBe("computedStyle.webkitTransitionProperty", "'all'");
|
|
|
|
|
|
|
|
style.transitionProperty = "none";
|
|
|
|
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'");
|
|
|
|
|
2013-03-04 18:49:29 +00:00
|
|
|
style.transitionProperty = "all, all";
|
|
|
|
shouldBe("style.transitionProperty", "'all, all'");
|
|
|
|
shouldBe("computedStyle.transitionProperty", "'all'");
|
|
|
|
shouldBe("style.webkitTransitionProperty", "'all, all'");
|
|
|
|
shouldBe("computedStyle.webkitTransitionProperty", "'all'");
|
|
|
|
|
2012-12-19 19:35:57 +00:00
|
|
|
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'");
|
|
|
|
|
2013-02-25 18:56:19 +00:00
|
|
|
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'");
|
|
|
|
|
2012-12-19 19:35:57 +00:00
|
|
|
debug("Invalid transition-property values.");
|
|
|
|
style.transitionProperty = "";
|
|
|
|
|
|
|
|
style.transitionProperty = "solid, font-size";
|
2016-12-08 16:47:12 +00:00
|
|
|
shouldBe("style.transitionProperty", "'solid, font-size'");
|
2017-05-04 20:16:01 +00:00
|
|
|
shouldBe("computedStyle.transitionProperty", "'solid, font-size'");
|
2016-12-08 16:47:12 +00:00
|
|
|
shouldBe("style.webkitTransitionProperty", "'solid, font-size'");
|
2017-05-04 20:16:01 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionProperty", "'solid, font-size'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionProperty = "solid, left";
|
2016-12-08 16:47:12 +00:00
|
|
|
shouldBe("style.transitionProperty", "'solid, left'");
|
2017-05-04 20:16:01 +00:00
|
|
|
shouldBe("computedStyle.transitionProperty", "'solid, left'");
|
2016-12-08 16:47:12 +00:00
|
|
|
shouldBe("style.webkitTransitionProperty", "'solid, left'");
|
2017-05-04 20:16:01 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionProperty", "'solid, left'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionProperty = "solid";
|
2016-12-08 16:47:12 +00:00
|
|
|
shouldBe("style.transitionProperty", "'solid'");
|
2017-05-04 20:16:01 +00:00
|
|
|
shouldBe("computedStyle.transitionProperty", "'solid'");
|
2016-12-08 16:47:12 +00:00
|
|
|
shouldBe("style.webkitTransitionProperty", "'solid'");
|
2017-05-04 20:16:01 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionProperty", "'solid'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
2016-12-08 16:47:12 +00:00
|
|
|
style.transitionProperty = '';
|
|
|
|
|
2012-12-19 19:35:57 +00:00
|
|
|
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'");
|
|
|
|
|
2013-01-23 19:27:38 +00:00
|
|
|
style.transitionProperty = "all, none";
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.transitionProperty", "''");
|
|
|
|
shouldBe("computedStyle.transitionProperty", "'all'");
|
|
|
|
shouldBe("style.webkitTransitionProperty", "''");
|
2013-01-23 19:27:38 +00:00
|
|
|
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'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionProperty = "";
|
|
|
|
|
|
|
|
debug("Valid transition-duration values.");
|
|
|
|
// Initial test.
|
|
|
|
shouldBe("computedStyle.transitionDuration", "'0s'");
|
|
|
|
shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
|
|
|
|
|
|
|
|
style.transitionDuration = "0s";
|
|
|
|
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'");
|
|
|
|
|
2013-01-08 18:08:02 +00:00
|
|
|
style.transitionDuration = "10ms";
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.transitionDuration", "'10ms'");
|
|
|
|
shouldBe("computedStyle.transitionDuration", "'0.01s'");
|
|
|
|
shouldBe("style.webkitTransitionDuration", "'10ms'");
|
|
|
|
shouldBe("computedStyle.webkitTransitionDuration", "'0.01s'");
|
|
|
|
|
|
|
|
style.transitionProperty = "opacity, width";
|
|
|
|
|
2013-01-08 18:08:02 +00:00
|
|
|
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'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
debug("Invalid transition-duration values.");
|
|
|
|
style.transitionProperty = "opacity";
|
|
|
|
style.transitionDuration = "";
|
|
|
|
|
2013-01-08 18:08:02 +00:00
|
|
|
// Negative values are invalid.
|
|
|
|
style.transitionDuration = "-10ms";
|
|
|
|
shouldBe("style.transitionDuration", "''");
|
|
|
|
shouldBe("computedStyle.transitionDuration", "'0s'");
|
|
|
|
shouldBe("style.webkitTransitionDuration", "''");
|
|
|
|
shouldBe("computedStyle.webkitTransitionDuration", "'0s'");
|
|
|
|
|
2012-12-19 19:35:57 +00:00
|
|
|
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.
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
|
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
2013-01-03 20:22:47 +00:00
|
|
|
style.transitionTimingFunction = "linear";
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.transitionTimingFunction", "'linear'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'linear'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "'linear'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'linear'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionTimingFunction = "ease";
|
|
|
|
shouldBe("style.transitionTimingFunction", "'ease'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "'ease'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionTimingFunction = "ease-in";
|
|
|
|
shouldBe("style.transitionTimingFunction", "'ease-in'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease-in'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "'ease-in'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionTimingFunction = "ease-out";
|
|
|
|
shouldBe("style.transitionTimingFunction", "'ease-out'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease-out'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "'ease-out'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-out'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionTimingFunction = "ease-in-out";
|
|
|
|
shouldBe("style.transitionTimingFunction", "'ease-in-out'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease-in-out'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "'ease-in-out'");
|
2013-01-03 20:22:47 +00:00
|
|
|
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)'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
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)'");
|
|
|
|
|
2013-01-03 19:05:44 +00:00
|
|
|
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)'");
|
|
|
|
|
2012-12-19 19:35:57 +00:00
|
|
|
style.transitionTimingFunction = "step-start";
|
2020-05-02 09:34:30 +00:00
|
|
|
shouldBe("style.transitionTimingFunction", "'steps(1, start)'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'steps(1, start)'");
|
2020-05-02 09:34:30 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "'steps(1, start)'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(1, start)'");
|
|
|
|
|
|
|
|
style.transitionTimingFunction = "step-end";
|
2020-05-02 09:34:30 +00:00
|
|
|
shouldBe("style.transitionTimingFunction", "'steps(1)'");
|
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'steps(1)'");
|
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "'steps(1)'");
|
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(1)'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionTimingFunction = "steps(3)";
|
2020-05-02 09:34:30 +00:00
|
|
|
shouldBe("style.transitionTimingFunction", "'steps(3)'");
|
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'steps(3)'");
|
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "'steps(3)'");
|
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(3)'");
|
|
|
|
|
|
|
|
style.transitionTimingFunction = "steps(4)";
|
|
|
|
shouldBe("style.transitionTimingFunction", "'steps(4)'");
|
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'steps(4)'");
|
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "'steps(4)'");
|
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(4)'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
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)'");
|
|
|
|
|
2018-01-12 13:26:50 +00:00
|
|
|
style.transitionTimingFunction = "frames(2)";
|
|
|
|
shouldBe("style.transitionTimingFunction", "'frames(2)'");
|
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'frames(2)'");
|
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "'frames(2)'");
|
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'frames(2)'");
|
|
|
|
|
2012-12-19 19:35:57 +00:00
|
|
|
style.transitionProperty = "opacity, width";
|
|
|
|
|
|
|
|
style.transitionTimingFunction = "ease-in-out, ease-in";
|
|
|
|
shouldBe("style.transitionTimingFunction", "'ease-in-out, ease-in'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease-in-out, ease-in'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "'ease-in-out, ease-in'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in-out, ease-in'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
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)'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionTimingFunction = "steps(3, start), ease-in-out";
|
|
|
|
shouldBe("style.transitionTimingFunction", "'steps(3, start), ease-in-out'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'steps(3, start), ease-in-out'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "'steps(3, start), ease-in-out'");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'steps(3, start), ease-in-out'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
debug("Invalid transition-timing-function values.");
|
|
|
|
style.transitionProperty = "";
|
|
|
|
style.transitionTimingFunction = "";
|
|
|
|
|
2013-01-08 21:44:22 +00:00
|
|
|
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'");
|
|
|
|
|
2012-12-19 19:35:57 +00:00
|
|
|
style.transitionTimingFunction = "steps(5, 3)";
|
|
|
|
shouldBe("style.transitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionTimingFunction = "steps(-5, start)";
|
|
|
|
shouldBe("style.transitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionTimingFunction = "steps(5, start, end)";
|
|
|
|
shouldBe("style.transitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionTimingFunction = "step(5)";
|
|
|
|
shouldBe("style.transitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionTimingFunction = "red";
|
|
|
|
shouldBe("style.transitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25)";
|
|
|
|
shouldBe("style.transitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1, 2)";
|
|
|
|
shouldBe("style.transitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transitionTimingFunction = "cubic-foo(0.25, 0.1, 0.25, 1)";
|
|
|
|
shouldBe("style.transitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.transitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionTimingFunction", "''");
|
2013-01-03 20:22:47 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
debug("Valid transition-delay values.");
|
|
|
|
// Initial test.
|
|
|
|
shouldBe("computedStyle.transitionDelay", "'0s'");
|
|
|
|
shouldBe("computedStyle.webkitTransitionDelay", "'0s'");
|
|
|
|
|
|
|
|
style.transitionDelay = "0s";
|
|
|
|
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'");
|
|
|
|
|
2013-01-08 18:08:02 +00:00
|
|
|
style.transitionDelay = "10ms";
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.transitionDelay", "'10ms'");
|
2013-01-08 18:08:02 +00:00
|
|
|
shouldBe("computedStyle.transitionDelay", "'0.01s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransitionDelay", "'10ms'");
|
2013-01-08 18:08:02 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionDelay", "'0.01s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
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'");
|
2013-01-08 18:08:02 +00:00
|
|
|
shouldBe("computedStyle.webkitTransitionDelay", "'-0.01s, 20s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
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'");
|
|
|
|
|
2013-01-09 18:04:04 +00:00
|
|
|
debug("Valid transition shorthand values.");
|
2012-12-19 19:35:57 +00:00
|
|
|
style.transition = "";
|
|
|
|
// Initial test.
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
|
|
|
|
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transition = "none";
|
|
|
|
shouldBe("style.transition", "'none'");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.transition", "'none 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransition", "'none'");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.webkitTransition", "'none 0s ease 0s'");
|
|
|
|
shouldBe("checkTransitionShorthandValue()", "true");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transition = "none 20s";
|
|
|
|
shouldBe("style.transition", "'none 20s'");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.transition", "'none 20s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransition", "'none 20s'");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.webkitTransition", "'none 20s ease 0s'");
|
|
|
|
shouldBe("checkTransitionShorthandValue()", "true");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transition = "ease-in none 20s";
|
2013-01-09 18:04:04 +00:00
|
|
|
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");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transition = "ease-in opacity 20s";
|
2013-01-09 18:04:04 +00:00
|
|
|
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");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transition = "ease-in opacity 20s 10s";
|
2013-01-09 18:04:04 +00:00
|
|
|
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'");
|
2012-12-19 19:35:57 +00:00
|
|
|
// 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'");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("checkTransitionShorthandValue()", "true");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transition = "20s ease-in opacity 10s";
|
2013-01-09 18:04:04 +00:00
|
|
|
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'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("computedStyle.transitionDuration", "'20s'");
|
|
|
|
shouldBe("computedStyle.webkitTransitionDuration", "'20s'");
|
|
|
|
shouldBe("computedStyle.transitionDelay", "'10s'");
|
|
|
|
shouldBe("computedStyle.webkitTransitionDelay", "'10s'");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("checkTransitionShorthandValue()", "true");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transition = "ease-in opacity 20s 10s, cubic-bezier(0.32, 0, 1, 1) 10s width 20s";
|
2013-01-09 18:04:04 +00:00
|
|
|
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'");
|
2012-12-19 19:35:57 +00:00
|
|
|
// 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'");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("checkTransitionShorthandValue()", "true");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
2013-03-04 18:49:29 +00:00
|
|
|
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'");
|
|
|
|
|
2013-02-15 19:06:30 +00:00
|
|
|
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");
|
|
|
|
|
2012-12-19 19:35:57 +00:00
|
|
|
debug("Invalid transition shorthand values.");
|
|
|
|
style.transition = "";
|
|
|
|
|
|
|
|
style.transition = "20";
|
|
|
|
shouldBe("style.transition", "''");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransition", "''");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transition = "20, 20";
|
|
|
|
shouldBe("style.transition", "''");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransition", "''");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transition = "widthFoo";
|
2016-12-08 16:47:12 +00:00
|
|
|
shouldBe("style.transition", "'widthFoo'");
|
2017-05-04 20:16:01 +00:00
|
|
|
shouldBe("computedStyle.transition", "'widthFoo 0s ease 0s'");
|
2016-12-08 16:47:12 +00:00
|
|
|
shouldBe("style.webkitTransition", "'widthFoo'");
|
2017-05-04 20:16:01 +00:00
|
|
|
shouldBe("computedStyle.webkitTransition", "'widthFoo 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
2016-12-08 16:47:12 +00:00
|
|
|
style.transition = '';
|
|
|
|
|
2012-12-19 19:35:57 +00:00
|
|
|
style.transition = "all 30s width ease-in";
|
|
|
|
shouldBe("style.transition", "''");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransition", "''");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transition = "all 30s ease-in 20px";
|
|
|
|
shouldBe("style.transition", "''");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransition", "''");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transition = "all 30s ease-in 20s, 20px";
|
|
|
|
shouldBe("style.transition", "''");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransition", "''");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
|
|
|
style.transition = "all 30s ease-in 20s, step-start(2)";
|
|
|
|
shouldBe("style.transition", "''");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.transition", "'all 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
shouldBe("style.webkitTransition", "''");
|
2013-01-09 18:04:04 +00:00
|
|
|
shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s'");
|
2012-12-19 19:35:57 +00:00
|
|
|
|
2013-02-15 19:06:30 +00:00
|
|
|
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'");
|
|
|
|
|
2012-12-19 19:35:57 +00:00
|
|
|
document.body.removeChild(testContainer);
|
2018-01-12 13:26:50 +00:00
|
|
|
|
|
|
|
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();
|
|
|
|
});
|
|
|
|
|
2012-12-19 19:35:57 +00:00
|
|
|
</script>
|
2013-09-08 05:47:54 +00:00
|
|
|
<script src="../resources/js-test-post.js"></script>
|
2012-12-19 19:35:57 +00:00
|
|
|
</body>
|
|
|
|
</html>
|