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

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