invisible-layers-should-not-affect-geometry.html

<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      position: absolute;
      top: 10px;
      left: 10px;
      height: 100px;
      width: 100px;
      background-color: green;
    }
    .invisible {
      height: 400px;
      width: 400px;
      position: absolute;
      visibility: hidden;
      background-color: red;
    }
    .composited {
      will-change: transform;
    }
  </style>
  <script>
    if (window.testRunner)
      testRunner.dumpAsText();
    function runTest() {
      if (window.internals) {
        var pre = document.createElement('pre');
        pre.innerHTML = internals.layerTreeAsText(document);
        document.body.appendChild(pre);
      }
    }
    window.onload = runTest;
  </script>
</head>
<body>
  <!-- 
  The invisible layer should have no effect on the geometry of the
  composited layers. If you see a rect with dimensions 400x400, that means
  that the invisible layer has been included and things are broken.
  -->
  <div class="composited box"></div>
  <div class="box"></div>
  <div class="invisible">
    <div class="box"></div>
  </div>
</body>
</html>

chromium/third_party/blink/web_tests/compositing/squashing/invisible-layers-should-not-affect-geometry.html