src/third_party/WebKit/LayoutTests/fast/css/sticky/inflow-sticky.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5 <style>
   6     body {
   7         margin: 0;
   8         height: 2000px;
   9         overflow: hidden; /* hide scrollbars */
  10     }
  11
  12     .group {
  13         position: relative;
  14         width: 250px;
  15         height: 450px;
  16     }
  17
  18     .container {
  19         width: 200px;
  20         height: 600px;
  21         outline: 2px solid black;
  22     }
  23
  24     .box {
  25         width: 200px;
  26         height: 200px;
  27     }
  28
  29     .before {
  30         background-color: orange;
  31         height: 50px;
  32     }
  33
  34     .after {
  35         background-color: blue;
  36         height: 50px;
  37     }
  38     .sticky {
  39         background-color: green;
  40         position: sticky;
  41         top: 300px;
  42     }
  43 </style>
  44 <script>
  45     function doTest()
  46     {
  47         window.scrollTo(0, 100);
  48     }
  49     window.addEventListener('load', doTest, false);
  50 </script>
  51 </head>
  52 <body>
  53     <div class="group" style="top: 100px">
  54         <div class="container">
  55             <div class="before box"></div>
  56             <div class="sticky box"></div>
  57             <div class="after box"></div>
  58         </div>
  59     </div>
  60
  61 </body>
  62 </html>