tor-browser

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

position-sticky-nested-thead-th.html (2711B)

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