third_party/WebKit/LayoutTests/compositing/layer-creation/fixed-position-scroll.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <style type="text/css">
   5       .absolute {
   6         background-color: green;
   7         height: 96px;
   8         position: absolute;
   9         top: 0;
  10         left: 0;
  11         width: 100%;
  12         z-index: 2;
  13       }
  14
  15       .fixed {
  16         background-color: red;
  17         height: 32px;
  18         position: fixed;
  19         top: 0;
  20         left: 0;
  21         width: 100%;
  22         z-index: 1;
  23       }
  24
  25       .transformed {
  26         background-color: #6d6d6d;
  27         padding-top: 24px;
  28         margin: 64px 0px 1920px 0px;
  29         width: 100%;
  30         height: 40px;
  31         transform: translateZ(0);
  32       }
  33     </style>
  34     <script src="../../resources/run-after-layout-and-paint.js"></script>
  35     <script type="text/javascript" charset="utf-8">
  36       if (window.testRunner) {
  37         testRunner.dumpAsTextWithPixelResults();
  38         testRunner.waitUntilDone();
  39       }
  40
  41       function doTest()
  42       {
  43         window.scrollBy(0,-2048);
  44         window.scrollBy(0,160);
  45         runAfterLayoutAndPaint(function() {
  46           window.scrollBy(0,-96);
  47           if (window.testRunner)
  48             testRunner.notifyDone();
  49         });
  50       }
  51       window.addEventListener('load', doTest, false);
  52     </script>
  53   </head>
  54   <body>
  55     <div class="absolute"></div>
  56     <div class="fixed"></div>
  57     <div class="transformed"></div>
  58     <p> For this test to pass, you should not see a red line when scroll position is less or equal to 64px from the top. </p>
  59   </body>
  60 </html>