tor-browser

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

position-sticky-table-td-left.html (2562B)

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