src/third_party/WebKit/LayoutTests/compositing/squashing/squash-transform.html

   1 <!DOCTYPE html>
   2 <head>
   3 <style>
   4 .composited {
   5 transform: translatez(0);
   6 }
   7
   8 .box {
   9   width: 100px;
  10   height: 100px;
  11 }
  12
  13 .behind {
  14   position: absolute;
  15   z-index: 1;
  16   top: 100px;
  17   left: 100px;
  18   background-color: blue;
  19 }
  20
  21 .middle {
  22   position: absolute;
  23   z-index: 1;
  24   top: 20px;
  25   left: 20px;
  26   background-color: lime;
  27   transform: rotate(45deg);
  28 }
  29
  30 .top {
  31   position: absolute;
  32   z-index: 1;
  33   top: 180px;
  34   left: 180px;
  35   background-color: cyan;
  36 }
  37
  38 div:hover {
  39   background-color: green;
  40 }
  41
  42 </style>
  43 <script>
  44     if (window.testRunner)
  45         testRunner.dumpAsText();
  46
  47     if (window.internals)
  48         internals.settings.setLayerSquashingEnabled(true);
  49
  50     function runTest()
  51     {
  52         if (!window.internals) {
  53             alert('This test requires window.internals')
  54             return;
  55         }
  56
  57         document.body.textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  58         document.body.style.whiteSpace = 'pre';
  59     }
  60 </script>
  61 </head>
  62 <body onload="runTest()">
  63 <div class="composited box behind"></div>
  64 <div class="box middle"></div>
  65 <div class="box top"></div>
  66 </body>