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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     #container {
   6       will-change: top;
   7       position: absolute;
   8       left: 200px;
   9       top: 100px;
  10       width: 100px;
  11       height: 100px;
  12       background-color: blue;
  13     }
  14
  15     .fixed {
  16       position: fixed;
  17       left: 50px;
  18       top: 50px;
  19       width: 75px;
  20       height: 75px;
  21       background-color: green
  22     }
  23   </style>
  24   <script type="text/javascript">
  25     if (window.testRunner) {
  26       testRunner.waitUntilDone();
  27     }
  28
  29     function doTest()
  30     {
  31       if (window.internals) {
  32         window.internals.forceCompositingUpdate(document);
  33       }
  34       // Adding "will-change: -webkit-transform" to the container div should
  35       // make this div become the containing block for its fixed position
  36       // descendant.
  37       document.getElementById("container").style.willChange = "-webkit-transform";
  38       if (window.testRunner) {
  39         testRunner.notifyDone();
  40       }
  41     }
  42
  43     window.addEventListener('load', doTest, false);
  44   </script>
  45 </head>
  46
  47 <body>
  48   <div id="container">
  49     <div class="fixed"></div>
  50   </div>
  51 </body>
  52
  53 </html>