src/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-table-thead-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             <thead class="sticky">
  63                 <tr>
  64                     <td class="box"></td>
  65                 </tr>
  66             </thead>
  67             <tbody>
  68                 <tr>
  69                     <td></td>
  70                 </tr>
  71             </tbody>
  72         </table>
  73     </div>
  74
  75     <div class="group" style="top: 100px">
  76         <div class="indicator box" style="top: 100px;"></div>
  77         <table class="container" style="">
  78             <thead class="sticky">
  79                 <tr>
  80                     <td class="box"></td>
  81                 </tr>
  82             </thead>
  83             <tbody>
  84                 <tr>
  85                     <td></td>
  86                 </tr>
  87             </tbody>
  88         </table>
  89     </div>
  90
  91     <div class="group" style="top: 200px">
  92         <div class="indicator box" style="top: 0;"></div>
  93         <table class="container" style="">
  94             <thead class="sticky">
  95                 <tr>
  96                     <td class="box"></td>
  97                 </tr>
  98             </thead>
  99             <tbody>
 100                 <tr>
 101                     <td></td>
 102                 </tr>
 103             </tbody>
 104         </table>
 105     </div>
 106     <div style="position: absolute; top: 620px;">
 107     This test checks that sticky positioned table theads are contained by their table.
 108     There should be no red.
 109     </div>
 110 </body>
 111 </html>