bounds-ignores-hidden-composited-descendant.html

<style>
  .composited {
    will-change: transform;
  }
  
  img {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 0;
    background-color: black;
    width: 50px;
    height: 50px;
  }

  .stuff {
    height: 20px;
  }

  .outer {
    position: absolute;
    left: 500px;
    top: 100px;
    z-index: 1;
    visibility: hidden;
  }

  .inner {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    visibility: visible;
  }
</style>
<script>
    function dumpLayers()
    {
        if (window.testRunner)
            testRunner.setCustomTextOutput(internals.layerTreeAsText(document));
    }
    window.addEventListener('load', dumpLayers, false);
</script>
<body>
    <div style="position: absolute; left: 0px; top: 0px; z-index: 1; " class="composited">
        <img>
        <div class="outer">
            <div class="stuff">stuff</div>
            <div class="inner"></div>
        </div>
    </div>

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

chromium/third_party/blink/web_tests/compositing/geometry/bounds-ignores-hidden-composited-descendant.html