| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../resources/js-test.js"></script> |
| <style> |
| #base { |
| transition-property: width; |
| transition-duration: 5s; |
| transition-timing-function: linear; |
| transition-delay: 2s; |
| } |
| |
| #inherit { |
| transition-property: inherit; |
| transition-duration: inherit; |
| transition-timing-function: inherit; |
| transition-delay: inherit; |
| } |
| |
| #initial { |
| transition-property: initial; |
| transition-duration: initial; |
| transition-timing-function: initial; |
| transition-delay: initial; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div style="width:500px;height:500px" id="base"> |
| <div id="inherit"></div> |
| <div id="initial"></div> |
| </div> |
| <script> |
| description("Test that inherit and initial works on unprefixed transitions.") |
| |
| var testContainer = document.createElement("div"); |
| document.body.appendChild(testContainer); |
| |
| e = document.getElementById('inherit'); |
| computedStyle = window.getComputedStyle(e, null); |
| |
| debug("Testing inherit."); |
| shouldBe("computedStyle.transitionProperty", "'width'"); |
| shouldBe("computedStyle.webkitTransitionProperty", "'width'"); |
| |
| shouldBe("computedStyle.transitionDuration", "'5s'"); |
| shouldBe("computedStyle.webkitTransitionDuration", "'5s'"); |
| |
| shouldBe("computedStyle.transitionTimingFunction", "'linear'"); |
| shouldBe("computedStyle.webkitTransitionTimingFunction", "'linear'"); |
| |
| shouldBe("computedStyle.transitionDelay", "'2s'"); |
| shouldBe("computedStyle.webkitTransitionDelay", "'2s'"); |
| |
| e = document.getElementById('initial'); |
| computedStyle = window.getComputedStyle(e, null); |
| debug("Testing initial."); |
| |
| shouldBe("computedStyle.transitionProperty", "'all'"); |
| shouldBe("computedStyle.webkitTransitionProperty", "'all'"); |
| |
| shouldBe("computedStyle.transitionDuration", "'0s'"); |
| shouldBe("computedStyle.webkitTransitionDuration", "'0s'"); |
| |
| shouldBe("computedStyle.transitionTimingFunction", "'ease'"); |
| shouldBe("computedStyle.webkitTransitionTimingFunction", "'ease'"); |
| |
| shouldBe("computedStyle.transitionDelay", "'0s'"); |
| shouldBe("computedStyle.webkitTransitionDelay", "'0s'"); |
| |
| document.body.removeChild(testContainer); |
| </script> |
| </body> |
| </html> |
