src/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-bottom-overflow-padding.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5 <style>
   6     .group {
   7         display: inline-block;
   8         position: relative;
   9         width: 150px;
  10         height: 500px;
  11     }
  12
  13     #overflow {
  14         width: 600px;
  15         height: 400px;
  16         overflow: hidden; /* Still scrollable with JS */
  17         padding: 20px;
  18         border: 1px solid black;
  19     }
  20
  21     .spacer {
  22         float: left;
  23         width: 10px;
  24         height: 1200px;
  25     }
  26     .container {
  27         width: 100px;
  28         height: 300px;
  29         outline: 2px solid black;
  30     }
  31
  32     .box {
  33         width: 100px;
  34         height: 150px;
  35     }
  36
  37     .sticky {
  38         position: sticky;
  39         bottom: 0px;
  40         background-color: green;
  41     }
  42
  43     .indicator {
  44         position: absolute;
  45         top: 0;
  46         left: 0;
  47         background-color: red;
  48     }
  49 </style>
  50 <script>
  51     function doTest()
  52     {
  53         document.getElementById('overflow').scrollTop = 100;
  54     }
  55     window.addEventListener('load', doTest, false);
  56 </script>
  57 </head>
  58 <body>
  59     <div id="overflow">
  60         <div class="spacer"></div>
  61         <div class="group" style="top: 350px">
  62             <div class="indicator box" style="top: 0px;"></div>
  63             <div class="container">
  64                 <div class="box"></div>
  65                 <div class="sticky box"></div>
  66             </div>
  67         </div>
  68
  69         <div class="group" style="top: 250px">
  70             <div class="indicator box" style="top: 100px;"></div>
  71             <div class="container">
  72                 <div class="box"></div>
  73                 <div class="sticky box"></div>
  74             </div>
  75         </div>
  76
  77         <div class="group" style="top: 200px">
  78             <div class="indicator box" style="top: 150px;"></div>
  79             <div class="container">
  80                 <div class="box"></div>
  81                 <div class="sticky box"></div>
  82             </div>
  83         </div>
  84     </div>
  85     <div style="position: absolute; top: 500px;">
  86     This test checks that sticky positioned blocks positioned correctly in overflow with padding.
  87     There should be no red.
  88     </div>
  89 </body>
  90 </html>