src/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-top.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         display: inline-block;
  14         position: relative;
  15         width: 250px;
  16         height: 500px;
  17     }
  18
  19     .container {
  20         width: 200px;
  21         height: 400px;
  22         outline: 2px solid black;
  23     }
  24
  25     .box {
  26         width: 200px;
  27         height: 200px;
  28     }
  29
  30     .sticky {
  31         position: sticky;
  32         top: 100px;
  33         background-color: green;
  34     }
  35
  36     .indicator {
  37         position: absolute;
  38         top: 0;
  39         left: 0;
  40         background-color: red;
  41     }
  42 </style>
  43 <script>
  44     function doTest()
  45     {
  46         window.scrollTo(0, 100);
  47     }
  48     window.addEventListener('load', doTest, false);
  49 </script>
  50 </head>
  51 <body>
  52     <div class="group">
  53         <div class="indicator box" style="top: 200px;"></div>
  54         <div class="container">
  55             <div class="sticky box"></div>
  56         </div>
  57     </div>
  58
  59     <div class="group" style="top: 100px">
  60         <div class="indicator box" style="top: 100px;"></div>
  61         <div class="container">
  62             <div class="sticky box"></div>
  63         </div>
  64     </div>
  65
  66     <div class="group" style="top: 200px">
  67         <div class="indicator box" style="top: 0;"></div>
  68         <div class="container">
  69             <div class="sticky box"></div>
  70         </div>
  71     </div>
  72 </body>
  73 </html>