third_party/WebKit/LayoutTests/compositing/layer-creation/fixed-position-nonscrollable-body.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         transform: translatez(0);
  37     }
  38   </style>
  39
  40   <script type="text/javascript">
  41     if (window.internals) {
  42       window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  43     }
  44
  45     if (window.testRunner) {
  46       testRunner.dumpAsText();
  47
  48       window.addEventListener("load", function() {
  49         document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
  50       }, false);
  51     }
  52   </script>
  53 </head>
  54
  55 <body class="unscrollable">
  56   <div style="height: 4000px">
  57     <pre id="layertree"></pre>
  58   </div>
  59
  60   <!-- This should not be promoted to a composited layer, because the body is
  61        unscrollable and there is no need to composite the fixed-position layer.
  62        -->
  63   <div class="fixed lime box"></div>
  64 </body>
  65 </html>
  66