tor-browser

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

position-sticky-fixed-ancestor.html (1988B)

      1 <!DOCTYPE html>
      2 <html class='reftest-wait'>
      3 <title>Sticky elements inside fixed ancestors shouldn't account for scroll</title>
      4 <link rel="match" href="position-sticky-fixed-ancestor-ref.html" />
      5 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
      6 <link rel="help" href="https://crbug.com/1019142">
      7 <meta name="assert" content="This test checks that a sticky element inside a fixed subtree doesn't scroll with the viewport "/>
      8 
      9 <script src="/common/reftest-wait.js"></script>
     10 <script src="../resources/ref-rectangle.js"></script>
     11 
     12 
     13 <style>
     14  body,html {
     15    margin: 0;
     16    width: 100%;
     17    height: 100%;
     18  }
     19 
     20  .sticky {
     21    background: green;
     22    position: sticky;
     23    bottom: 50vh;
     24    width: 100px;
     25    height: 10%;
     26  }
     27 
     28  .spacer {
     29    height: 90%;
     30  }
     31  .long {
     32    height: 600vh;
     33  }
     34 
     35  .position-parent {
     36    position: absolute;
     37    display: flex;
     38    align-items: center;
     39    justify-content: center;
     40    width: 100%;
     41    height: 100%;
     42    top: 100vh;
     43    background-color: lightgrey;
     44  }
     45 
     46  .container {
     47    width: 100px;
     48    height: 100%;
     49    background-color: grey;
     50  }
     51 
     52  button {
     53    position: fixed;
     54    left: 20px;
     55    top: 20px;
     56  }
     57 
     58  .fixed {
     59    position: fixed;
     60    top: 25vh;
     61  }
     62 </style>
     63 
     64 <div>You should see a green box below. No blue should be visible.</div>
     65 <div class="position-parent">
     66  <div class="container">
     67    <div class="spacer"></div>
     68    <div class="sticky"></div>
     69  </div>
     70 </div>
     71 <div class="long"></div>
     72 <button id="button">Toggle Fixed</button>
     73 <script>
     74  function toggleFixed() {
     75    document.querySelector('.position-parent').classList.toggle('fixed');
     76  }
     77 
     78  document.getElementById('button').addEventListener('click', toggleFixed);
     79 
     80  requestAnimationFrame(() => {
     81    window.scrollTo(0, document.querySelector('.long').clientHeight);
     82    createIndicatorForStickyElements(document.querySelectorAll('.sticky'));
     83    requestAnimationFrame(() => {
     84      toggleFixed();
     85      takeScreenshot();
     86    });
     87  });
     88 </script>
     89 </html>