src/third_party/WebKit/LayoutTests/compositing/squashing/visibility-composited-squashing.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     .set {
   6       position: absolute;
   7       top: 8px;
   8     }
   9     .box {
  10       height: 100px;
  11       width: 100px;
  12       background-color: lightblue;
  13     }
  14     .squashed {
  15       height: 40px;
  16       width: 40px;
  17       background-color: lightgreen;
  18       position: absolute;
  19       left: 16px;
  20     }
  21     .hidden {
  22       visibility: hidden;
  23     }
  24     .visible {
  25       visibility: visible;
  26     }
  27     .composited {
  28       transform: translateZ(1px);
  29     }
  30   </style>
  31   <script>
  32     if (window.testRunner) {
  33       testRunner.waitUntilDone();
  34       internals.settings.setLayerSquashingEnabled(true);
  35     }
  36     requestAnimationFrame(function() {
  37       requestAnimationFrame(function() {
  38         document.getElementById('target1').classList.add('visible');
  39         document.getElementById('target2').classList.add('visible');
  40         setTimeout(function() {
  41           if (window.testRunner)
  42             testRunner.notifyDone();
  43         });
  44       });
  45     });
  46   </script>
  47 </head>
  48 <body>
  49   <!-- This test checks that squashed RenderLayers are painted even if not all
  50        of the RenderLayers squahed into a given GraphicsLayer are visible. -->
  51   <div class="set">
  52     <div class="composited box"></div>
  53     <div class="squashed hidden" style="top: 4px"></div>
  54     <div id="target1" class="squashed hidden" style="top: 54px"></div>
  55   </div>
  56
  57   <div class="set" style="top: 116px">
  58     <div class="composited box"></div>
  59     <div id="target2" class="squashed hidden" style="top: 4px"></div>
  60     <div class="squashed hidden" style="top: 54px"></div>
  61   </div>
  62 </body>
  63 </html>