| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| </head> |
| <body> |
| <div> |
| <div style="width:500px;height:500px"><div id="test">hello</div></div> |
| </div> |
| <script> |
| 'use strict'; |
| // Test the parsing and the computed style values of the animations properties. |
| |
| var e = document.getElementById('test'); |
| var style = e.style; |
| var 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); |
| } |
| |
| test(() => { |
| style.animation = ""; |
| // Test initial value. |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = "myShorthandAnim"; |
| assert_not_equals(Object.keys(style).indexOf('animation'), -1); |
| assert_not_equals(Object.keys(style).indexOf('webkitAnimation'), -1); |
| assert_equals(style.animation, '0s ease 0s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.animation, '0s ease 0s 1 normal none running myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '0s ease 0s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '0s ease 0s 1 normal none running myShorthandAnim'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "none"; |
| assert_not_equals(Object.keys(style).indexOf('animation'), -1); |
| assert_not_equals(Object.keys(style).indexOf('webkitAnimation'), -1); |
| assert_equals(style.animation, '0s ease 0s 1 normal none running none'); |
| assert_equals(computedStyle.animation, '0s ease 0s 1 normal none running none'); |
| assert_equals(style.webkitAnimation, '0s ease 0s 1 normal none running none'); |
| assert_equals(computedStyle.webkitAnimation, '0s ease 0s 1 normal none running none'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "none 20s"; |
| assert_equals(style.animation, '20s ease 0s 1 normal none running none'); |
| assert_equals(computedStyle.animation, '20s ease 0s 1 normal none running none'); |
| assert_equals(style.webkitAnimation, '20s ease 0s 1 normal none running none'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease 0s 1 normal none running none'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim none 20s"; |
| assert_equals(style.animation, '20s ease 0s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.animation, '20s ease 0s 1 normal none running myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '20s ease 0s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease 0s 1 normal none running myShorthandAnim'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim ease-in none 20s"; |
| assert_equals(style.animation, '20s ease-in 0s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.animation, '20s ease-in 0s 1 normal none running myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '20s ease-in 0s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 0s 1 normal none running myShorthandAnim'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim ease-in 20s"; |
| assert_equals(style.animation, '20s ease-in 0s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.animation, '20s ease-in 0s 1 normal none running myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '20s ease-in 0s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 0s 1 normal none running myShorthandAnim'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim ease-in 20s 10s"; |
| assert_equals(style.animation, '20s ease-in 10s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.animation, '20s ease-in 10s 1 normal none running myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '20s ease-in 10s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 normal none running myShorthandAnim'); |
| // Let's double check here the delay and duration. As stated in the spec the first value parsed |
| // is assigned to the duration. |
| assert_equals(computedStyle.animationDuration, '20s'); |
| assert_equals(computedStyle.webkitAnimationDuration, '20s'); |
| assert_equals(computedStyle.animationDelay, '10s'); |
| assert_equals(computedStyle.webkitAnimationDelay, '10s'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim 20s ease-in 10s"; |
| assert_equals(style.animation, '20s ease-in 10s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.animation, '20s ease-in 10s 1 normal none running myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '20s ease-in 10s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.animationDuration, '20s'); |
| assert_equals(computedStyle.webkitAnimationDuration, '20s'); |
| assert_equals(computedStyle.animationDelay, '10s'); |
| assert_equals(computedStyle.webkitAnimationDelay, '10s'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim paused 20s ease-in 10s"; |
| assert_equals(style.animation, '20s ease-in 10s 1 normal none paused myShorthandAnim'); |
| assert_equals(computedStyle.animation, '20s ease-in 10s 1 normal none paused myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '20s ease-in 10s 1 normal none paused myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 normal none paused myShorthandAnim'); |
| assert_equals(computedStyle.animationDuration, '20s'); |
| assert_equals(computedStyle.webkitAnimationDuration, '20s'); |
| assert_equals(computedStyle.animationDelay, '10s'); |
| assert_equals(computedStyle.webkitAnimationDelay, '10s'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim ease-in both 20s 5"; |
| assert_equals(style.animation, '20s ease-in 0s 5 normal both running myShorthandAnim'); |
| assert_equals(computedStyle.animation, '20s ease-in 0s 5 normal both running myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '20s ease-in 0s 5 normal both running myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 0s 5 normal both running myShorthandAnim'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim ease-in 20s 5 backwards"; |
| assert_equals(style.animation, '20s ease-in 0s 5 normal backwards running myShorthandAnim'); |
| assert_equals(computedStyle.animation, '20s ease-in 0s 5 normal backwards running myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '20s ease-in 0s 5 normal backwards running myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 0s 5 normal backwards running myShorthandAnim'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim forwards 20s 5"; |
| assert_equals(style.animation, '20s ease 0s 5 normal forwards running myShorthandAnim'); |
| assert_equals(computedStyle.animation, '20s ease 0s 5 normal forwards running myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '20s ease 0s 5 normal forwards running myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease 0s 5 normal forwards running myShorthandAnim'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim ease-in 20s 5"; |
| assert_equals(style.animation, '20s ease-in 0s 5 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.animation, '20s ease-in 0s 5 normal none running myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '20s ease-in 0s 5 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 0s 5 normal none running myShorthandAnim'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim reverse ease-in 20s 5"; |
| assert_equals(style.animation, '20s ease-in 0s 5 reverse none running myShorthandAnim'); |
| assert_equals(computedStyle.animation, '20s ease-in 0s 5 reverse none running myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '20s ease-in 0s 5 reverse none running myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 0s 5 reverse none running myShorthandAnim'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim reverse ease-in backwards 20s 5 paused"; |
| assert_equals(style.animation, '20s ease-in 0s 5 reverse backwards paused myShorthandAnim'); |
| assert_equals(computedStyle.animation, '20s ease-in 0s 5 reverse backwards paused myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '20s ease-in 0s 5 reverse backwards paused myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 0s 5 reverse backwards paused myShorthandAnim'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim ease-in 20s 10s, width cubic-bezier(0.32, 0, 1, 1) 10s 20s"; |
| assert_equals(style.animation, '20s ease-in 10s 1 normal none running myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width'); |
| assert_equals(computedStyle.animation, '20s ease-in 10s 1 normal none running myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width'); |
| assert_equals(style.webkitAnimation, '20s ease-in 10s 1 normal none running myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 normal none running myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width'); |
| // Let's double check here the delay and duration. As stated in the spec the first value parsed |
| // is assigned to the duration. |
| assert_equals(computedStyle.animationDuration, '20s, 10s'); |
| assert_equals(computedStyle.webkitAnimationDuration, '20s, 10s'); |
| assert_equals(computedStyle.animationDelay, '10s, 20s'); |
| assert_equals(computedStyle.webkitAnimationDelay, '10s, 20s'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim ease-in 20s 10s paused, width cubic-bezier(0.32, 0, 1, 1) 10s 20s"; |
| assert_equals(style.animation, '20s ease-in 10s 1 normal none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width'); |
| assert_equals(computedStyle.animation, '20s ease-in 10s 1 normal none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width'); |
| assert_equals(style.webkitAnimation, '20s ease-in 10s 1 normal none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 normal none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal none running width'); |
| // Let's double check here the delay and duration. As stated in the spec the first value parsed |
| // is assigned to the duration. |
| assert_equals(computedStyle.animationDuration, '20s, 10s'); |
| assert_equals(computedStyle.webkitAnimationDuration, '20s, 10s'); |
| assert_equals(computedStyle.animationDelay, '10s, 20s'); |
| assert_equals(computedStyle.webkitAnimationDelay, '10s, 20s'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim reverse ease-in 20s 10s paused, test cubic-bezier(0.32, 0, 1, 1) 10s 20s both"; |
| assert_equals(style.animation, '20s ease-in 10s 1 reverse none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal both running test'); |
| assert_equals(computedStyle.animation, '20s ease-in 10s 1 reverse none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal both running test'); |
| assert_equals(style.webkitAnimation, '20s ease-in 10s 1 reverse none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal both running test'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 reverse none paused myShorthandAnim, 10s cubic-bezier(0.32, 0, 1, 1) 20s 1 normal both running test'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "none, none"; |
| assert_equals(style.animation, '0s ease 0s 1 normal none running none, 0s ease 0s 1 normal none running none'); |
| assert_equals(computedStyle.animation, '0s ease 0s 1 normal none running none, 0s ease 0s 1 normal none running none'); |
| assert_equals(style.webkitAnimation, '0s ease 0s 1 normal none running none, 0s ease 0s 1 normal none running none'); |
| assert_equals(computedStyle.webkitAnimation, '0s ease 0s 1 normal none running none, 0s ease 0s 1 normal none running none'); |
| |
| style.animation = "ease-in test 20s 10s, none"; |
| assert_equals(style.animation, '20s ease-in 10s 1 normal none running test, 0s ease 0s 1 normal none running none'); |
| assert_equals(computedStyle.animation, '20s ease-in 10s 1 normal none running test, 0s ease 0s 1 normal none running none'); |
| assert_equals(style.webkitAnimation, '20s ease-in 10s 1 normal none running test, 0s ease 0s 1 normal none running none'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 normal none running test, 0s ease 0s 1 normal none running none'); |
| assert_equals(computedStyle.animationName, 'test, none'); |
| |
| style.animation = "none, ease-in test 20s 10s"; |
| assert_equals(style.animation, '0s ease 0s 1 normal none running none, 20s ease-in 10s 1 normal none running test'); |
| assert_equals(computedStyle.animation, '0s ease 0s 1 normal none running none, 20s ease-in 10s 1 normal none running test'); |
| assert_equals(style.webkitAnimation, '0s ease 0s 1 normal none running none, 20s ease-in 10s 1 normal none running test'); |
| assert_equals(computedStyle.webkitAnimation, '0s ease 0s 1 normal none running none, 20s ease-in 10s 1 normal none running test'); |
| assert_equals(computedStyle.animationName, 'none, test'); |
| |
| style.animation = "myShorthandAnim both 20s 10s ease-in paused, myShorthandAnim ease-out 20s"; |
| assert_equals(style.animation, '20s ease-in 10s 1 normal both paused myShorthandAnim, 20s ease-out 0s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.animation, '20s ease-in 10s 1 normal both paused myShorthandAnim, 20s ease-out 0s 1 normal none running myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '20s ease-in 10s 1 normal both paused myShorthandAnim, 20s ease-out 0s 1 normal none running myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 1 normal both paused myShorthandAnim, 20s ease-out 0s 1 normal none running myShorthandAnim'); |
| |
| style.animation = "myShorthandAnim ease-in 4 20s 10s backwards, myShorthandAnim2 50 ease-out 20s"; |
| assert_equals(style.animation, '20s ease-in 10s 4 normal backwards running myShorthandAnim, 20s ease-out 0s 50 normal none running myShorthandAnim2'); |
| assert_equals(computedStyle.animation, '20s ease-in 10s 4 normal backwards running myShorthandAnim, 20s ease-out 0s 50 normal none running myShorthandAnim2'); |
| assert_equals(style.webkitAnimation, '20s ease-in 10s 4 normal backwards running myShorthandAnim, 20s ease-out 0s 50 normal none running myShorthandAnim2'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-in 10s 4 normal backwards running myShorthandAnim, 20s ease-out 0s 50 normal none running myShorthandAnim2'); |
| assert_true(checkAnimationShorthandValue()); |
| |
| style.animation = "myShorthandAnim2 reverse ease-out 20s, ease-in myShorthandAnim 20s 10s paused"; |
| assert_equals(style.animation, '20s ease-out 0s 1 reverse none running myShorthandAnim2, 20s ease-in 10s 1 normal none paused myShorthandAnim'); |
| assert_equals(computedStyle.animation, '20s ease-out 0s 1 reverse none running myShorthandAnim2, 20s ease-in 10s 1 normal none paused myShorthandAnim'); |
| assert_equals(style.webkitAnimation, '20s ease-out 0s 1 reverse none running myShorthandAnim2, 20s ease-in 10s 1 normal none paused myShorthandAnim'); |
| assert_equals(computedStyle.webkitAnimation, '20s ease-out 0s 1 reverse none running myShorthandAnim2, 20s ease-in 10s 1 normal none paused myShorthandAnim'); |
| assert_true(checkAnimationShorthandValue()); |
| }, "Valid animation shorthand values."); |
| |
| test(() => { |
| style.animation = ""; |
| |
| style.animation = "solid red"; |
| assert_equals(style.animation, ''); |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(style.webkitAnimation, ''); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = "all 30s width ease-in"; |
| assert_equals(style.animation, ''); |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(style.webkitAnimation, ''); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = "animName 30s ease-in 20s, 20px"; |
| assert_equals(style.animation, ''); |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(style.webkitAnimation, ''); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = "test 30s ease-in 20s, step-start(2)"; |
| assert_equals(style.animation, ''); |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(style.webkitAnimation, ''); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = "ease-in opacity 20s 10s myAnim, none"; |
| assert_equals(style.animation, ''); |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(style.webkitAnimation, ''); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = "none, ease-in opacity 20s 10s myAnim"; |
| assert_equals(style.animation, ''); |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(style.webkitAnimation, ''); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = ","; |
| assert_equals(style.animation, ''); |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(style.webkitAnimation, ''); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = "running,"; |
| assert_equals(style.animation, ''); |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(style.webkitAnimation, ''); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = ", alternate"; |
| assert_equals(style.animation, ''); |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(style.webkitAnimation, ''); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = ", commas,"; |
| assert_equals(style.animation, ''); |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(style.webkitAnimation, ''); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = "test,, 5s"; |
| assert_equals(style.animation, ''); |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(style.webkitAnimation, ''); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = "2 initial"; |
| assert_equals(style.animation, ''); |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(style.webkitAnimation, ''); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = "2 inherit"; |
| assert_equals(style.animation, ''); |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(style.webkitAnimation, ''); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = "2 unset"; |
| assert_equals(style.animation, ''); |
| assert_equals(computedStyle.animation, 'none 0s ease 0s 1 normal none running'); |
| assert_equals(style.webkitAnimation, ''); |
| assert_equals(computedStyle.webkitAnimation, 'none 0s ease 0s 1 normal none running'); |
| |
| style.animation = "2 default"; |
| assert_equals(style.animation, '0s ease 0s 2 normal none running default'); |
| assert_equals(computedStyle.animation, '0s ease 0s 2 normal none running default'); |
| assert_equals(style.webkitAnimation, '0s ease 0s 2 normal none running default'); |
| assert_equals(computedStyle.webkitAnimation, '0s ease 0s 2 normal none running default'); |
| }, "Invalid animation shorthand values."); |
| </script> |
| </body> |
| </html> |