tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

position-sticky-table-th-top.html (2702B)

      1 <!DOCTYPE html>
      2 <title>position:sticky top constraint should behave correctly for &lt;th&gt; elements</title>
      3 <link rel="match" href="position-sticky-table-th-top-ref.html" />
      4 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
      5 <meta name="assert" content="This test checks that the position:sticky top constraint behaves correctly for &lt;th&gt; elements" />
      6 
      7 <style>
      8 table {
      9  border-collapse:collapse;
     10 }
     11 
     12 td, th {
     13  padding: 0;
     14 }
     15 
     16 td > div, th > div {
     17  height: 50px;
     18  width: 50px;
     19 }
     20 
     21 .group {
     22  display: inline-block;
     23  position: relative;
     24  width: 150px;
     25  height: 200px;
     26 }
     27 
     28 .scroller {
     29  position: relative;
     30  width: 100px;
     31  height: 150px;
     32  overflow-x: hidden;
     33  overflow-y: auto;
     34 }
     35 
     36 .prepadding {
     37  height: 100px;
     38 }
     39 
     40 .postpadding {
     41  height: 250px;
     42 }
     43 
     44 .indicator {
     45  position: absolute;
     46  background-color: red;
     47  left: 0;
     48  height: 50px;
     49  width: 50px;
     50 }
     51 
     52 .sticky {
     53  position: sticky;
     54  top: 25px;
     55  background-color: green;
     56 }
     57 </style>
     58 
     59 <script>
     60 window.addEventListener('load', function() {
     61  document.getElementById('scroller1').scrollTop = 50;
     62  document.getElementById('scroller2').scrollTop = 125;
     63  document.getElementById('scroller3').scrollTop = 250;
     64 });
     65 </script>
     66 
     67 <div>You should see three green boxes below. No red should be visible.</div>
     68 
     69 <div class="group">
     70  <div id="scroller1" class="scroller">
     71    <div class="indicator" style="top: 100px;"></div>
     72    <div class="prepadding"></div>
     73    <table>
     74      <thead>
     75        <tr>
     76          <th class="sticky"><div></div></th>
     77        </tr>
     78      </thead>
     79      <tbody>
     80        <tr><td><div></div></td></tr>
     81        <tr><td><div></div></td></tr>
     82        <tr><td><div></div></td></tr>
     83      </tbody>
     84    </table>
     85    <div class="postpadding"></div>
     86  </div>
     87 </div>
     88 
     89 <div class="group">
     90  <div id="scroller2" class="scroller">
     91    <div class="indicator" style="top: 150px;"></div>
     92    <div class="prepadding"></div>
     93    <table>
     94      <thead>
     95        <tr>
     96          <th class="sticky"><div></div></th>
     97        </tr>
     98      </thead>
     99      <tbody>
    100        <tr><td><div></div></td></tr>
    101        <tr><td><div></div></td></tr>
    102        <tr><td><div></div></td></tr>
    103      </tbody>
    104    </table>
    105    <div class="postpadding"></div>
    106  </div>
    107 </div>
    108 
    109 <div class="group">
    110  <div id="scroller3" class="scroller">
    111    <div class="indicator" style="top: 250px;"></div>
    112    <div class="prepadding"></div>
    113    <table>
    114      <thead>
    115        <tr>
    116          <th class="sticky"><div></div></th>
    117        </tr>
    118      </thead>
    119      <tbody>
    120        <tr><td><div></div></td></tr>
    121        <tr><td><div></div></td></tr>
    122        <tr><td><div></div></td></tr>
    123      </tbody>
    124    </table>
    125    <div class="postpadding"></div>
    126  </div>
    127 </div>