Implement sticky positioning
[WebKit-https.git] / 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: -webkit-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>