| <!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); |
| |
| test(() => { |
| // Test initial value. |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "linear"; |
| assert_not_equals(Object.keys(style).indexOf('animationTimingFunction'), -1); |
| assert_not_equals(Object.keys(style).indexOf('webkitAnimationTimingFunction'), -1); |
| assert_equals(style.animationTimingFunction, 'linear'); |
| assert_equals(computedStyle.animationTimingFunction, 'linear'); |
| assert_equals(style.webkitAnimationTimingFunction, 'linear'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'linear'); |
| |
| style.animationTimingFunction = "ease"; |
| assert_equals(style.animationTimingFunction, 'ease'); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, 'ease'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "ease-in"; |
| assert_equals(style.animationTimingFunction, 'ease-in'); |
| assert_equals(computedStyle.animationTimingFunction, 'ease-in'); |
| assert_equals(style.webkitAnimationTimingFunction, 'ease-in'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-in'); |
| |
| style.animationTimingFunction = "ease-out"; |
| assert_equals(style.animationTimingFunction, 'ease-out'); |
| assert_equals(computedStyle.animationTimingFunction, 'ease-out'); |
| assert_equals(style.webkitAnimationTimingFunction, 'ease-out'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-out'); |
| |
| style.animationTimingFunction = "ease-in-out"; |
| assert_equals(style.animationTimingFunction, 'ease-in-out'); |
| assert_equals(computedStyle.animationTimingFunction, 'ease-in-out'); |
| assert_equals(style.webkitAnimationTimingFunction, 'ease-in-out'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-in-out'); |
| |
| style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1)"; |
| assert_equals(style.animationTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)'); |
| assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)'); |
| |
| style.animationTimingFunction = "cubic-bezier(0.1, 0, 0.23, 0.4)"; |
| assert_equals(style.animationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| |
| style.animationTimingFunction = "cubic-bezier(0.1, 0, 0.23, 3)"; |
| assert_equals(style.animationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)'); |
| assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)'); |
| |
| style.animationTimingFunction = "cubic-bezier(0.1, 5, 0.23, 3)"; |
| assert_equals(style.animationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)'); |
| assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)'); |
| |
| style.animationTimingFunction = "cubic-bezier(0.1, 5, 0.23, 0)"; |
| assert_equals(style.animationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)'); |
| assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)'); |
| |
| style.animationTimingFunction = "cubic-bezier(0.2, 2, 0.2, -0.4)"; |
| assert_equals(style.animationTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)'); |
| assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)'); |
| |
| style.animationTimingFunction = "cubic-bezier(0.2, -2, 0.2, 0.4)"; |
| assert_equals(style.animationTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)'); |
| assert_equals(computedStyle.animationTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)'); |
| |
| style.animationTimingFunction = "step-start"; |
| assert_equals(style.animationTimingFunction, 'step-start'); |
| assert_equals(computedStyle.animationTimingFunction, 'steps(1, start)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'step-start'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(1, start)'); |
| |
| style.animationTimingFunction = "step-end"; |
| assert_equals(style.animationTimingFunction, 'step-end'); |
| assert_equals(computedStyle.animationTimingFunction, 'steps(1)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'step-end'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(1)'); |
| |
| style.animationTimingFunction = "steps(3)"; |
| assert_equals(style.animationTimingFunction, 'steps(3)'); |
| assert_equals(computedStyle.animationTimingFunction, 'steps(3)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'steps(3)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(3)'); |
| |
| style.animationTimingFunction = "steps(4, end)"; |
| assert_equals(style.animationTimingFunction, 'steps(4)'); |
| assert_equals(computedStyle.animationTimingFunction, 'steps(4)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'steps(4)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(4)'); |
| |
| style.animationTimingFunction = "steps(5, jump-end)"; |
| assert_equals(style.animationTimingFunction, 'steps(5)'); |
| assert_equals(computedStyle.animationTimingFunction, 'steps(5)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'steps(5)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(5)'); |
| |
| style.animationTimingFunction = "steps(6, jump-none)"; |
| assert_equals(style.animationTimingFunction, 'steps(6, jump-none)'); |
| assert_equals(computedStyle.animationTimingFunction, 'steps(6, jump-none)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'steps(6, jump-none)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(6, jump-none)'); |
| |
| style.animationTimingFunction = "steps(7, jump-both)"; |
| assert_equals(style.animationTimingFunction, 'steps(7, jump-both)'); |
| assert_equals(computedStyle.animationTimingFunction, 'steps(7, jump-both)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'steps(7, jump-both)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(7, jump-both)'); |
| |
| style.animationTimingFunction = "steps(8, jump-start)"; |
| assert_equals(style.animationTimingFunction, 'steps(8, jump-start)'); |
| assert_equals(computedStyle.animationTimingFunction, 'steps(8, jump-start)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'steps(8, jump-start)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(8, jump-start)'); |
| |
| style.animationTimingFunction = "steps(9, start)"; |
| assert_equals(style.animationTimingFunction, 'steps(9, start)'); |
| assert_equals(computedStyle.animationTimingFunction, 'steps(9, start)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'steps(9, start)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(9, start)'); |
| |
| style.animationName = "anim1, anim2"; |
| |
| style.animationTimingFunction = "ease-in-out, ease-in"; |
| assert_equals(style.animationTimingFunction, 'ease-in-out, ease-in'); |
| assert_equals(computedStyle.animationTimingFunction, 'ease-in-out, ease-in'); |
| assert_equals(style.webkitAnimationTimingFunction, 'ease-in-out, ease-in'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-in-out, ease-in'); |
| |
| style.animationTimingFunction = "ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)"; |
| assert_equals(style.animationTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| assert_equals(computedStyle.animationTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| assert_equals(style.webkitAnimationTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| |
| style.animationTimingFunction = "steps(3, start), ease-in-out"; |
| assert_equals(style.animationTimingFunction, 'steps(3, start), ease-in-out'); |
| assert_equals(computedStyle.animationTimingFunction, 'steps(3, start), ease-in-out'); |
| assert_equals(style.webkitAnimationTimingFunction, 'steps(3, start), ease-in-out'); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'steps(3, start), ease-in-out'); |
| }, "Valid animation-timing-function values."); |
| |
| test(() => { |
| style.animationName = ""; |
| style.animationTimingFunction = ""; |
| |
| style.animationTimingFunction = "cubic-bezier(3, 0.1, 4, 1)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "cubic-bezier(1, 0.1, 3, 1)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "cubic-bezier(0.1, 0, 4, 0.4)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "cubic-bezier(3, 0, 4, 0.4)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "cubic-bezier(3, 0, 0.2, 0.4)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "cubic-bezier(-0.2, 0, 0.2, 0.4)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "cubic-bezier(0.2, 2, -0.2, 0.4)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "steps(5, 3)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "steps(-5, start)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "steps(5, start, end)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "step(5)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "frame(5)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "frames(1)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "frames(2, 3)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "red"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1, 2)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "cubic-foo(0.25, 0.1, 0.25, 1)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "step-middle"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| |
| style.animationTimingFunction = "steps(5, middle)"; |
| assert_equals(style.animationTimingFunction, ''); |
| assert_equals(computedStyle.animationTimingFunction, 'ease'); |
| assert_equals(style.webkitAnimationTimingFunction, ''); |
| assert_equals(computedStyle.webkitAnimationTimingFunction, 'ease'); |
| }, "Invalid animation-timing-function values."); |
| </script> |
| </body> |
| </html> |
