src/third_party/WebKit/LayoutTests/compositing/layer-creation/fixed-position-nonscrollable-body-overlap.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .fixed {
   7       position: fixed;
   8       z-index: 1;
   9     }
  10
  11     .absolute {
  12         position: absolute;
  13     }
  14
  15     .unscrollable {
  16         overflow-x: hidden;
  17         overflow-y: hidden;
  18     }
  19
  20     .box {
  21         top: 100px;
  22         left: 10px;
  23         width: 100px;
  24         height: 100px;
  25     }
  26
  27     .red {
  28         background-color: red;
  29     }
  30
  31     .lime {
  32         background-color: lime;
  33     }
  34
  35     .composited {
  36         -webkit-transform: translatez(0);
  37     }
  38   </style>
  39
  40   <script type="text/javascript">
  41     if (window.internals)
  42       window.internals.settings.setAcceleratedCompositingForFixedPositionEnabled(true);
  43
  44     if (window.testRunner) {
  45       testRunner.dumpAsText();
  46
  47       window.addEventListener("load", function() {
  48         document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
  49       }, false);
  50     }
  51   </script>
  52 </head>
  53
  54 <body class="unscrollable">
  55   <div style="height: 4000px">
  56     <p>Even though we can opt-out of fixed-position compositing for
  57        unscrollable fixed-position containers, we still need to composite
  58        fixed-position layers that need compositing for other reasons such as
  59        overlap.</p>
  60     <pre id="layertree"></pre>
  61   </div>
  62
  63   <div class="absolute composited red box"></div>
  64
  65   <!-- This should be composited because it overlaps a composited layer. -->
  66   <div class="fixed lime box"></div>
  67 </body>
  68 </html>
  69