tor-browser

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

position-sticky-table-tfoot-bottom.html (2798B)

      1 <!DOCTYPE html>
      2 <title>position:sticky bottom constraint should behave correctly for &lt;tfoot&gt; elements</title>
      3 <link rel="match" href="position-sticky-table-tfoot-bottom-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 bottom constraint behaves correctly for &lt;tfoot&gt; elements" />
      6 
      7 <script src="../resources/ref-rectangle.js"></script>
      8 
      9 <style>
     10 table {
     11  border-collapse:collapse;
     12 }
     13 
     14 td, th {
     15  padding: 0;
     16 }
     17 
     18 td > div, th > 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  bottom: 25px;
     57  background-color: green;
     58 }
     59 </style>
     60 
     61 <script>
     62 window.addEventListener('load', function() {
     63  document.getElementById('scroller1').scrollTop = 0;
     64  document.getElementById('scroller2').scrollTop = 75;
     65  document.getElementById('scroller3').scrollTop = 200;
     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 <div class="group">
     73  <div id="scroller1" class="scroller">
     74    <div class="indicator" style="top: 100px;"></div>
     75    <div class="prepadding"></div>
     76    <table>
     77      <tbody>
     78        <tr><td><div></div></td></tr>
     79        <tr><td><div></div></td></tr>
     80        <tr><td><div></div></td></tr>
     81      </tbody>
     82      <tfoot class="sticky">
     83        <tr><th><div></div></th></tr>
     84      </tfoot>
     85    </table>
     86    <div class="postpadding"></div>
     87  </div>
     88 </div>
     89 
     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><td><div></div></td></tr>
     97        <tr><td><div></div></td></tr>
     98        <tr><td><div></div></td></tr>
     99      </tbody>
    100      <tfoot class="sticky">
    101        <tr><th><div></div></th></tr>
    102      </tfoot>
    103    </table>
    104    <div class="postpadding"></div>
    105  </div>
    106 </div>
    107 
    108 <div class="group">
    109  <div id="scroller3" class="scroller">
    110    <div class="indicator" style="top: 250px;"></div>
    111    <div class="prepadding"></div>
    112    <table>
    113      <tbody>
    114        <tr><td><div></div></td></tr>
    115        <tr><td><div></div></td></tr>
    116        <tr><td><div></div></td></tr>
    117      </tbody>
    118      <tfoot class="sticky">
    119        <tr><th><div></div></th></tr>
    120      </tfoot>
    121    </table>
    122    <div class="postpadding"></div>
    123  </div>
    124 </div>