src/third_party/WebKit/LayoutTests/fast/css/sticky/inline-sticky-abspos-child.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: 25px;
  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         top: 50px;
  45         left: 50px;
  46         height: 50px;
  47         width: 50px;
  48     }
  49
  50     .indicator {
  51         display: none;
  52         position: absolute;
  53         top: 250px;
  54         left: 50px;
  55         background-color: red;
  56     }
  57 </style>
  58 <script>
  59     function doTest()
  60     {
  61         window.scrollTo(0, 100);
  62     }
  63     window.addEventListener('load', doTest, false);
  64 </script>
  65 </head>
  66 <body>
  67     <div class="group">
  68         <div class="indicator box"></div>
  69         <div class="container">
  70             XXX <span class="sticky">XXXX</br>
  71             <div class="child box"></div>
  72             XXXX</br>XXXX</br>XXXX</br>XXXX</span> XXX
  73         </div>
  74     </div>
  75     <div class="group" style="top: 100px">
  76         <div class="indicator box"></div>
  77         <div class="container">
  78             XXX <span class="sticky">XXXX</br>
  79             <div class="child box"></div>
  80             XXXX</br>XXXX</br>XXXX</br>XXXX</span> XXX
  81         </div>
  82     </div>
  83     <div class="group" style="top: 200px">
  84         <div class="indicator box"></div>
  85         <div class="container">
  86             XXX <span class="sticky">XXXX</br>
  87             <div class="child box"></div>
  88             XXXX</br>XXXX</br>XXXX</br>XXXX</span> XXX
  89         </div>
  90     </div>
  91
  92 </body>
  93 </html>