Implement sticky positioning
[WebKit-https.git] / LayoutTests / fast / css / sticky / sticky-writing-mode-vertical-lr.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5 <style>
6     body {
7         margin: 0;
8         width: 2000px;
9         overflow: hidden; /* hide scrollbars */
10     }
11     
12     .group {
13         position: relative;
14         width: 500px;
15         height: 160px;
16     }
17     
18     .container {
19         -webkit-writing-mode: vertical-lr;
20         width: 300px;
21         height: 160px;
22         border: 2px solid black;
23         margin: 10px;
24     }
25     
26     .box {
27         width: 200px;
28         height: 180px;
29     }
30
31     .sticky {
32         position: -webkit-sticky;
33         background-color: green;
34         width: 100px;
35         height: 100px;
36         left: 20px;
37         right: 20px;
38         margin: 5px;
39     }
40 </style>
41 <script>
42     function doTest()
43     {
44         window.scrollTo(100, 0);
45     }
46     window.addEventListener('load', doTest, false);
47 </script>
48 </head>
49 <body>
50     <div class="group" style="left: -100px">
51         <div class="container">Before
52             <div class="sticky box"></div>After
53         </div>
54     </div>
55
56     <div class="group" style="left: 400px">
57         <div class="container">Before
58             <div class="sticky box"></div>After
59         </div>
60     </div>
61
62     <div class="group" style="left: 800px">
63         <div class="container">Before
64             <div class="sticky box"></div>After
65         </div>
66     </div>
67 </body>
68 </html>