| <html> |
| <head> |
| <style> |
| #parent1 { |
| -webkit-transition-property: none; |
| -webkit-transition-delay: 1s; |
| -webkit-transition-duration: 2s; |
| -webkit-transition-timing-function: linear; |
| } |
| #child1 { |
| -webkit-transition-property: right; |
| -webkit-transition-delay: inherit; |
| -webkit-transition-duration: inherit; |
| -webkit-transition-timing-function: inherit; |
| } |
| #parent2 { |
| -webkit-transition-property: all; |
| -webkit-transition-delay: 3s; |
| -webkit-transition-duration: 4s; |
| -webkit-transition-timing-function: ease-out; |
| } |
| #child2 { |
| -webkit-transition-property: none; |
| -webkit-transition-delay: inherit; |
| -webkit-transition-duration: inherit; |
| -webkit-transition-timing-function: inherit; |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| var result = ''; |
| |
| function testValue(name, actual, expected) { |
| if (actual == expected) |
| result += "PASS: "; |
| else |
| result += "FAIL: "; |
| result += "Computed transition-" + name + ": " + actual + ", expected: " + expected + "<br>"; |
| } |
| |
| function testProperties() |
| { |
| var style = getComputedStyle(document.getElementById('child1')); |
| testValue('property', style.webkitTransitionProperty, 'right'); |
| testValue('delay', style.webkitTransitionDelay, '1s'); |
| testValue('duration', style.webkitTransitionDuration, '2s'); |
| testValue('timing-function', style.webkitTransitionTimingFunction, 'linear'); |
| |
| style = getComputedStyle(document.getElementById('child2')); |
| testValue('property', style.webkitTransitionProperty, 'none'); |
| testValue('delay', style.webkitTransitionDelay, '3s'); |
| testValue('duration', style.webkitTransitionDuration, '4s'); |
| testValue('timing-function', style.webkitTransitionTimingFunction, 'ease-out'); |
| |
| document.getElementById('result').innerHTML = result; |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| window.addEventListener('load', testProperties, false); |
| </script> |
| </head> |
| <body> |
| <p>Tests that transition-property is not affected by inheritance of other transition properties. |
| <div id="parent1"> |
| <div class="child" id="child1"></div> |
| </div> |
| <div id="parent2"> |
| <div class="child" id="child2"></div> |
| </div> |
| |
| <div id="result"></div> |
| |
| </body> |
| </html> |
