bounds-ignores-hidden-dynamic.html | Explore in Territory

<style>
  .composited {
    will-change: transform;
  }
  
  .box {
    width: 100px;
    height: 100px;
    background-color: blue;
  }
  
  img {
    background-color: black;
    width: 50px;
    height: 50px;
  }
  
  img.to-visible {
      visibility: hidden;
  }
  body.changed img.to-visible {
      visibility: visible;
  }

  img.to-hidden {
      visibility: visible;
  }
  body.changed img.to-hidden {
      visibility: hidden;
  }
</style>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script>
    if (window.testRunner)
        testRunner.dumpAsTextWithPixelResults();

    function doTest()
    {
        runAfterLayoutAndPaint(function() {
            document.body.classList.add('changed');
            if (window.testRunner && window.internals)
                testRunner.setCustomTextOutput(internals.layerTreeAsText(document));
        }, true);
    }
    window.addEventListener('load', doTest, false);
</script>
<body>
    <div style="position: absolute; left: 0px; top: 0px; z-index: 106; " class="composited">
        <img style="position: absolute; left: 10px; top: 10px; z-index: 0;">
        <img style="position: absolute; left: 500px; top: 200px; z-index: 0;" class="to-visible">
    </div>

    <div style="position: absolute; left: 0px; top: 250px; z-index: 106; " class="composited">
        <img style="position: absolute; left: 10px; top: 10px; z-index: 0;">
        <img style="position: absolute; left: 500px; top: 200px; z-index: 0;" class="to-hidden">
    </div>
</body>
chromium/third_party/blink/web_tests/compositing/geometry/bounds-ignores-hidden-dynamic.html
