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