tor-browser

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

position-sticky-table-td-top.html (2439B)

      1 <!DOCTYPE html>
      2 <title>position:sticky top constraint should behave correctly for &lt;td&gt; elements</title>
      3 <link rel="match" href="position-sticky-table-td-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;td&gt; elements" />
      6 
      7 <style>
      8 table {
      9  border-collapse:collapse;
     10 }
     11 
     12 td {
     13  padding: 0;
     14 }
     15 
     16 td > 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 = 150;
     62  document.getElementById('scroller2').scrollTop = 225;
     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: 200px;"></div>
     72    <div class="prepadding"></div>
     73    <table>
     74      <tr><td><div></div></td></tr>
     75      <tr><td><div></div></td></tr>
     76      <tr><td class="sticky"><div></div></td></tr>
     77      <tr><td><div></div></td></tr>
     78    </table>
     79    <div class="postpadding"></div>
     80  </div>
     81 </div>
     82 
     83 <div class="group">
     84  <div id="scroller2" class="scroller">
     85    <div class="indicator" style="top: 250px;"></div>
     86    <div class="prepadding"></div>
     87    <table>
     88        <tr><td><div></div></td></tr>
     89        <tr><td><div></div></td></tr>
     90        <tr><td class="sticky"><div></div></td></tr>
     91        <tr><td><div></div></td></tr>
     92    </table>
     93    <div class="postpadding"></div>
     94  </div>
     95 </div>
     96 
     97 <div class="group">
     98  <div id="scroller3" class="scroller">
     99    <div class="indicator" style="top: 250px;"></div>
    100    <div class="prepadding"></div>
    101    <table>
    102      <tr><td><div></div></td></tr>
    103      <tr><td><div></div></td></tr>
    104      <tr><td class="sticky"><div></div></td></tr>
    105      <tr><td><div></div></td></tr>
    106    </table>
    107    <div class="postpadding"></div>
    108  </div>
    109 </div>