third_party/WebKit/LayoutTests/compositing/will-change/containing-block-creation.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     #willChangeTop {
   6       will-change: top;
   7       position: absolute;
   8       left: 200px;
   9       top: 100px;
  10       width: 100px;
  11       height: 100px;
  12       background-color: blue;
  13       color: white;
  14     }
  15
  16     #willChangeTransform {
  17       will-change: -webkit-transform;
  18       position: absolute;
  19       left: 200px;
  20       top: 300px;
  21       width: 100px;
  22       height: 100px;
  23       background-color: blue;
  24       color: white;
  25     }
  26
  27     .fixed {
  28       position: fixed;
  29       left: 50px;
  30       top: 50px;
  31       width: 75px;
  32       height: 75px;
  33       background-color: green
  34     }
  35   </style>
  36 </head>
  37
  38 <body>
  39   This test verifies that "will-change: -webkit-transform" creates a containing
  40   block for fixed position descendants, and that other values of will-change do
  41   not create such a containing block.
  42   <div id="willChangeTop">
  43     will-change: top
  44     <div class="fixed"></div>
  45   </div>
  46   <div id="willChangeTransform">
  47     will-change: -webkit-transform
  48     <div class="fixed"></div>
  49   </div>
  50 </body>
  51
  52 </html>