src/third_party/WebKit/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: 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>