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

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