third_party/WebKit/LayoutTests/compositing/layer-creation/resources/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: 10px;
  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 </head>
  40
  41 <body class="unscrollable">
  42   <div style="height: 4000px">
  43     <!-- This iframe should have no additional layers, because the body is unscrollable and there is
  44          no need to composite the green fixed-position layer. -->
  45     <pre id="layertree"></pre>
  46   </div>
  47
  48   <!-- This should not be composited -->
  49   <div class="fixed lime box"></div>
  50 </body>
  51 </html>
  52