src/third_party/WebKit/LayoutTests/compositing/squashing/squash-onto-nephew.html

   1 <!DOCTYPE html>
   2 <head>
   3 <style>
   4 .composited {
   5 -webkit-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: 15px;
  25   left: 15px;
  26   background-color: lime;
  27 }
  28
  29 .middle2 {
  30   position: absolute;
  31   z-index: 1;
  32   top: 130px;
  33   left: 60px;
  34   background-color: magenta;
  35 }
  36
  37 .top {
  38   position: absolute;
  39   z-index: 1;
  40   top: 70px;
  41   left: 120px;
  42   background-color: cyan;
  43 }
  44
  45 .container {
  46   position: absolute;
  47   z-index: 1;
  48   top: 25px;
  49   left: 25px;
  50   width: 300px;
  51   height: 300px;
  52   background-color: gray;
  53   overflow: hidden;
  54 }
  55
  56 div:hover {
  57   background-color: green;
  58 }
  59
  60 </style>
  61 <script>
  62     if (window.testRunner)
  63         testRunner.dumpAsText();
  64
  65     if (window.internals)
  66         internals.settings.setLayerSquashingEnabled(true);
  67
  68     function runTest()
  69     {
  70         if (!window.internals) {
  71             alert('This test requires window.internals')
  72             return;
  73         }
  74
  75         testRunner.display();
  76         document.body.textContent = window.internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_REPAINT_RECTS);
  77         document.body.style.whiteSpace = 'pre';
  78     }
  79 </script>
  80 </head>
  81 <body onload="runTest()">
  82   <div class="container">
  83     <div class="composited box behind"></div>
  84     <div class="box middle"></div>
  85   </div>
  86 <div class="box middle2"></div>
  87 <div class="box top"></div>
  88 </body>