src/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-table-row-top.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         width: 200px;
  21         height: 400px;
  22         outline: 2px solid black;
  23         border: hidden;
  24         border-width: 0px;
  25         border-spacing: 0px !important;
  26         border-collapse:collapse;
  27         cellspacing: 0;
  28         cellpadding: 0;
  29         padding: 0;
  30     }
  31
  32     .box {
  33         width: 200px;
  34         height: 198px;
  35     }
  36
  37     .sticky {
  38         position: sticky;
  39         top: 100px;
  40         background-color: green;
  41     }
  42
  43     .indicator {
  44         position: absolute;
  45         top: 0;
  46         left: 0;
  47         background-color: red;
  48     }
  49 </style>
  50 <script>
  51     function doTest()
  52     {
  53         window.scrollTo(0, 100);
  54     }
  55     window.addEventListener('load', doTest, false);
  56 </script>
  57 </head>
  58 <body>
  59     <div class="group">
  60         <div class="indicator box" style="top: 200px;"></div>
  61         <table class="container">
  62             <tbody>
  63                 <tr class="sticky">
  64                     <td class="box"></td>
  65                 </tr>
  66                 <tr>
  67                     <td></td>
  68                 </tr>
  69             </tbody>
  70         </table>
  71     </div>
  72
  73     <div class="group" style="top: 100px">
  74         <div class="indicator box" style="top: 100px;"></div>
  75         <table class="container" style="">
  76             <tbody>
  77                 <tr class="sticky">
  78                     <td class="box"></td>
  79                 </tr>
  80                 <tr>
  81                     <td></td>
  82                 </tr>
  83             </tbody>
  84         </table>
  85     </div>
  86
  87     <div class="group" style="top: 200px">
  88         <div class="indicator box" style="top: 0;"></div>
  89         <table class="container" style="">
  90             <tbody>
  91                 <tr class="sticky">
  92                     <td class="box"></td>
  93                 </tr>
  94                 <tr>
  95                     <td></td>
  96                 </tr>
  97             </tbody>
  98         </table>
  99     </div>
 100     <div style="position: absolute; top: 620px;">
 101     This test checks that sticky positioned table rows are contained by their table.
 102     There should be no red.
 103     </div>
 104 </body>
 105 </html>