third_party/WebKit/LayoutTests/compositing/fixed-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         .green { background-color: green; }
   9         .red { background-color: red; }
  10         .composited { transform: translateZ(0); }
  11     </style>
  12     <script type="text/javascript">
  13         if (window.testRunner)
  14             testRunner.dumpAsTextWithPixelResults();
  15         function moveFixedDiv()
  16         {
  17             document.getElementById('fixedDiv').style.top = '200px';
  18         }
  19         window.addEventListener('load', moveFixedDiv, false);
  20     </script>
  21 </head>
  22 <body style="height:2000px;">
  23     <!-- You should see 1 green rectangle in the output and no red. -->
  24     <div style="top: 200px; left: 100px;" class="fixed red"></div>
  25     <div id="fixedDiv" style="top: 500px; left:100px;" class="fixed green composited"></div></div>
  26 </body>
  27 </html>