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