tor-browser

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

frame-reconstruction-scroll-clamping.html (1627B)


      1 <html class="reftest-wait">
      2 <!--
      3 For bug 1266833; syncing the scroll offset to APZ properly when the scroll
      4 position is clamped to a smaller value during a frame reconstruction.
      5 -->
      6 <script>
      7    function run() {
      8        document.body.scrollTop = document.body.scrollTopMax;
      9 
     10        // Let the scroll position propagate to APZ before we do the frame
     11        // reconstruction. Ideally we would wait for flushApzRepaints here but
     12        // we don't have access to DOMWindowUtils in a reftest, so we just wait
     13        // 100ms to approximate it. With bug 1266833 fixed, this test should
     14        // never fail regardless of what this timeout value is.
     15        setTimeout(frameReconstruction, 100);
     16    }
     17 
     18    function frameReconstruction() {
     19        document.body.classList.toggle('noscroll');
     20        document.documentElement.classList.toggle('reconstruct-body');
     21        document.getElementById('spacer').style.height = '100%';
     22        document.documentElement.classList.remove('reftest-wait');
     23    }
     24 </script>
     25 <style>
     26    html, body {
     27        margin: 0;
     28        padding: 0;
     29        background-color: green;
     30    }
     31 
     32    .noscroll {
     33        overflow: hidden;
     34        height: 100%;
     35    }
     36 
     37    /* Toggling this on and off triggers a frame reconstruction on the <body> */
     38    html.reconstruct-body::before {
     39        top: 0;
     40        content: '';
     41        display: block;
     42        height: 2px;
     43        position: absolute;
     44        width: 100%;
     45        z-index: 99;
     46    }
     47 </style>
     48 <body onload="setTimeout(run, 0)">
     49 <div id="spacer" style="height: 5000px">
     50  This is the top of the page.
     51 </div>
     52 This is the bottom of the page.
     53 </body>