src/third_party/WebKit/LayoutTests/compositing/absolute-position-changed-with-composited-parent-layer.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <style>
   5         html { overflow: hidden; }
   6         body { margin: 0px; }
   7         div { height: 100px; width: 100px; }
   8         .fixed { position: fixed; }
   9         .absolute { position: absolute; }
  10         .green { background-color: green; }
  11         .red { background-color: red; }
  12         .composited { transform: translateZ(0); }
  13     </style>
  14     <script type="text/javascript">
  15         if (window.testRunner)
  16             testRunner.dumpAsTextWithPixelResults();
  17         function moveAbsoluteDiv()
  18         {
  19             document.getElementById('absoluteDiv').style.top = '700px';
  20         }
  21         window.addEventListener('load', moveAbsoluteDiv, false);
  22     </script>
  23 </head>
  24 <body style="height:2000px;">
  25     <!-- You should see 1 green rectangle in the output and no red. -->
  26     <div style="top: 200px; left: 100px;" class="fixed red"></div>
  27     <div class="composited"><div id="absoluteDiv" style="top: 500px; left:100px;" class="absolute green"></div></div></div>
  28     <script>
  29         window.scrollTo(0, 500);
  30     </script>
  31 </body>
  32 </html>