| <!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(() => { |
| // Test initial value. |
| assert_equals(computedStyle.transitionProperty, 'all'); |
| assert_equals(computedStyle.webkitTransitionProperty, 'all'); |
| |
| style.transitionProperty = "none"; |
| assert_not_equals(Object.keys(style).indexOf('transitionProperty'), -1); |
| assert_not_equals(Object.keys(style).indexOf('webkitTransitionProperty'), -1); |
| assert_equals(style.transitionProperty, 'none'); |
| assert_equals(computedStyle.transitionProperty, 'none'); |
| assert_equals(style.webkitTransitionProperty, 'none'); |
| assert_equals(computedStyle.webkitTransitionProperty, 'none'); |
| |
| style.transitionProperty = "all"; |
| assert_equals(style.transitionProperty, 'all'); |
| assert_equals(computedStyle.transitionProperty, 'all'); |
| assert_equals(style.webkitTransitionProperty, 'all'); |
| assert_equals(computedStyle.webkitTransitionProperty, 'all'); |
| |
| style.transitionProperty = "all, all"; |
| assert_equals(style.transitionProperty, 'all, all'); |
| assert_equals(computedStyle.transitionProperty, 'all, all'); |
| assert_equals(style.webkitTransitionProperty, 'all, all'); |
| assert_equals(computedStyle.webkitTransitionProperty, 'all, all'); |
| |
| style.transitionProperty = "-webkit-transform-origin"; |
| assert_equals(style.transitionProperty, '-webkit-transform-origin'); |
| assert_equals(computedStyle.transitionProperty, '-webkit-transform-origin'); |
| |
| style.transitionProperty = "background-position"; |
| assert_equals(style.transitionProperty, 'background-position'); |
| assert_equals(computedStyle.transitionProperty, 'background-position'); |
| assert_equals(style.webkitTransitionProperty, 'background-position'); |
| assert_equals(computedStyle.webkitTransitionProperty, 'background-position'); |
| |
| style.transitionProperty = "background-position, font-size"; |
| assert_equals(style.transitionProperty, 'background-position, font-size'); |
| assert_equals(computedStyle.transitionProperty, 'background-position, font-size'); |
| assert_equals(style.webkitTransitionProperty, 'background-position, font-size'); |
| assert_equals(computedStyle.webkitTransitionProperty, 'background-position, font-size'); |
| |
| style.transitionProperty = "background-position, font-size, color"; |
| assert_equals(style.transitionProperty, 'background-position, font-size, color'); |
| assert_equals(computedStyle.transitionProperty, 'background-position, font-size, color'); |
| assert_equals(style.webkitTransitionProperty, 'background-position, font-size, color'); |
| assert_equals(computedStyle.webkitTransitionProperty, 'background-position, font-size, color'); |
| |
| style.transitionProperty = "all, font-size, color"; |
| assert_equals(style.transitionProperty, 'all, font-size, color'); |
| assert_equals(computedStyle.transitionProperty, 'all, font-size, color'); |
| assert_equals(style.webkitTransitionProperty, 'all, font-size, color'); |
| assert_equals(computedStyle.webkitTransitionProperty, 'all, font-size, color'); |
| |
| style.transitionProperty = "font-size, color, all"; |
| assert_equals(style.transitionProperty, 'font-size, color, all'); |
| assert_equals(computedStyle.transitionProperty, 'font-size, color, all'); |
| assert_equals(style.webkitTransitionProperty, 'font-size, color, all'); |
| assert_equals(computedStyle.webkitTransitionProperty, 'font-size, color, all'); |
| |
| style.transitionProperty = "font-size, all, color"; |
| assert_equals(style.transitionProperty, 'font-size, all, color'); |
| assert_equals(computedStyle.transitionProperty, 'font-size, all, color'); |
| assert_equals(style.webkitTransitionProperty, 'font-size, all, color'); |
| assert_equals(computedStyle.webkitTransitionProperty, 'font-size, all, color'); |
| }, "Valid transition-property values."); |
| |
| test(() => { |
| |
| style.transitionProperty = "solid, font-size"; |
| assert_equals(style.transitionProperty, 'solid, font-size'); |
| assert_equals(computedStyle.transitionProperty, 'solid, font-size'); |
| assert_equals(style.webkitTransitionProperty, 'solid, font-size'); |
| assert_equals(computedStyle.webkitTransitionProperty, 'solid, font-size'); |
| |
| style.transitionProperty = "solid, left"; |
| assert_equals(style.transitionProperty, 'solid, left'); |
| assert_equals(computedStyle.transitionProperty, 'solid, left'); |
| assert_equals(style.webkitTransitionProperty, 'solid, left'); |
| assert_equals(computedStyle.webkitTransitionProperty, 'solid, left'); |
| |
| style.transitionProperty = "solid"; |
| assert_equals(style.transitionProperty, 'solid'); |
| assert_equals(computedStyle.transitionProperty, 'solid'); |
| assert_equals(style.webkitTransitionProperty, 'solid'); |
| assert_equals(computedStyle.webkitTransitionProperty, 'solid'); |
| |
| style.transitionProperty = "default, top"; |
| assert_equals(style.transitionProperty, 'default, top'); |
| assert_equals(computedStyle.transitionProperty, 'default, top'); |
| assert_equals(style.webkitTransitionProperty, 'default, top'); |
| assert_equals(computedStyle.webkitTransitionProperty, 'default, top'); |
| }, "Unknown transition-property values."); |
| |
| test(() => { |
| style.transitionProperty = ""; |
| |
| style.transitionProperty = "20px"; |
| assert_equals(style.transitionProperty, ''); |
| assert_equals(computedStyle.transitionProperty, 'all'); |
| assert_equals(style.webkitTransitionProperty, ''); |
| assert_equals(computedStyle.webkitTransitionProperty, 'all'); |
| |
| style.transitionProperty = "0"; |
| assert_equals(style.transitionProperty, ''); |
| assert_equals(computedStyle.transitionProperty, 'all'); |
| assert_equals(style.webkitTransitionProperty, ''); |
| assert_equals(computedStyle.webkitTransitionProperty, 'all'); |
| |
| style.transitionProperty = "'font-size'"; |
| assert_equals(style.transitionProperty, ''); |
| assert_equals(computedStyle.transitionProperty, 'all'); |
| assert_equals(style.webkitTransitionProperty, ''); |
| assert_equals(computedStyle.webkitTransitionProperty, 'all'); |
| |
| style.transitionProperty = "all none"; |
| assert_equals(style.transitionProperty, ''); |
| assert_equals(computedStyle.transitionProperty, 'all'); |
| assert_equals(style.webkitTransitionProperty, ''); |
| assert_equals(computedStyle.webkitTransitionProperty, 'all'); |
| |
| style.transitionProperty = "opacity width"; |
| assert_equals(style.transitionProperty, ''); |
| assert_equals(computedStyle.transitionProperty, 'all'); |
| assert_equals(style.webkitTransitionProperty, ''); |
| assert_equals(computedStyle.webkitTransitionProperty, 'all'); |
| |
| style.transitionProperty = "all, none"; |
| assert_equals(style.transitionProperty, ''); |
| assert_equals(computedStyle.transitionProperty, 'all'); |
| assert_equals(style.webkitTransitionProperty, ''); |
| assert_equals(computedStyle.webkitTransitionProperty, 'all'); |
| |
| style.transitionProperty = "none, none"; |
| assert_equals(style.transitionProperty, ''); |
| assert_equals(computedStyle.transitionProperty, 'all'); |
| assert_equals(style.webkitTransitionProperty, ''); |
| assert_equals(computedStyle.webkitTransitionProperty, 'all'); |
| |
| style.transitionProperty = "none, all"; |
| assert_equals(style.transitionProperty, ''); |
| assert_equals(computedStyle.transitionProperty, 'all'); |
| assert_equals(style.webkitTransitionProperty, ''); |
| assert_equals(computedStyle.webkitTransitionProperty, 'all'); |
| |
| style.transitionProperty = "width, none"; |
| assert_equals(style.transitionProperty, ''); |
| assert_equals(computedStyle.transitionProperty, 'all'); |
| assert_equals(style.webkitTransitionProperty, ''); |
| assert_equals(computedStyle.webkitTransitionProperty, 'all'); |
| |
| style.transitionProperty = "none, width"; |
| assert_equals(style.transitionProperty, ''); |
| assert_equals(computedStyle.transitionProperty, 'all'); |
| assert_equals(style.webkitTransitionProperty, ''); |
| assert_equals(computedStyle.webkitTransitionProperty, 'all'); |
| |
| style.transitionProperty = "initial, width"; |
| assert_equals(style.transitionProperty, ''); |
| style.transitionProperty = "width, inherit"; |
| assert_equals(style.transitionProperty, ''); |
| style.transitionProperty = "left, unset"; |
| assert_equals(style.transitionProperty, ''); |
| |
| style.transitionProperty = ""; |
| }, "Invalid transition-property values."); |
| </script> |
| </body> |
| </html> |
