| <!DOCTYPE html> |
| <style> |
| .container { |
| position: absolute; |
| z-index: 1; |
| width: 300px; |
| height: 300px; |
| } |
| .middle { |
| /* Must be a stacking context */ |
| position: absolute; |
| z-index: 0; |
| width: 200px; |
| height: 200px; |
| overflow: hidden; |
| } |
| .inner { |
| opacity: 0; |
| transition: opacity .1s; |
| background-color: lightblue; |
| height: 100px; |
| width: 100px; |
| } |
| .sibling { |
| position: absolute; |
| top: 0px; |
| height: 300px; |
| width: 300px; |
| opacity: 0; |
| transition: opacity 0.1s; |
| transition-delay: 0.2s; |
| background-color: lightgreen; |
| } |
| |
| .loaded .inner { |
| opacity: 1; |
| } |
| .loaded .sibling { |
| opacity: 1; |
| } |
| </style> |
| <div class="container"> |
| <div class="middle"> |
| <div class="inner"></div> |
| </div> |
| </div> |
| <div class="sibling"></div> |
| <script> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| getComputedStyle(document.body).color; |
| document.body.classList.add("loaded") |
| document.querySelector(".sibling").addEventListener("transitionend", function() { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| </script> |
| This test passes if it doesn't crash. |
