| <!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 animations 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.animation and verifies Blink can parse it. |
| function checkAnimationShorthandValue() { |
| var before = computedStyle.getPropertyValue('animation'); |
| e.style.animation = ''; |
| e.style.animation = before; |
| return (computedStyle.getPropertyValue('animation') == before); |
| } |
| |
| debug("Valid animation-name values."); |
| // Initial test. |
| shouldBe("computedStyle.animationName", "'none'"); |
| shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| |
| style.animationName = "none"; |
| shouldNotBe("Object.keys(style).indexOf('animationName')", "-1"); |
| shouldBe("Object.keys(style).indexOf('webkitAnimationName')", "-1"); |
| shouldBe("style.animationName", "'none'"); |
| shouldBe("computedStyle.animationName", "'none'"); |
| shouldBe("style.webkitAnimationName", "'none'"); |
| shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| |
| style.animationName = "none, none"; |
| shouldBe("style.animationName", "'none, none'"); |
| shouldBe("computedStyle.animationName", "'none, none'"); |
| shouldBe("style.webkitAnimationName", "'none, none'"); |
| shouldBe("computedStyle.webkitAnimationName", "'none, none'"); |
| |
| style.animationName = "myAnim"; |
| shouldBe("style.animationName", "'myAnim'"); |
| shouldBe("computedStyle.animationName", "'myAnim'"); |
| shouldBe("style.webkitAnimationName", "'myAnim'"); |
| shouldBe("computedStyle.webkitAnimationName", "'myAnim'"); |
| |
| style.animationName = "background-position, font-size"; |
| shouldBe("style.animationName", "'background-position, font-size'"); |
| shouldBe("computedStyle.animationName", "'background-position, font-size'"); |
| shouldBe("style.webkitAnimationName", "'background-position, font-size'"); |
| shouldBe("computedStyle.webkitAnimationName", "'background-position, font-size'"); |
| |
| style.animationName = "background-position, font-size, color"; |
| shouldBe("style.animationName", "'background-position, font-size, color'"); |
| shouldBe("computedStyle.animationName", "'background-position, font-size, color'"); |
| shouldBe("style.webkitAnimationName", "'background-position, font-size, color'"); |
| shouldBe("computedStyle.webkitAnimationName", "'background-position, font-size, color'"); |
| |
| style.animationName = "all, font-size, color"; |
| shouldBe("style.animationName", "'all, font-size, color'"); |
| shouldBe("computedStyle.animationName", "'all, font-size, color'"); |
| shouldBe("style.webkitAnimationName", "'all, font-size, color'"); |
| shouldBe("computedStyle.webkitAnimationName", "'all, font-size, color'"); |
| |
| style.animationName = "inherit"; |
| shouldBe("style.animationName", "'inherit'"); |
| shouldBe("computedStyle.animationName", "'none'"); |
| shouldBe("style.webkitAnimationName", "'inherit'"); |
| shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| |
| style.animationName = "initial"; |
| shouldBe("style.animationName", "'initial'"); |
| shouldBe("computedStyle.animationName", "'none'"); |
| shouldBe("style.webkitAnimationName", "'initial'"); |
| shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| |
| debug("Invalid animation-name values."); |
| style.animationName = ""; |
| |
| style.animationName = "0"; |
| shouldBe("style.animationName", "''"); |
| shouldBe("computedStyle.animationName", "'none'"); |
| shouldBe("style.webkitAnimationName", "''"); |
| shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| |
| style.animationName = "all none"; |
| shouldBe("style.animationName", "''"); |
| shouldBe("computedStyle.animationName", "'none'"); |
| shouldBe("style.webkitAnimationName", "''"); |
| shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| |
| style.animationName = "opacity width"; |
| shouldBe("style.animationName", "''"); |
| shouldBe("computedStyle.animationName", "'none'"); |
| shouldBe("style.webkitAnimationName", "''"); |
| shouldBe("computedStyle.webkitAnimationName", "'none'"); |
| |
| style.animationName = ""; |
| |
| debug("Valid animation-duration values."); |
| // Initial test. |
| shouldBe("computedStyle.animationDuration", "'0s'"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| |
| style.animationDuration = "0s"; |
| shouldNotBe("Object.keys(style).indexOf('animationDuration')", "-1"); |
| shouldBe("Object.keys(style).indexOf('webkitAnimationDuration')", "-1"); |
| shouldBe("style.animationDuration", "'0s'"); |
| shouldBe("computedStyle.animationDuration", "'0s'"); |
| shouldBe("style.webkitAnimationDuration", "'0s'"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| |
| style.animationDuration = "5s"; |
| shouldBe("style.animationDuration", "'5s'"); |
| shouldBe("computedStyle.animationDuration", "'5s'"); |
| shouldBe("style.webkitAnimationDuration", "'5s'"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'5s'"); |
| |
| style.animationDuration = "10ms"; |
| shouldBe("style.animationDuration", "'10ms'"); |
| shouldBe("computedStyle.animationDuration", "'0.01s'"); |
| shouldBe("style.webkitAnimationDuration", "'10ms'"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'0.01s'"); |
| |
| style.animationDuration = "10ms, 20s"; |
| shouldBe("style.animationDuration", "'10ms, 20s'"); |
| shouldBe("computedStyle.animationDuration", "'0.01s, 20s'"); |
| shouldBe("style.webkitAnimationDuration", "'10ms, 20s'"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'0.01s, 20s'"); |
| |
| debug("Invalid animation-duration values."); |
| style.animationDuration = ""; |
| |
| // Negative values are invalid. |
| style.animationDuration = "-10ms"; |
| shouldBe("style.animationDuration", "''"); |
| shouldBe("computedStyle.animationDuration", "'0s'"); |
| shouldBe("style.webkitAnimationDuration", "''"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| |
| style.animationDuration = "'5ms'"; |
| shouldBe("style.animationDuration", "''"); |
| shouldBe("computedStyle.animationDuration", "'0s'"); |
| shouldBe("style.webkitAnimationDuration", "''"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| |
| style.animationDuration = "30px"; |
| shouldBe("style.animationDuration", "''"); |
| shouldBe("computedStyle.animationDuration", "'0s'"); |
| shouldBe("style.webkitAnimationDuration", "''"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| |
| style.animationDuration = "solid"; |
| shouldBe("style.animationDuration", "''"); |
| shouldBe("computedStyle.animationDuration", "'0s'"); |
| shouldBe("style.webkitAnimationDuration", "''"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| |
| style.animationDuration = "20"; |
| shouldBe("style.animationDuration", "''"); |
| shouldBe("computedStyle.animationDuration", "'0s'"); |
| shouldBe("style.webkitAnimationDuration", "''"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| |
| style.animationDuration = "20%"; |
| shouldBe("style.animationDuration", "''"); |
| shouldBe("computedStyle.animationDuration", "'0s'"); |
| shouldBe("style.webkitAnimationDuration", "''"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| |
| style.animationDuration = "0s, 20px"; |
| shouldBe("style.animationDuration", "''"); |
| shouldBe("computedStyle.animationDuration", "'0s'"); |
| shouldBe("style.webkitAnimationDuration", "''"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'0s'"); |
| |
| debug("Valid animation-timing-function values."); |
| // Initial test. |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "linear"; |
| shouldNotBe("Object.keys(style).indexOf('animationTimingFunction')", "-1"); |
| shouldBe("Object.keys(style).indexOf('webkitAnimationTimingFunction')", "-1"); |
| shouldBe("style.animationTimingFunction", "'linear'"); |
| shouldBe("computedStyle.animationTimingFunction", "'linear'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'linear'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'linear'"); |
| |
| style.animationTimingFunction = "ease"; |
| shouldBe("style.animationTimingFunction", "'ease'"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'ease'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "ease-in"; |
| shouldBe("style.animationTimingFunction", "'ease-in'"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease-in'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'ease-in'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-in'"); |
| |
| style.animationTimingFunction = "ease-out"; |
| shouldBe("style.animationTimingFunction", "'ease-out'"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease-out'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'ease-out'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-out'"); |
| |
| style.animationTimingFunction = "ease-in-out"; |
| shouldBe("style.animationTimingFunction", "'ease-in-out'"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease-in-out'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'ease-in-out'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-in-out'"); |
| |
| style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1)"; |
| shouldBe("style.animationTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'"); |
| shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.25, 0.1, 0.25, 1)'"); |
| |
| style.animationTimingFunction = "cubic-bezier(0.1, 0, 0.23, 0.4)"; |
| shouldBe("style.animationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'"); |
| shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 0.4)'"); |
| |
| style.animationTimingFunction = "cubic-bezier(0.1, 0, 0.23, 3)"; |
| shouldBe("style.animationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'"); |
| shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 0, 0.23, 3)'"); |
| |
| style.animationTimingFunction = "cubic-bezier(0.1, 5, 0.23, 3)"; |
| shouldBe("style.animationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'"); |
| shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 3)'"); |
| |
| style.animationTimingFunction = "cubic-bezier(0.1, 5, 0.23, 0)"; |
| shouldBe("style.animationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'"); |
| shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.1, 5, 0.23, 0)'"); |
| |
| style.animationTimingFunction = "cubic-bezier(0.2, 2, 0.2, -0.4)"; |
| shouldBe("style.animationTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'"); |
| shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.2, 2, 0.2, -0.4)'"); |
| |
| style.animationTimingFunction = "cubic-bezier(0.2, -2, 0.2, 0.4)"; |
| shouldBe("style.animationTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'"); |
| shouldBe("computedStyle.animationTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'cubic-bezier(0.2, -2, 0.2, 0.4)'"); |
| |
| style.animationTimingFunction = "step-start"; |
| shouldBe("style.animationTimingFunction", "'step-start'"); |
| shouldBe("computedStyle.animationTimingFunction", "'step-start'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'step-start'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'step-start'"); |
| |
| style.animationTimingFunction = "step-end"; |
| shouldBe("style.animationTimingFunction", "'step-end'"); |
| shouldBe("computedStyle.animationTimingFunction", "'step-end'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'step-end'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'step-end'"); |
| |
| style.animationTimingFunction = "steps(3)"; |
| shouldBe("style.animationTimingFunction", "'steps(3, end)'"); |
| shouldBe("computedStyle.animationTimingFunction", "'steps(3, end)'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'steps(3, end)'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'steps(3, end)'"); |
| |
| style.animationTimingFunction = "steps(4, end)"; |
| shouldBe("style.animationTimingFunction", "'steps(4, end)'"); |
| shouldBe("computedStyle.animationTimingFunction", "'steps(4, end)'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'steps(4, end)'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'steps(4, end)'"); |
| |
| style.animationTimingFunction = "steps(5, start)"; |
| shouldBe("style.animationTimingFunction", "'steps(5, start)'"); |
| shouldBe("computedStyle.animationTimingFunction", "'steps(5, start)'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'steps(5, start)'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'steps(5, start)'"); |
| |
| style.animationName = "anim1, anim2"; |
| |
| style.animationTimingFunction = "ease-in-out, ease-in"; |
| shouldBe("style.animationTimingFunction", "'ease-in-out, ease-in'"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease-in-out, ease-in'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'ease-in-out, ease-in'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-in-out, ease-in'"); |
| |
| style.animationTimingFunction = "ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)"; |
| shouldBe("style.animationTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'"); |
| |
| style.animationTimingFunction = "steps(3, start), ease-in-out"; |
| shouldBe("style.animationTimingFunction", "'steps(3, start), ease-in-out'"); |
| shouldBe("computedStyle.animationTimingFunction", "'steps(3, start), ease-in-out'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'steps(3, start), ease-in-out'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'steps(3, start), ease-in-out'"); |
| |
| debug("Invalid animation-timing-function values."); |
| style.animationName = ""; |
| style.animationTimingFunction = ""; |
| |
| style.animationTimingFunction = "cubic-bezier(3, 0.1, 4, 1)"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "cubic-bezier(1, 0.1, 3, 1)"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "cubic-bezier(0.1, 0, 4, 0.4)"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "cubic-bezier(3, 0, 4, 0.4)"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "cubic-bezier(3, 0, 0.2, 0.4)"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "cubic-bezier(-0.2, 0, 0.2, 0.4)"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "cubic-bezier(0.2, 2, -0.2, 0.4)"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "steps(5, 3)"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "steps(-5, start)"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "steps(5, start, end)"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "step(5)"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "red"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25)"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1, 2)"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "cubic-foo(0.25, 0.1, 0.25, 1)"; |
| shouldBe("style.animationTimingFunction", "''"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "''"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "step-middle"; |
| shouldBe("style.animationTimingFunction", "'step-middle'"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'step-middle'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| style.animationTimingFunction = "steps(5, middle)"; |
| shouldBe("style.animationTimingFunction", "'steps(5, middle)'"); |
| shouldBe("computedStyle.animationTimingFunction", "'ease'"); |
| shouldBe("style.webkitAnimationTimingFunction", "'steps(5, middle)'"); |
| shouldBe("computedStyle.webkitAnimationTimingFunction", "'ease'"); |
| |
| debug("Valid animation-delay values."); |
| // Initial test. |
| shouldBe("computedStyle.animationDelay", "'0s'"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| |
| style.animationDelay = "0s"; |
| shouldNotBe("Object.keys(style).indexOf('animationDelay')", "-1"); |
| shouldBe("Object.keys(style).indexOf('webkitAnimationDelay')", "-1"); |
| shouldBe("style.animationDelay", "'0s'"); |
| shouldBe("computedStyle.animationDelay", "'0s'"); |
| shouldBe("style.webkitAnimationDelay", "'0s'"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| |
| style.animationDelay = "5s"; |
| shouldBe("style.animationDelay", "'5s'"); |
| shouldBe("computedStyle.animationDelay", "'5s'"); |
| shouldBe("style.webkitAnimationDelay", "'5s'"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'5s'"); |
| |
| style.animationDelay = "10ms"; |
| shouldBe("style.animationDelay", "'10ms'"); |
| shouldBe("computedStyle.animationDelay", "'0.01s'"); |
| shouldBe("style.webkitAnimationDelay", "'10ms'"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'0.01s'"); |
| |
| style.animationDelay = "-10ms"; |
| shouldBe("style.animationDelay", "'-10ms'"); |
| shouldBe("computedStyle.animationDelay", "'-0.01s'"); |
| shouldBe("style.webkitAnimationDelay", "'-10ms'"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'-0.01s'"); |
| |
| style.transitionProperty = "opacity, width"; |
| |
| style.animationDelay = "-10ms, 20s"; |
| shouldBe("style.animationDelay", "'-10ms, 20s'"); |
| shouldBe("computedStyle.animationDelay", "'-0.01s, 20s'"); |
| shouldBe("style.webkitAnimationDelay", "'-10ms, 20s'"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'-0.01s, 20s'"); |
| |
| debug("Invalid animation-delay values."); |
| style.transitionProperty = "opacity"; |
| style.animationDelay = ""; |
| |
| style.animationDelay = "'5ms'"; |
| shouldBe("style.animationDelay", "''"); |
| shouldBe("computedStyle.animationDelay", "'0s'"); |
| shouldBe("style.webkitAnimationDelay", "''"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| |
| style.animationDelay = "30px"; |
| shouldBe("style.animationDelay", "''"); |
| shouldBe("computedStyle.animationDelay", "'0s'"); |
| shouldBe("style.webkitAnimationDelay", "''"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| |
| style.animationDelay = "solid"; |
| shouldBe("style.animationDelay", "''"); |
| shouldBe("computedStyle.animationDelay", "'0s'"); |
| shouldBe("style.webkitAnimationDelay", "''"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| |
| style.animationDelay = "20"; |
| shouldBe("style.animationDelay", "''"); |
| shouldBe("computedStyle.animationDelay", "'0s'"); |
| shouldBe("style.webkitAnimationDelay", "''"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| |
| style.animationDelay = "20%"; |
| shouldBe("style.animationDelay", "''"); |
| shouldBe("computedStyle.animationDelay", "'0s'"); |
| shouldBe("style.webkitAnimationDelay", "''"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| |
| style.animationDelay = "0s, 20px"; |
| shouldBe("style.animationDelay", "''"); |
| shouldBe("computedStyle.animationDelay", "'0s'"); |
| shouldBe("style.webkitAnimationDelay", "''"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'0s'"); |
| |
| debug("Valid animation-iteration-count values."); |
| // Initial test. |
| shouldBe("computedStyle.animationIterationCount", "'1'"); |
| shouldBe("computedStyle.webkitAnimationIterationCount", "'1'"); |
| |
| style.animationIterationCount = "4"; |
| shouldNotBe("Object.keys(style).indexOf('animationIterationCount')", "-1"); |
| shouldBe("Object.keys(style).indexOf('webkitAnimationIterationCount')", "-1"); |
| shouldBe("style.animationIterationCount", "'4'"); |
| shouldBe("computedStyle.animationIterationCount", "'4'"); |
| shouldBe("style.webkitAnimationIterationCount", "'4'"); |
| shouldBe("computedStyle.webkitAnimationIterationCount", "'4'"); |
| |
| style.animationIterationCount = "2.5"; |
| shouldBe("style.animationIterationCount", "'2.5'"); |
| shouldBe("computedStyle.animationIterationCount", "'2.5'"); |
| shouldBe("style.webkitAnimationIterationCount", "'2.5'"); |
| shouldBe("computedStyle.webkitAnimationIterationCount", "'2.5'"); |
| |
| style.animationIterationCount = "infinite"; |
| shouldBe("style.animationIterationCount", "'infinite'"); |
| shouldBe("computedStyle.animationIterationCount", "'infinite'"); |
| shouldBe("style.webkitAnimationIterationCount", "'infinite'"); |
| shouldBe("computedStyle.webkitAnimationIterationCount", "'infinite'"); |
| |
| style.animationIterationCount = "infinite, 3"; |
| shouldBe("style.animationIterationCount", "'infinite, 3'"); |
| shouldBe("computedStyle.animationIterationCount", "'infinite, 3'"); |
| shouldBe("style.webkitAnimationIterationCount", "'infinite, 3'"); |
| shouldBe("computedStyle.webkitAnimationIterationCount", "'infinite, 3'"); |
| |
| style.animationIterationCount = "0"; |
| shouldBe("style.animationIterationCount", "'0'"); |
| shouldBe("computedStyle.animationIterationCount", "'0'"); |
| shouldBe("style.webkitAnimationIterationCount", "'0'"); |
| shouldBe("computedStyle.webkitAnimationIterationCount", "'0'"); |
| |
| style.animationIterationCount = "infinite, infinite"; |
| shouldBe("style.animationIterationCount", "'infinite, infinite'"); |
| shouldBe("computedStyle.animationIterationCount", "'infinite, infinite'"); |
| shouldBe("style.webkitAnimationIterationCount", "'infinite, infinite'"); |
| shouldBe("computedStyle.webkitAnimationIterationCount", "'infinite, infinite'"); |
| |
| debug("Invalid animation-iteration-count values."); |
| style.animationIterationCount = ""; |
| |
| style.animationIterationCount = "none"; |
| shouldBe("style.animationIterationCount", "''"); |
| shouldBe("computedStyle.animationIterationCount", "'1'"); |
| shouldBe("style.webkitAnimationIterationCount", "''"); |
| shouldBe("computedStyle.webkitAnimationIterationCount", "'1'"); |
| |
| style.animationIterationCount = "-3"; |
| shouldBe("style.animationIterationCount", "''"); |
| shouldBe("computedStyle.animationIterationCount", "'1'"); |
| shouldBe("style.webkitAnimationIterationCount", "''"); |
| shouldBe("computedStyle.webkitAnimationIterationCount", "'1'"); |
| |
| style.animationIterationCount = "infinite, -3"; |
| shouldBe("style.animationIterationCount", "''"); |
| shouldBe("computedStyle.animationIterationCount", "'1'"); |
| shouldBe("style.webkitAnimationIterationCount", "''"); |
| shouldBe("computedStyle.webkitAnimationIterationCount", "'1'"); |
| |
| style.animationIterationCount = "solid"; |
| shouldBe("style.animationIterationCount", "''"); |
| shouldBe("computedStyle.animationIterationCount", "'1'"); |
| shouldBe("style.webkitAnimationIterationCount", "''"); |
| shouldBe("computedStyle.webkitAnimationIterationCount", "'1'"); |
| |
| style.animationIterationCount = "-1, infinite"; |
| shouldBe("style.animationIterationCount", "''"); |
| shouldBe("computedStyle.animationIterationCount", "'1'"); |
| shouldBe("style.webkitAnimationIterationCount", "''"); |
| shouldBe("computedStyle.webkitAnimationIterationCount", "'1'"); |
| |
| style.animationIterationCount = "-1, 3"; |
| shouldBe("style.animationIterationCount", "''"); |
| shouldBe("computedStyle.animationIterationCount", "'1'"); |
| shouldBe("style.webkitAnimationIterationCount", "''"); |
| shouldBe("computedStyle.webkitAnimationIterationCount", "'1'"); |
| |
| debug("Valid animation-direction values."); |
| // Initial test. |
| shouldBe("computedStyle.animationDirection", "'normal'"); |
| shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| |
| style.animationDirection = "reverse"; |
| shouldNotBe("Object.keys(style).indexOf('animationDirection')", "-1"); |
| shouldBe("Object.keys(style).indexOf('webkitAnimationDirection')", "-1"); |
| shouldBe("style.animationDirection", "'reverse'"); |
| shouldBe("computedStyle.animationDirection", "'reverse'"); |
| shouldBe("style.webkitAnimationDirection", "'reverse'"); |
| shouldBe("computedStyle.webkitAnimationDirection", "'reverse'"); |
| |
| style.animationDirection = "normal"; |
| shouldBe("style.animationDirection", "'normal'"); |
| shouldBe("computedStyle.animationDirection", "'normal'"); |
| shouldBe("style.webkitAnimationDirection", "'normal'"); |
| shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| |
| style.animationDirection = "normal, alternate"; |
| shouldBe("style.animationDirection", "'normal, alternate'"); |
| shouldBe("computedStyle.animationDirection", "'normal, alternate'"); |
| shouldBe("style.webkitAnimationDirection", "'normal, alternate'"); |
| shouldBe("computedStyle.webkitAnimationDirection", "'normal, alternate'"); |
| |
| style.animationDirection = "alternate"; |
| shouldBe("style.animationDirection", "'alternate'"); |
| shouldBe("computedStyle.animationDirection", "'alternate'"); |
| shouldBe("style.webkitAnimationDirection", "'alternate'"); |
| shouldBe("computedStyle.webkitAnimationDirection", "'alternate'"); |
| |
| style.animationDirection = "alternate-reverse"; |
| shouldBe("style.animationDirection", "'alternate-reverse'"); |
| shouldBe("computedStyle.animationDirection", "'alternate-reverse'"); |
| shouldBe("style.webkitAnimationDirection", "'alternate-reverse'"); |
| shouldBe("computedStyle.webkitAnimationDirection", "'alternate-reverse'"); |
| |
| debug("Invalid animation-direction values."); |
| style.animationDirection = ""; |
| |
| style.animationDirection = "solid"; |
| shouldBe("style.animationDirection", "''"); |
| shouldBe("computedStyle.animationDirection", "'normal'"); |
| shouldBe("style.webkitAnimationDirection", "''"); |
| shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| |
| style.animationDirection = "0"; |
| shouldBe("style.animationDirection", "''"); |
| shouldBe("computedStyle.animationDirection", "'normal'"); |
| shouldBe("style.webkitAnimationDirection", "''"); |
| shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| |
| style.animationDirection = "3px"; |
| shouldBe("style.animationDirection", "''"); |
| shouldBe("computedStyle.animationDirection", "'normal'"); |
| shouldBe("style.webkitAnimationDirection", "''"); |
| shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| |
| style.animationDirection = "alternate-normal"; |
| shouldBe("style.animationDirection", "''"); |
| shouldBe("computedStyle.animationDirection", "'normal'"); |
| shouldBe("style.webkitAnimationDirection", "''"); |
| shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| |
| style.animationDirection = "3.5"; |
| shouldBe("style.animationDirection", "''"); |
| shouldBe("computedStyle.animationDirection", "'normal'"); |
| shouldBe("style.webkitAnimationDirection", "''"); |
| shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| |
| style.animationDirection = "3.5, reverse"; |
| shouldBe("style.animationDirection", "''"); |
| shouldBe("computedStyle.animationDirection", "'normal'"); |
| shouldBe("style.webkitAnimationDirection", "''"); |
| shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| |
| style.animationDirection = "reverse, solid"; |
| shouldBe("style.animationDirection", "''"); |
| shouldBe("computedStyle.animationDirection", "'normal'"); |
| shouldBe("style.webkitAnimationDirection", "''"); |
| shouldBe("computedStyle.webkitAnimationDirection", "'normal'"); |
| |
| debug("Valid animation-play-state values."); |
| // Initial test. |
| shouldBe("computedStyle.animationPlayState", "'running'"); |
| shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| |
| style.animationPlayState = "paused"; |
| shouldNotBe("Object.keys(style).indexOf('animationPlayState')", "-1"); |
| shouldBe("Object.keys(style).indexOf('webkitAnimationPlayState')", "-1"); |
| shouldBe("style.animationPlayState", "'paused'"); |
| shouldBe("computedStyle.animationPlayState", "'paused'"); |
| shouldBe("style.webkitAnimationPlayState", "'paused'"); |
| shouldBe("computedStyle.webkitAnimationPlayState", "'paused'"); |
| |
| style.animationPlayState = "running"; |
| shouldBe("style.animationPlayState", "'running'"); |
| shouldBe("computedStyle.animationPlayState", "'running'"); |
| shouldBe("style.webkitAnimationPlayState", "'running'"); |
| shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| |
| style.animationPlayState = "running, running"; |
| shouldBe("style.animationPlayState", "'running, running'"); |
| shouldBe("computedStyle.animationPlayState", "'running, running'"); |
| shouldBe("style.webkitAnimationPlayState", "'running, running'"); |
| shouldBe("computedStyle.webkitAnimationPlayState", "'running, running'"); |
| |
| style.animationPlayState = "paused, paused"; |
| shouldBe("style.animationPlayState", "'paused, paused'"); |
| shouldBe("computedStyle.animationPlayState", "'paused, paused'"); |
| shouldBe("style.webkitAnimationPlayState", "'paused, paused'"); |
| shouldBe("computedStyle.webkitAnimationPlayState", "'paused, paused'"); |
| |
| style.animationPlayState = "paused, running"; |
| shouldBe("style.animationPlayState", "'paused, running'"); |
| shouldBe("computedStyle.animationPlayState", "'paused, running'"); |
| shouldBe("style.webkitAnimationPlayState", "'paused, running'"); |
| shouldBe("computedStyle.webkitAnimationPlayState", "'paused, running'"); |
| |
| debug("Invalid animation-play-state values."); |
| style.animationPlayState = ""; |
| |
| style.animationPlayState = "running3"; |
| shouldBe("style.animationPlayState", "''"); |
| shouldBe("computedStyle.animationPlayState", "'running'"); |
| shouldBe("style.webkitAnimationPlayState", "''"); |
| shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| |
| style.animationPlayState = "0"; |
| shouldBe("style.animationPlayState", "''"); |
| shouldBe("computedStyle.animationPlayState", "'running'"); |
| shouldBe("style.webkitAnimationPlayState", "''"); |
| shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| |
| style.animationPlayState = "solid"; |
| shouldBe("style.animationPlayState", "''"); |
| shouldBe("computedStyle.animationPlayState", "'running'"); |
| shouldBe("style.webkitAnimationPlayState", "''"); |
| shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| |
| style.animationPlayState = "20px"; |
| shouldBe("style.animationPlayState", "''"); |
| shouldBe("computedStyle.animationPlayState", "'running'"); |
| shouldBe("style.webkitAnimationPlayState", "''"); |
| shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| |
| style.animationPlayState = "all"; |
| shouldBe("style.animationPlayState", "''"); |
| shouldBe("computedStyle.animationPlayState", "'running'"); |
| shouldBe("style.webkitAnimationPlayState", "''"); |
| shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| |
| style.animationPlayState = "running, test"; |
| shouldBe("style.animationPlayState", "''"); |
| shouldBe("computedStyle.animationPlayState", "'running'"); |
| shouldBe("style.webkitAnimationPlayState", "''"); |
| shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| |
| style.animationPlayState = "all, paused"; |
| shouldBe("style.animationPlayState", "''"); |
| shouldBe("computedStyle.animationPlayState", "'running'"); |
| shouldBe("style.webkitAnimationPlayState", "''"); |
| shouldBe("computedStyle.webkitAnimationPlayState", "'running'"); |
| |
| debug("Valid animation-fill-mode values."); |
| // Initial test. |
| shouldBe("computedStyle.animationFillMode", "'none'"); |
| shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| |
| style.animationFillMode = "forwards"; |
| shouldNotBe("Object.keys(style).indexOf('animationFillMode')", "-1"); |
| shouldBe("Object.keys(style).indexOf('webkitAnimationFillMode')", "-1"); |
| shouldBe("style.animationFillMode", "'forwards'"); |
| shouldBe("computedStyle.animationFillMode", "'forwards'"); |
| shouldBe("style.webkitAnimationFillMode", "'forwards'"); |
| shouldBe("computedStyle.webkitAnimationFillMode", "'forwards'"); |
| |
| style.animationFillMode = "backwards"; |
| shouldBe("style.animationFillMode", "'backwards'"); |
| shouldBe("computedStyle.animationFillMode", "'backwards'"); |
| shouldBe("style.webkitAnimationFillMode", "'backwards'"); |
| shouldBe("computedStyle.webkitAnimationFillMode", "'backwards'"); |
| |
| style.animationFillMode = "both"; |
| shouldBe("style.animationFillMode", "'both'"); |
| shouldBe("computedStyle.animationFillMode", "'both'"); |
| shouldBe("style.webkitAnimationFillMode", "'both'"); |
| shouldBe("computedStyle.webkitAnimationFillMode", "'both'"); |
| |
| style.animationFillMode = "none"; |
| shouldBe("style.animationFillMode", "'none'"); |
| shouldBe("computedStyle.animationFillMode", "'none'"); |
| shouldBe("style.webkitAnimationFillMode", "'none'"); |
| shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| |
| style.animationFillMode = "none, both"; |
| shouldBe("style.animationFillMode", "'none, both'"); |
| shouldBe("computedStyle.animationFillMode", "'none, both'"); |
| shouldBe("style.webkitAnimationFillMode", "'none, both'"); |
| shouldBe("computedStyle.webkitAnimationFillMode", "'none, both'"); |
| |
| style.animationFillMode = "backwards, forwards"; |
| shouldBe("style.animationFillMode", "'backwards, forwards'"); |
| shouldBe("computedStyle.animationFillMode", "'backwards, forwards'"); |
| shouldBe("style.webkitAnimationFillMode", "'backwards, forwards'"); |
| shouldBe("computedStyle.webkitAnimationFillMode", "'backwards, forwards'"); |
| |
| debug("Invalid animation-fill-mode values."); |
| style.animationFillMode = ""; |
| |
| style.animationFillMode = "foo"; |
| shouldBe("style.animationFillMode", "''"); |
| shouldBe("computedStyle.animationFillMode", "'none'"); |
| shouldBe("style.webkitAnimationFillMode", "''"); |
| shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| |
| style.animationFillMode = "0"; |
| shouldBe("style.animationFillMode", "''"); |
| shouldBe("computedStyle.animationFillMode", "'none'"); |
| shouldBe("style.webkitAnimationFillMode", "''"); |
| shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| |
| style.animationFillMode = "-"; |
| shouldBe("style.animationFillMode", "''"); |
| shouldBe("computedStyle.animationFillMode", "'none'"); |
| shouldBe("style.webkitAnimationFillMode", "''"); |
| shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| |
| style.animationFillMode = "3px"; |
| shouldBe("style.animationFillMode", "''"); |
| shouldBe("computedStyle.animationFillMode", "'none'"); |
| shouldBe("style.webkitAnimationFillMode", "''"); |
| shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| |
| style.animationFillMode = "backwards, test"; |
| shouldBe("style.animationFillMode", "''"); |
| shouldBe("computedStyle.animationFillMode", "'none'"); |
| shouldBe("style.webkitAnimationFillMode", "''"); |
| shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| |
| style.animationFillMode = "test, all"; |
| shouldBe("style.animationFillMode", "''"); |
| shouldBe("computedStyle.animationFillMode", "'none'"); |
| shouldBe("style.webkitAnimationFillMode", "''"); |
| shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| |
| style.animationFillMode = "test, none"; |
| shouldBe("style.animationFillMode", "''"); |
| shouldBe("computedStyle.animationFillMode", "'none'"); |
| shouldBe("style.webkitAnimationFillMode", "''"); |
| shouldBe("computedStyle.webkitAnimationFillMode", "'none'"); |
| |
| style.animationFillMode = "forwards,"; |
| shouldBe("style.animationFillMode", "''"); |
| |
| debug("Valid animation shorthand values."); |
| style.animation = ""; |
| // Initial test. |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'"); |
| |
| style.animation = "myShorthandAnim"; |
| shouldNotBe("Object.keys(style).indexOf('animation')", "-1"); |
| shouldBe("Object.keys(style).indexOf('webkitAnimation')", "-1"); |
| shouldBe("style.animation", "'myShorthandAnim'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 0s ease 0s 1 normal none running'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "none"; |
| shouldNotBe("Object.keys(style).indexOf('animation')", "-1"); |
| shouldBe("Object.keys(style).indexOf('webkitAnimation')", "-1"); |
| shouldBe("style.animation", "'none'"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'none'"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "none 20s"; |
| shouldBe("style.animation", "'20s none'"); |
| shouldBe("computedStyle.animation", "'none 20s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'20s none'"); |
| shouldBe("computedStyle.webkitAnimation", "'none 20s ease 0s 1 normal none running'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim none 20s"; |
| shouldBe("style.animation", "'myShorthandAnim 20s none'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s none'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease 0s 1 normal none running'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim ease-in none 20s"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in none'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in none'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 0s 1 normal none running'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim ease-in 20s"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 0s 1 normal none running'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim ease-in 20s 10s"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 1 normal none running'"); |
| // 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.animationDuration", "'20s'"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'20s'"); |
| shouldBe("computedStyle.animationDelay", "'10s'"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'10s'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim 20s ease-in 10s"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 1 normal none running'"); |
| shouldBe("computedStyle.animationDuration", "'20s'"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'20s'"); |
| shouldBe("computedStyle.animationDelay", "'10s'"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'10s'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim paused 20s ease-in 10s"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s paused'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 1 normal none paused'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s paused'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 1 normal none paused'"); |
| shouldBe("computedStyle.animationDuration", "'20s'"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'20s'"); |
| shouldBe("computedStyle.animationDelay", "'10s'"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'10s'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim ease-in both 20s 5"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in 5 both'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 0s 5 normal both running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 5 both'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 0s 5 normal both running'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim ease-in 20s 5 backwards"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in 5 backwards'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 0s 5 normal backwards running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 5 backwards'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 0s 5 normal backwards running'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim forwards 20s 5"; |
| shouldBe("style.animation", "'myShorthandAnim 20s 5 forwards'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease 0s 5 normal forwards running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s 5 forwards'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease 0s 5 normal forwards running'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim ease-in 20s 5"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in 5'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 0s 5 normal none running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 5'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 0s 5 normal none running'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim reverse ease-in 20s 5"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in 5 reverse'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 0s 5 reverse none running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 5 reverse'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 0s 5 reverse none running'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| // FIXME : https://code.google.com/p/chromium/issues/detail?id=273092 |
| /*style.animation = "ease-in ease-out 5s"; |
| shouldBe("style.animation", "'ease-in ease-out 5s'"); |
| shouldBe("computedStyle.animation", "'ease-in 0s ease-out 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'ease-in ease-out 5s'"); |
| shouldBe("computedStyle.webkitAnimation", "'ease-in 0s ease-out 0s 1 normal none running'"); |
| shouldBe("computedStyle.animationName", "'ease-in'");*/ |
| |
| style.animation = "myShorthandAnim reverse ease-in backwards 20s 5 paused"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in 5 reverse backwards paused'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 0s 5 reverse backwards paused'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 5 reverse backwards paused'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 0s 5 reverse backwards paused'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim ease-in 20s 10s, width cubic-bezier(0.32, 0, 1, 1) 10s 20s"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 1 normal none running, width 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 1 normal none running, width 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running'"); |
| // 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.animationDuration", "'20s, 10s'"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'20s, 10s'"); |
| shouldBe("computedStyle.animationDelay", "'10s, 20s'"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'10s, 20s'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim ease-in 20s 10s paused, width cubic-bezier(0.32, 0, 1, 1) 10s 20s"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s paused, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 1 normal none paused, width 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s paused, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 1 normal none paused, width 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running'"); |
| // 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.animationDuration", "'20s, 10s'"); |
| shouldBe("computedStyle.webkitAnimationDuration", "'20s, 10s'"); |
| shouldBe("computedStyle.animationDelay", "'10s, 20s'"); |
| shouldBe("computedStyle.webkitAnimationDelay", "'10s, 20s'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim reverse ease-in 20s 10s paused, test cubic-bezier(0.32, 0, 1, 1) 10s 20s both"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s reverse paused, test 10s cubic-bezier(0.32, 0, 1, 1) 20s both'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 1 reverse none paused, test 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal both running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s reverse paused, test 10s cubic-bezier(0.32, 0, 1, 1) 20s both'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 1 reverse none paused, test 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal both running'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "none, none"; |
| shouldBe("style.animation", "'none, none'"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running, none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'none, none'"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running, none 0s ease 0s 1 normal none running'"); |
| |
| style.animation = "ease-in test 20s 10s, none"; |
| shouldBe("style.animation", "'test 20s ease-in 10s, none'"); |
| shouldBe("computedStyle.animation", "'test 20s ease-in 10s 1 normal none running, none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'test 20s ease-in 10s, none'"); |
| shouldBe("computedStyle.webkitAnimation", "'test 20s ease-in 10s 1 normal none running, none 0s ease 0s 1 normal none running'"); |
| shouldBe("computedStyle.animationName", "'test, none'"); |
| |
| style.animation = "none, ease-in test 20s 10s"; |
| shouldBe("style.animation", "'none, test 20s ease-in 10s'"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running, test 20s ease-in 10s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'none, test 20s ease-in 10s'"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running, test 20s ease-in 10s 1 normal none running'"); |
| shouldBe("computedStyle.animationName", "'none, test'"); |
| |
| style.animation = "myShorthandAnim both 20s 10s ease-in paused, myShorthandAnim ease-out 20s"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s both paused, myShorthandAnim 20s ease-out'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 1 normal both paused, myShorthandAnim 20s ease-out 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s both paused, myShorthandAnim 20s ease-out'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 1 normal both paused, myShorthandAnim 20s ease-out 0s 1 normal none running'"); |
| |
| style.animation = "myShorthandAnim ease-in 4 20s 10s backwards, myShorthandAnim2 50 ease-out 20s"; |
| shouldBe("style.animation", "'myShorthandAnim 20s ease-in 10s 4 backwards, myShorthandAnim2 20s ease-out 50'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim 20s ease-in 10s 4 normal backwards running, myShorthandAnim2 20s ease-out 0s 50 normal none running'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 4 backwards, myShorthandAnim2 20s ease-out 50'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim 20s ease-in 10s 4 normal backwards running, myShorthandAnim2 20s ease-out 0s 50 normal none running'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| style.animation = "myShorthandAnim2 reverse ease-out 20s, ease-in myShorthandAnim 20s 10s paused"; |
| shouldBe("style.animation", "'myShorthandAnim2 20s ease-out reverse, myShorthandAnim 20s ease-in 10s paused'"); |
| shouldBe("computedStyle.animation", "'myShorthandAnim2 20s ease-out 0s 1 reverse none running, myShorthandAnim 20s ease-in 10s 1 normal none paused'"); |
| shouldBe("style.webkitAnimation", "'myShorthandAnim2 20s ease-out reverse, myShorthandAnim 20s ease-in 10s paused'"); |
| shouldBe("computedStyle.webkitAnimation", "'myShorthandAnim2 20s ease-out 0s 1 reverse none running, myShorthandAnim 20s ease-in 10s 1 normal none paused'"); |
| shouldBe("checkAnimationShorthandValue()", "true"); |
| |
| debug("Invalid animation shorthand values."); |
| style.animation = ""; |
| |
| style.animation = "solid red"; |
| shouldBe("style.animation", "''"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "''"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'"); |
| |
| style.animation = "all 30s width ease-in"; |
| shouldBe("style.animation", "''"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "''"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'"); |
| |
| style.animation = "animName 30s ease-in 20s, 20px"; |
| shouldBe("style.animation", "''"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "''"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'"); |
| |
| style.animation = "test 30s ease-in 20s, step-start(2)"; |
| shouldBe("style.animation", "''"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "''"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'"); |
| |
| style.animation = "ease-in opacity 20s 10s myAnim, none"; |
| shouldBe("style.animation", "''"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "''"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'"); |
| |
| style.animation = "none, ease-in opacity 20s 10s myAnim"; |
| shouldBe("style.animation", "''"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "''"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'"); |
| |
| style.animation = ","; |
| shouldBe("style.animation", "''"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "''"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'"); |
| |
| style.animation = "running,"; |
| shouldBe("style.animation", "''"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "''"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'"); |
| |
| style.animation = ", alternate"; |
| shouldBe("style.animation", "''"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "''"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'"); |
| |
| style.animation = ", commas,"; |
| shouldBe("style.animation", "''"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "''"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'"); |
| |
| style.animation = "test,, 5s"; |
| shouldBe("style.animation", "''"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "''"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'"); |
| |
| // FIXME : https://code.google.com/p/chromium/issues/detail?id=273092 |
| /*style.animation = "ease-in ease-otu 5s"; |
| shouldBe("style.animation", "''"); |
| shouldBe("computedStyle.animation", "'none 0s ease 0s 1 normal none running'"); |
| shouldBe("style.webkitAnimation", "''"); |
| shouldBe("computedStyle.webkitAnimation", "'none 0s ease 0s 1 normal none running'");*/ |
| |
| document.body.removeChild(testContainer); |
| </script> |
| </body> |
| </html> |
