src/third_party/WebKit/LayoutTests/compositing/squashing/invisible-layers-should-not-affect-geometry.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     .box {
   6       position: absolute;
   7       top: 10px;
   8       left: 10px;
   9       height: 100px;
  10       width: 100px;
  11       background-color: green;
  12     }
  13     .invisible {
  14       height: 400px;
  15       width: 400px;
  16       position: absolute;
  17       visibility: hidden;
  18       background-color: red;
  19     }
  20     .composited {
  21       transform: translateZ(0);
  22     }
  23   </style>
  24   <script>
  25     if (window.testRunner) {
  26       testRunner.dumpAsText();
  27       internals.settings.setLayerSquashingEnabled(true);
  28     }
  29     function runTest() {
  30       if (window.internals) {
  31         var pre = document.createElement('pre');
  32         pre.innerHTML = window.internals.layerTreeAsText(document);
  33         document.body.appendChild(pre);
  34       }
  35     }
  36     window.onload = runTest;
  37   </script>
  38 </head>
  39 <body>
  40   <!--
  41   The invisible layer should have no effect on the geometry of the
  42   composited layers. If you see a rect with dimensions 400x400, that means
  43   that the invisible layer has been included and things are broken.
  44   -->
  45   <div class="composited box"></div>
  46   <div class="box"></div>
  47   <div class="invisible">
  48     <div class="box"></div>
  49   </div>
  50 </body>
  51 </html>