src/third_party/WebKit/LayoutTests/compositing/fixed-position-changed-within-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         .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 moveFixedDiv()
  17         {
  18             document.getElementById('fixedDiv').style.top = '200px';
  19         }
  20         window.addEventListener('load', moveFixedDiv, 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 class="composited"><div id="fixedDiv" style="top: 500px; left:100px;" class="fixed green"></div></div></div>
  27 </body>
  28 </html>