tor-browser

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

position-sticky-fractional-offset.html (2075B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
      4 <meta name="assert" content="Position sticky with a fractional offset should not show a gap" />
      5 <link rel="match" href="position-sticky-fractional-offset-ref.html" />
      6 
      7 <style>
      8  .sticky-container {
      9    width: 100px;
     10    height: 100px;
     11    overflow-y: scroll;
     12    background: red;
     13    display: inline-block;
     14  }
     15 
     16  .sticky {
     17    position: sticky;
     18    top: 0;
     19    height: 50px;
     20    background: lightgreen;
     21  }
     22 
     23  .force-scroll {
     24    height: 300px;
     25    background: lightgreen;
     26  }
     27 </style>
     28 
     29 <div class="sticky-container">
     30  <div style="height: 10.10px;"></div>
     31  <div class="sticky"></div>
     32  <div class="force-scroll"></div>
     33 </div>
     34 
     35 <div class="sticky-container">
     36  <div style="height: 10.25px;"></div>
     37  <div class="sticky"></div>
     38  <div class="force-scroll"></div>
     39 </div>
     40 
     41 <div class="sticky-container">
     42  <div style="height: 10.50px;"></div>
     43  <div class="sticky"></div>
     44  <div class="force-scroll"></div>
     45 </div>
     46 
     47 <div class="sticky-container">
     48  <div style="height: 10.75px;"></div>
     49  <div class="sticky"></div>
     50  <div class="force-scroll"></div>
     51 </div>
     52 
     53 <div class="sticky-container">
     54  <div style="height: 10.90px;"></div>
     55  <div class="sticky"></div>
     56  <div class="force-scroll"></div>
     57 </div>
     58 
     59 <script>
     60  window.onload = function() {
     61    // Start with all containers scrolled to the top.
     62    var containers = document.getElementsByClassName('sticky-container');
     63    for (let i = 0; i < containers.length; i++) {
     64      containers[i].scrollTo(0, 0);
     65    }
     66 
     67    // Wait for a full frame, then scroll all containers down so the sticky
     68    // elements are stuck to the container. There should be no visible gap
     69    // where the container's red background color is visible.
     70    requestAnimationFrame(() => {
     71      requestAnimationFrame(() => {
     72        for (let i = 0; i < containers.length; i++) {
     73          containers[i].scrollTo(0, 20);
     74        }
     75        document.documentElement.classList.remove('reftest-wait');
     76      });
     77    });
     78  };
     79 </script>
     80 </html>