tor-browser

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

position-sticky-table-tr-top.html (2834B)

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