src/third_party/WebKit/LayoutTests/fast/css/sticky/sticky-table-thead-top-expected.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     }
  24
  25     .box {
  26         width: 200px;
  27         height: 200px;
  28     }
  29
  30     .sticky {
  31         position: absolute;
  32         background-color: green;
  33     }
  34
  35     .indicator {
  36         position: absolute;
  37         top: 0;
  38         left: 0;
  39         background-color: red;
  40     }
  41 </style>
  42 </head>
  43 <body>
  44     <div class="group" style="top: -100px;">
  45         <div class="indicator box" style="top: 200px;"></div>
  46         <div class="container">
  47             <div class="sticky box" style="top: 200px;"></div>
  48         </div>
  49     </div>
  50
  51     <div class="group" style="top: 0">
  52         <div class="indicator box" style="top: 100px;"></div>
  53         <div class="container">
  54             <div class="sticky box" style="top: 100px;"></div>
  55         </div>
  56     </div>
  57
  58     <div class="group" style="top: 100px">
  59         <div class="indicator box" style="top: 0;"></div>
  60         <div class="container">
  61             <div class="sticky box" style="top: 0;"></div>
  62         </div>
  63     </div>
  64     <div style="position: absolute; top: 520px;">
  65     This test checks that sticky positioned table theads are contained by their table.
  66     There should be no red.
  67     </div>
  68 </body>
  69 </html>