tor-browser

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

position-sticky-inline.html (2402B)

      1 <!DOCTYPE html>
      2 <title>position:sticky should work for inline elements</title>
      3 <link rel="match" href="position-sticky-inline-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 position:sticky works for inline elements" />
      6 
      7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
      8 
      9 <script src="../resources/ref-rectangle.js"></script>
     10 
     11 <style>
     12 .group {
     13  display: inline-block;
     14  position: relative;
     15  width: 150px;
     16  height: 250px;
     17 }
     18 
     19 .scroller {
     20  position: relative;
     21  width: 100px;
     22  height: 200px;
     23  overflow-x: hidden;
     24  overflow-y: auto;
     25  font: 25px/1 Ahem;
     26 }
     27 
     28 .contents {
     29  height: 500px;
     30 }
     31 
     32 .prepadding {
     33  height: 100px;
     34 }
     35 
     36 .container {
     37  height: 200px;
     38 }
     39 
     40 .innerpadding {
     41  height: 50px;
     42 }
     43 
     44 .indicator {
     45  position: absolute;
     46  left: 0;
     47  color: red;
     48 }
     49 
     50 .sticky {
     51  position: sticky;
     52  top: 50px;
     53  color: green;
     54 }
     55 
     56 .inline {
     57  display: inline;
     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 rectangles below. No red or blue should be visible.</div>
     71 
     72 <div class="group">
     73  <div id="scroller1" class="scroller">
     74    <div class="indicator inline" style="top: 150px;">XXX</div>
     75    <div class="contents">
     76      <div class="prepadding"></div>
     77      <div class="container">
     78        <div class="innerpadding"></div>
     79        <div class="sticky inline">XXX</div>
     80      </div>
     81    </div>
     82  </div>
     83 </div>
     84 
     85 <div class="group">
     86  <div id="scroller2" class="scroller">
     87    <div class="indicator inline" style="top: 175px;">XXX</div>
     88    <div class="contents">
     89      <div class="prepadding"></div>
     90      <div class="container">
     91        <div class="innerpadding"></div>
     92        <div class="sticky inline">XXX</div>
     93      </div>
     94    </div>
     95  </div>
     96 </div>
     97 
     98 <div class="group">
     99  <div id="scroller3" class="scroller">
    100    <div class="indicator inline" style="top: 275px;">XXX</div>
    101    <div class="contents">
    102      <div class="prepadding"></div>
    103      <div class="container">
    104        <div class="innerpadding"></div>
    105        <div class="sticky inline">XXX</div>
    106      </div>
    107    </div>
    108  </div>
    109 </div>