src/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-writing-mode-horizontal-bt.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     }
  11
  12     .group {
  13         display: inline-block;
  14         position: relative;
  15         width: 250px;
  16         height: 500px;
  17     }
  18
  19     .container {
  20         -webkit-writing-mode: horizontal-bt;
  21         width: 200px;
  22         height: 400px;
  23         border: 10px solid black;
  24         padding: 5px;
  25     }
  26
  27     .box {
  28         width: 200px;
  29         height: 200px;
  30     }
  31
  32     .sticky {
  33         position: sticky;
  34         top: 100px;
  35         bottom: 100px;
  36         background-color: green;
  37     }
  38 </style>
  39 <script>
  40     function doTest()
  41     {
  42         window.scrollTo(0, 100);
  43     }
  44     window.addEventListener('load', doTest, false);
  45 </script>
  46 </head>
  47 <body>
  48     <div class="group">
  49         <div class="container">
  50             <div class="sticky box"></div>
  51         </div>
  52     </div>
  53
  54     <div class="group" style="top: 200px">
  55         <div class="container">
  56             <div class="sticky box"></div>
  57         </div>
  58     </div>
  59
  60     <div class="group" style="top: 400px">
  61         <div class="container">
  62             <div class="sticky box"></div>
  63         </div>
  64     </div>
  65 </body>
  66 </html>