src/third_party/WebKit/LayoutTests/compositing/layer-creation/fixed-position-out-of-view.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     .fixed {
   7       position: fixed;
   8       width: 10px;
   9       height: 10px;
  10       background-color: silver;
  11     }
  12   </style>
  13
  14   <script type="text/javascript">
  15     if (window.internals)
  16       window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  17
  18     if (window.testRunner) {
  19       testRunner.dumpAsText();
  20
  21       window.addEventListener("load", function() {
  22         document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
  23       }, false);
  24     }
  25   </script>
  26 </head>
  27
  28 <body>
  29   <div style="height: 1000px">
  30     <pre id="layertree"></pre>
  31   </div>
  32
  33   <!-- Neither of the following elements gets its own layer. -->
  34   <div class="fixed" style="z-index: -1"></div>
  35   <div class="fixed" style="z-index: -1; top: -100px"></div>
  36   <div class="fixed" style="z-index: -1; top: 0px; left: 1000px"></div>
  37
  38   <!-- This element gets its own layer because it intersects with the viewport. -->
  39   <div class="fixed" style="z-index: -1; top: 0px; left: 0px"></div>
  40 </body>
  41 </html>
  42