<!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.