third_party/WebKit/LayoutTests/compositing/layer-creation/fixed-position-nonscrollable-body-mismatch-containers.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     .bigBox {
  28        width: 300px;
  29        height: 300px;
  30     }
  31
  32     .red {
  33         background-color: red;
  34     }
  35
  36     .lime {
  37         background-color: lime;
  38     }
  39
  40     .composited {
  41         transform: translatez(0);
  42     }
  43
  44     .scrollable {
  45        border: solid black 1px;
  46        overflow: scroll;
  47     }
  48   </style>
  49
  50   <script type="text/javascript">
  51     if (window.internals)
  52       window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  53
  54     if (window.testRunner) {
  55       testRunner.dumpAsText();
  56
  57       window.addEventListener("load", function() {
  58         document.getElementById("layertree").innerText = window.internals.layerTreeAsText(document);
  59       }, false);
  60     }
  61   </script>
  62 </head>
  63
  64 <body class="unscrollable">
  65   <p>Even though the fixed-position element's container is nonscrollable, it
  66     should still be composited because one of its ancestors is scrolling.</p>
  67   <pre id="layertree"></pre>
  68
  69   <div class="scrollable bigBox">
  70     <div style="height: 800px;"></div>
  71     <div class="fixed lime box"></div>
  72   </div>
  73 </body>
  74 </html>
  75