| <html> |
| <head> |
| <style> |
| .box { |
| position: relative; |
| left: 0; |
| height: 100px; |
| width: 100px; |
| margin: 10px; |
| background-color: blue; |
| } |
| .transition { |
| transition-property: left; |
| transition-duration: 2s; |
| } |
| #box4 { |
| transition-property: inherit; |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| var kExpecteds = [ |
| 'all', /* box1 */ |
| 'left', /* box2 */ |
| 'left', /* box3 */ |
| 'left', /* box4 */ /* inherits from box3 */ |
| 'left', /* box5 */ |
| 'all', /* box6 */ /* does NOT inherit */ |
| ]; |
| |
| function testProperties() |
| { |
| var result = ''; |
| |
| var boxes = document.body.getElementsByClassName('box'); |
| for (var i = 0; i < boxes.length; ++i) { |
| var curBox = boxes[i]; |
| var curProp = getComputedStyle(curBox).transitionProperty; |
| if (curProp == kExpecteds[i]) |
| result += "PASS: "; |
| else |
| result += "FAIL: "; |
| result += "Box " + (i + 1) + " computed transition-property: " + curProp + ", expected: " + kExpecteds[i] + "<br>"; |
| } |
| |
| document.body.removeChild(document.getElementById('container')); |
| document.getElementById('result').innerHTML = result; |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| |
| } |
| |
| window.addEventListener('load', testProperties, false); |
| </script> |
| </head> |
| <body> |
| <p>Tests inheritance of transition-property. |
| <div id="container"> |
| <div id="box1" class="box"></div> |
| <div id="box2" class="box transition"></div> |
| <div id="box3" class="box transition"> |
| <div id="box4" class="box"></div> |
| </div> |
| <div id="box5" class="box transition"> |
| <div id="box6" class="box"></div> |
| </div> |
| </div> |
| |
| <div id="result"></div> |
| |
| </body> |
| </html> |
