| <!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 transitions properties. |
| |
| var e = document.getElementById('test'); |
| var style = e.style; |
| var computedStyle = window.getComputedStyle(e, null); |
| |
| test(() => { |
| // Initial test. |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "linear"; |
| assert_not_equals(Object.keys(style).indexOf('transitionTimingFunction'), -1); |
| assert_not_equals(Object.keys(style).indexOf('webkitTransitionTimingFunction'), -1); |
| assert_equals(style.transitionTimingFunction, 'linear'); |
| assert_equals(computedStyle.transitionTimingFunction, 'linear'); |
| assert_equals(style.webkitTransitionTimingFunction, 'linear'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'linear'); |
| |
| style.transitionTimingFunction = "ease"; |
| assert_equals(style.transitionTimingFunction, 'ease'); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, 'ease'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "ease-in"; |
| assert_equals(style.transitionTimingFunction, 'ease-in'); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease-in'); |
| assert_equals(style.webkitTransitionTimingFunction, 'ease-in'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease-in'); |
| |
| style.transitionTimingFunction = "ease-out"; |
| assert_equals(style.transitionTimingFunction, 'ease-out'); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease-out'); |
| assert_equals(style.webkitTransitionTimingFunction, 'ease-out'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease-out'); |
| |
| style.transitionTimingFunction = "ease-in-out"; |
| assert_equals(style.transitionTimingFunction, 'ease-in-out'); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease-in-out'); |
| assert_equals(style.webkitTransitionTimingFunction, 'ease-in-out'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease-in-out'); |
| |
| style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1)"; |
| assert_equals(style.transitionTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)'); |
| assert_equals(computedStyle.transitionTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)'); |
| assert_equals(style.webkitTransitionTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'cubic-bezier(0.25, 0.1, 0.25, 1)'); |
| |
| style.transitionTimingFunction = "cubic-bezier(0.1, 0, 0.23, 0.4)"; |
| assert_equals(style.transitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| assert_equals(computedStyle.transitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| assert_equals(style.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| |
| style.transitionTimingFunction = "cubic-bezier(0.1, 0, 0.23, 3)"; |
| assert_equals(style.transitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)'); |
| assert_equals(computedStyle.transitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)'); |
| assert_equals(style.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 0, 0.23, 3)'); |
| |
| style.transitionTimingFunction = "cubic-bezier(0.1, 5, 0.23, 3)"; |
| assert_equals(style.transitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)'); |
| assert_equals(computedStyle.transitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)'); |
| assert_equals(style.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 3)'); |
| |
| style.transitionTimingFunction = "cubic-bezier(0.1, 5, 0.23, 0)"; |
| assert_equals(style.transitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)'); |
| assert_equals(computedStyle.transitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)'); |
| assert_equals(style.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'cubic-bezier(0.1, 5, 0.23, 0)'); |
| |
| style.transitionTimingFunction = "cubic-bezier(0.2, 2, 0.2, -0.4)"; |
| assert_equals(style.transitionTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)'); |
| assert_equals(computedStyle.transitionTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)'); |
| assert_equals(style.webkitTransitionTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'cubic-bezier(0.2, 2, 0.2, -0.4)'); |
| |
| style.transitionTimingFunction = "cubic-bezier(0.2, -2, 0.2, 0.4)"; |
| assert_equals(style.transitionTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)'); |
| assert_equals(computedStyle.transitionTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)'); |
| assert_equals(style.webkitTransitionTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'cubic-bezier(0.2, -2, 0.2, 0.4)'); |
| |
| style.transitionTimingFunction = "step-start"; |
| assert_equals(style.transitionTimingFunction, 'step-start'); |
| assert_equals(computedStyle.transitionTimingFunction, 'step-start'); |
| assert_equals(style.webkitTransitionTimingFunction, 'step-start'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'step-start'); |
| |
| style.transitionTimingFunction = "step-end"; |
| assert_equals(style.transitionTimingFunction, 'step-end'); |
| assert_equals(computedStyle.transitionTimingFunction, 'step-end'); |
| assert_equals(style.webkitTransitionTimingFunction, 'step-end'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'step-end'); |
| |
| style.transitionTimingFunction = "steps(3)"; |
| assert_equals(style.transitionTimingFunction, 'steps(3, end)'); |
| assert_equals(computedStyle.transitionTimingFunction, 'steps(3, end)'); |
| assert_equals(style.webkitTransitionTimingFunction, 'steps(3, end)'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'steps(3, end)'); |
| |
| style.transitionTimingFunction = "steps(4, end)"; |
| assert_equals(style.transitionTimingFunction, 'steps(4, end)'); |
| assert_equals(computedStyle.transitionTimingFunction, 'steps(4, end)'); |
| assert_equals(style.webkitTransitionTimingFunction, 'steps(4, end)'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'steps(4, end)'); |
| |
| style.transitionTimingFunction = "steps(5, start)"; |
| assert_equals(style.transitionTimingFunction, 'steps(5, start)'); |
| assert_equals(computedStyle.transitionTimingFunction, 'steps(5, start)'); |
| assert_equals(style.webkitTransitionTimingFunction, 'steps(5, start)'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'steps(5, start)'); |
| |
| style.transitionTimingFunction = "frames(5)"; |
| assert_equals(style.transitionTimingFunction, 'frames(5)'); |
| assert_equals(computedStyle.transitionTimingFunction, 'frames(5)'); |
| assert_equals(style.webkitTransitionTimingFunction, 'frames(5)'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'frames(5)'); |
| |
| style.transitionProperty = "opacity, width"; |
| |
| style.transitionTimingFunction = "ease-in-out, ease-in"; |
| assert_equals(style.transitionTimingFunction, 'ease-in-out, ease-in'); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease-in-out, ease-in'); |
| assert_equals(style.webkitTransitionTimingFunction, 'ease-in-out, ease-in'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease-in-out, ease-in'); |
| |
| style.transitionTimingFunction = "ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)"; |
| assert_equals(style.transitionTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| assert_equals(style.webkitTransitionTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease-in-out, cubic-bezier(0.1, 0, 0.23, 0.4)'); |
| |
| style.transitionTimingFunction = "steps(3, start), ease-in-out"; |
| assert_equals(style.transitionTimingFunction, 'steps(3, start), ease-in-out'); |
| assert_equals(computedStyle.transitionTimingFunction, 'steps(3, start), ease-in-out'); |
| assert_equals(style.webkitTransitionTimingFunction, 'steps(3, start), ease-in-out'); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'steps(3, start), ease-in-out'); |
| }, "Valid transition-timing-function values."); |
| |
| test(() => { |
| style.transitionProperty = ""; |
| style.transitionTimingFunction = ""; |
| |
| style.transitionTimingFunction = "cubic-bezier(3, 0.1, 4, 1)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "cubic-bezier(1, 0.1, 3, 1)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "cubic-bezier(0.1, 0, 4, 0.4)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "cubic-bezier(3, 0, 4, 0.4)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "cubic-bezier(3, 0, 0.2, 0.4)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "cubic-bezier(-0.2, 0, 0.2, 0.4)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "cubic-bezier(0.2, 2, -0.2, 0.4)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "steps(5, 3)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "steps(-5, start)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "steps(5, start, end)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "step(5)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "frame(5)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "frames()"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "frames(1)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "frames(5, end)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "red"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "cubic-bezier(0.25, 0.1, 0.25, 1, 2)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| |
| style.transitionTimingFunction = "cubic-foo(0.25, 0.1, 0.25, 1)"; |
| assert_equals(style.transitionTimingFunction, ''); |
| assert_equals(computedStyle.transitionTimingFunction, 'ease'); |
| assert_equals(style.webkitTransitionTimingFunction, ''); |
| assert_equals(computedStyle.webkitTransitionTimingFunction, 'ease'); |
| }, "Invalid transition-timing-function values."); |
| </script> |
| </body> |
| </html> |