| <!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); |
| |
| // This function checks the return value of computedStyle.transition and verifies WebKit can parse it. |
| function checkTransitionShorthandValue() { |
| var before = computedStyle.getPropertyValue('transition'); |
| e.style.transition = ''; |
| e.style.transition = before; |
| return (computedStyle.getPropertyValue('transition') == before); |
| } |
| |
| test(() => { |
| style.transition = ""; |
| // Initial test. |
| assert_equals(computedStyle.transition, 'all 0s ease 0s'); |
| assert_equals(computedStyle.webkitTransition, 'all 0s ease 0s'); |
| |
| style.transition = "none"; |
| assert_not_equals(Object.keys(style).indexOf('transition'), -1); |
| assert_not_equals(Object.keys(style).indexOf('webkitTransition'), -1); |
| assert_equals(style.transition, 'none 0s ease 0s'); |
| assert_equals(computedStyle.transition, 'none 0s ease 0s'); |
| assert_equals(style.webkitTransition, 'none 0s ease 0s'); |
| assert_equals(computedStyle.webkitTransition, 'none 0s ease 0s'); |
| assert_true(checkTransitionShorthandValue()); |
| |
| style.transition = "none 20s"; |
| assert_equals(style.transition, 'none 20s ease 0s'); |
| assert_equals(computedStyle.transition, 'none 20s ease 0s'); |
| assert_equals(style.webkitTransition, 'none 20s ease 0s'); |
| assert_equals(computedStyle.webkitTransition, 'none 20s ease 0s'); |
| assert_true(checkTransitionShorthandValue()); |
| |
| style.transition = "ease-in none 20s"; |
| assert_equals(style.transition, 'none 20s ease-in 0s'); |
| assert_equals(computedStyle.transition, 'none 20s ease-in 0s'); |
| assert_equals(style.webkitTransition, 'none 20s ease-in 0s'); |
| assert_equals(computedStyle.webkitTransition, 'none 20s ease-in 0s'); |
| assert_true(checkTransitionShorthandValue()); |
| |
| style.transition = "ease-in opacity 20s"; |
| assert_equals(style.transition, 'opacity 20s ease-in 0s'); |
| assert_equals(computedStyle.transition, 'opacity 20s ease-in 0s'); |
| assert_equals(style.webkitTransition, 'opacity 20s ease-in 0s'); |
| assert_equals(computedStyle.webkitTransition, 'opacity 20s ease-in 0s'); |
| assert_true(checkTransitionShorthandValue()); |
| |
| style.transition = "ease-in opacity 20s 10s"; |
| assert_equals(style.transition, 'opacity 20s ease-in 10s'); |
| assert_equals(computedStyle.transition, 'opacity 20s ease-in 10s'); |
| assert_equals(style.webkitTransition, 'opacity 20s ease-in 10s'); |
| assert_equals(computedStyle.webkitTransition, 'opacity 20s ease-in 10s'); |
| // Let's double check here the delay and duration. As stated in the spec the first value parsed |
| // is assigned to the duration. |
| assert_equals(computedStyle.transitionDuration, '20s'); |
| assert_equals(computedStyle.webkitTransitionDuration, '20s'); |
| assert_equals(computedStyle.transitionDelay, '10s'); |
| assert_equals(computedStyle.webkitTransitionDelay, '10s'); |
| assert_true(checkTransitionShorthandValue()); |
| |
| style.transition = "20s ease-in opacity 10s"; |
| assert_equals(style.transition, 'opacity 20s ease-in 10s'); |
| assert_equals(computedStyle.transition, 'opacity 20s ease-in 10s'); |
| assert_equals(style.webkitTransition, 'opacity 20s ease-in 10s'); |
| assert_equals(computedStyle.webkitTransition, 'opacity 20s ease-in 10s'); |
| assert_equals(computedStyle.transitionDuration, '20s'); |
| assert_equals(computedStyle.webkitTransitionDuration, '20s'); |
| assert_equals(computedStyle.transitionDelay, '10s'); |
| assert_equals(computedStyle.webkitTransitionDelay, '10s'); |
| assert_true(checkTransitionShorthandValue()); |
| |
| style.transition = "ease-in opacity 20s 10s, cubic-bezier(0.32, 0, 1, 1) 10s width 20s"; |
| assert_equals(style.transition, 'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'); |
| assert_equals(computedStyle.transition, 'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'); |
| assert_equals(style.webkitTransition, 'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'); |
| assert_equals(computedStyle.webkitTransition, 'opacity 20s ease-in 10s, width 10s cubic-bezier(0.32, 0, 1, 1) 20s'); |
| // Let's double check here the delay and duration. As stated in the spec the first value parsed |
| // is assigned to the duration. |
| assert_equals(computedStyle.transitionDuration, '20s, 10s'); |
| assert_equals(computedStyle.webkitTransitionDuration, '20s, 10s'); |
| assert_equals(computedStyle.transitionDelay, '10s, 20s'); |
| assert_equals(computedStyle.webkitTransitionDelay, '10s, 20s'); |
| assert_true(checkTransitionShorthandValue()); |
| |
| style.transition = "all, all"; |
| assert_equals(style.transition, 'all 0s ease 0s, all 0s ease 0s'); |
| assert_equals(computedStyle.transition, 'all 0s ease 0s, all 0s ease 0s'); |
| assert_equals(style.webkitTransition, 'all 0s ease 0s, all 0s ease 0s'); |
| assert_equals(computedStyle.webkitTransition, 'all 0s ease 0s, all 0s ease 0s'); |
| |
| style.transition = "all 20s 10s ease-in, all ease-out 20s"; |
| assert_equals(style.transition, 'all 20s ease-in 10s, all 20s ease-out 0s'); |
| assert_equals(computedStyle.transition, 'all 20s ease-in 10s, all 20s ease-out 0s'); |
| assert_equals(style.webkitTransition, 'all 20s ease-in 10s, all 20s ease-out 0s'); |
| assert_equals(computedStyle.webkitTransition, 'all 20s ease-in 10s, all 20s ease-out 0s'); |
| |
| style.transition = "ease-in opacity 20s 10s, all ease-out 20s"; |
| assert_equals(style.transition, 'opacity 20s ease-in 10s, all 20s ease-out 0s'); |
| assert_equals(computedStyle.transition, 'opacity 20s ease-in 10s, all 20s ease-out 0s'); |
| assert_equals(style.webkitTransition, 'opacity 20s ease-in 10s, all 20s ease-out 0s'); |
| assert_equals(computedStyle.webkitTransition, 'opacity 20s ease-in 10s, all 20s ease-out 0s'); |
| assert_true(checkTransitionShorthandValue()); |
| |
| style.transition = " all ease-out 20s, ease-in opacity 20s 10s"; |
| assert_equals(style.transition, 'all 20s ease-out 0s, opacity 20s ease-in 10s'); |
| assert_equals(computedStyle.transition, 'all 20s ease-out 0s, opacity 20s ease-in 10s'); |
| assert_equals(style.webkitTransition, 'all 20s ease-out 0s, opacity 20s ease-in 10s'); |
| assert_equals(computedStyle.webkitTransition, 'all 20s ease-out 0s, opacity 20s ease-in 10s'); |
| assert_true(checkTransitionShorthandValue()); |
| }, "Valid transition shorthand values."); |
| |
| test(() => { |
| style.transition = ""; |
| |
| style.transition = "20"; |
| assert_equals(style.transition, ''); |
| assert_equals(computedStyle.transition, 'all 0s ease 0s'); |
| assert_equals(style.webkitTransition, ''); |
| assert_equals(computedStyle.webkitTransition, 'all 0s ease 0s'); |
| |
| style.transition = "20, 20"; |
| assert_equals(style.transition, ''); |
| assert_equals(computedStyle.transition, 'all 0s ease 0s'); |
| assert_equals(style.webkitTransition, ''); |
| assert_equals(computedStyle.webkitTransition, 'all 0s ease 0s'); |
| |
| style.transition = "all 30s width ease-in"; |
| assert_equals(style.transition, ''); |
| assert_equals(computedStyle.transition, 'all 0s ease 0s'); |
| assert_equals(style.webkitTransition, ''); |
| assert_equals(computedStyle.webkitTransition, 'all 0s ease 0s'); |
| |
| style.transition = "all 30s ease-in 20px"; |
| assert_equals(style.transition, ''); |
| assert_equals(computedStyle.transition, 'all 0s ease 0s'); |
| assert_equals(style.webkitTransition, ''); |
| assert_equals(computedStyle.webkitTransition, 'all 0s ease 0s'); |
| |
| style.transition = "all 30s ease-in 20s, 20px"; |
| assert_equals(style.transition, ''); |
| assert_equals(computedStyle.transition, 'all 0s ease 0s'); |
| assert_equals(style.webkitTransition, ''); |
| assert_equals(computedStyle.webkitTransition, 'all 0s ease 0s'); |
| |
| style.transition = "all 30s ease-in 20s, step-start(2)"; |
| assert_equals(style.transition, ''); |
| assert_equals(computedStyle.transition, 'all 0s ease 0s'); |
| assert_equals(style.webkitTransition, ''); |
| assert_equals(computedStyle.webkitTransition, 'all 0s ease 0s'); |
| |
| style.transition = "ease-in opacity 20s 10s, none"; |
| assert_equals(style.transition, ''); |
| assert_equals(computedStyle.transition, 'all 0s ease 0s'); |
| assert_equals(style.webkitTransition, ''); |
| assert_equals(computedStyle.webkitTransition, 'all 0s ease 0s'); |
| |
| style.transition = "none, ease-in opacity 20s 10s, none"; |
| assert_equals(style.transition, ''); |
| assert_equals(computedStyle.transition, 'all 0s ease 0s'); |
| assert_equals(style.webkitTransition, ''); |
| assert_equals(computedStyle.webkitTransition, 'all 0s ease 0s'); |
| |
| style.transition = "none, ease-in opacity 20s 10s"; |
| assert_equals(style.transition, ''); |
| assert_equals(computedStyle.transition, 'all 0s ease 0s'); |
| assert_equals(style.webkitTransition, ''); |
| assert_equals(computedStyle.webkitTransition, 'all 0s ease 0s'); |
| |
| style.transition = "ease-in opacity 20s 10s, all 20s ease-out 0s, none"; |
| assert_equals(style.transition, ''); |
| assert_equals(computedStyle.transition, 'all 0s ease 0s'); |
| assert_equals(style.webkitTransition, ''); |
| assert_equals(computedStyle.webkitTransition, 'all 0s ease 0s'); |
| |
| style.transition = "ease-in opacity 20s 10s, ease-in width 20s 10s, none"; |
| assert_equals(style.transition, ''); |
| assert_equals(computedStyle.transition, 'all 0s ease 0s'); |
| assert_equals(style.webkitTransition, ''); |
| assert_equals(computedStyle.webkitTransition, 'all 0s ease 0s'); |
| |
| style.transition = "none, none"; |
| assert_equals(style.transition, ''); |
| assert_equals(computedStyle.transition, 'all 0s ease 0s'); |
| assert_equals(style.webkitTransition, ''); |
| assert_equals(computedStyle.webkitTransition, 'all 0s ease 0s'); |
| }, "Invalid transition shorthand values."); |
| |
| test(() => { |
| style.transition = "ease-in ease-out"; |
| assert_equals(style.transitionProperty, 'ease-out'); |
| assert_equals(style.transitionTimingFunction, 'ease-in'); |
| |
| style.transition = "20s 10s"; |
| assert_equals(style.transitionDelay, '10s'); |
| assert_equals(style.transitionDuration, '20s'); |
| |
| style.transition = "-10s 10s"; |
| assert_equals(style.transitionDelay, '-10s'); |
| assert_equals(style.transitionDuration, '10s'); |
| |
| style.transition = "ease"; |
| assert_equals(style.transitionTimingFunction, 'ease'); |
| assert_equals(style.transitionProperty, 'all'); |
| }, "Ambiguous shorthand values."); |
| </script> |
| </body> |
| </html> |
