src/third_party/WebKit/LayoutTests/fast/css/sticky/inline-sticky-expected.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5 <style>
   6     body {
   7         margin: 0;
   8         font-family: 'Ahem';
   9         font-size: 24px;
  10         line-height: 2;
  11     }
  12
  13     .group {
  14         display: inline-block;
  15         position: relative;
  16         width: 220px;
  17         height: 500px;
  18     }
  19
  20     .container {
  21         width: 200px;
  22         height: 400px;
  23         outline: 2px solid black;
  24     }
  25
  26     .box {
  27         width: 200px;
  28         height: 200px;
  29     }
  30
  31     .sticky {
  32         width: 200px;
  33         height: 200px;
  34         color: blue;
  35         position: relative;
  36     }
  37
  38     .child {
  39         position: absolute;
  40         background-color: green;
  41         opacity: 0.8;
  42         top: 50px;
  43         left: 50px;
  44     }
  45
  46     .indicator {
  47         display: none;
  48         position: absolute;
  49         top: 250px;
  50         left: 50px;
  51         background-color: red;
  52     }
  53 </style>
  54 </head>
  55 <body>
  56     <div class="group" style="top: -100px">
  57         <div class="indicator box"></div>
  58         <div class="container">
  59             XXX <span class="sticky" style="top: 172px;">XXXX</br>XXXX</br>XXXX</br>XXXX</br>XXXX</span> XXX
  60         </div>
  61     </div>
  62     <div class="group" style="top: 0">
  63         <div class="indicator box"></div>
  64         <div class="container">
  65             XXX <span class="sticky" style="top: 88px;">XXXX</br>XXXX</br>XXXX</br>XXXX</br>XXXX</span> XXX
  66         </div>
  67     </div>
  68     <div class="group" style="top: 100px">
  69         <div class="indicator box"></div>
  70         <div class="container">
  71             XXX <span class="sticky" style="top: 0;">XXXX</br>XXXX</br>XXXX</br>XXXX</br>XXXX</span> XXX
  72         </div>
  73     </div>
  74
  75 </body>
  76 </html>