| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../resources/js-test.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, all'"); |
| shouldBe("style.webkitTransitionProperty", "'all, all'"); |
| shouldBe("computedStyle.webkitTransitionProperty", "'all, all'"); |
| |
| style.transitionProperty = "-webkit-transform-origin"; |
| shouldBe("style.transitionProperty", "'-webkit-transform-origin'"); |
| shouldBe("computedStyle.transitionProperty", "'-webkit-transform-origin'"); |
| |
| 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("Unknown transition-property values."); |
| |
| 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'"); |
| |
| debug("Invalid transition-property values."); |
| 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", "'step-start'"); |
| shouldBe("style.webkitTransitionTimingFunction", "'step-start'"); |
| shouldBe("computedStyle.webkitTransitionTimingFunction", "'step-start'"); |
| |
| style.transitionTimingFunction = "step-end"; |
| shouldBe("style.transitionTimingFunction", "'step-end'"); |
| shouldBe("computedStyle.transitionTimingFunction", "'step-end'"); |
| shouldBe("style.webkitTransitionTimingFunction", "'step-end'"); |
| shouldBe("computedStyle.webkitTransitionTimingFunction", "'step-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.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, all 0s ease 0s'"); |
| shouldBe("style.webkitTransition", "'all, all'"); |
| shouldBe("computedStyle.webkitTransition", "'all 0s ease 0s, 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-in 10s, all 20s ease-out 0s'"); |
| shouldBe("style.webkitTransition", "'all 20s ease-in 10s, all 20s ease-out'"); |
| shouldBe("computedStyle.webkitTransition", "'all 20s ease-in 10s, 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 = "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'"); |
| |
| debug("Ambiguous shorthand values."); |
| |
| style.transition = "ease"; |
| shouldBe("style.transitionProperty", "'all'"); |
| shouldBe("style.transitionTimingFunction", "'ease'"); |
| |
| style.transition = "ease-in ease-out"; |
| shouldBe("style.transitionProperty", "'ease-out'"); |
| shouldBe("style.transitionTimingFunction", "'ease-in'"); |
| |
| style.transition = "20s 10s"; |
| shouldBe("style.transitionDelay", "'10s'"); |
| shouldBe("style.transitionDuration", "'20s'"); |
| |
| style.transition = "-10s 10s"; |
| shouldBe("style.transitionDelay", "'-10s'"); |
| shouldBe("style.transitionDuration", "'10s'"); |
| |
| document.body.removeChild(testContainer); |
| </script> |
| </body> |
| </html> |
