<style>
  .composited {
    -webkit-transform: translateZ(0);
  }
  
  img {
    background-color: black;
    width: 50px;
    height: 50px;
  }
  
  .box {
      width: 100px;
      height: 100px;
      background-color: blue;
  }
  
  .inner {
      position: relative;
      visibility: visible;
  }
  
  #layers {
      opacity: 0; /* hide from pixel result */
  }
</style>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    function dumpLayers()
    {
        if (window.testRunner) {
            document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
        }
    }
    window.addEventListener('load', dumpLayers, false);
</script>
<body>
    <div style="position: absolute; left: 0px; top: 0px; z-index: 1; " class="composited">
        <img style="position: absolute; left: 10px; top: 10px; z-index: 0;">
        <div style="position: absolute; left: 500px; top: 100px; z-index: 1; visibility: hidden;">
            stuff
            <div class="inner box"></div>
        </div>
    </div>

    <div style="position: absolute; left: 0px; top: 250px; z-index: 1; " class="composited">
        <img style="position: absolute; left: 10px; top: 10px; z-index: 0;">
        <div style="position: absolute; left: 500px; top: 100px; z-index: 1; visibility: hidden;">
            stuff
            <!-- Ideally this layer wouldn't affect the bounds of its composited ancestor. -->
            <div class="composited inner box"></div>
        </div>
    </div>

<pre id="layers">Layer tree goes here in DRT</pre>
</body>