tor-browser

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

helper_position_sticky_scroll_handoff.html (1940B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <title>APZ overscroll handoff for sticky elements</title>
      5  <script type="application/javascript" src="apz_test_utils.js"></script>
      6  <script type="application/javascript" src="apz_test_native_event_utils.js"></script>
      7  <script src="/tests/SimpleTest/paint_listener.js"></script>
      8  <meta name="viewport" content="width=device-width"/>
      9  <style>
     10 html, body {
     11  height: 100%;
     12  overflow: hidden;
     13  margin: 0;
     14 }
     15 
     16 #main {
     17  height: 100%;
     18  overflow: auto;
     19 }
     20 
     21 #spacer  {
     22  height: 5000px;
     23 }
     24 
     25 #sticky {
     26  position: sticky;
     27  top: 50%;
     28  left: 0;
     29  width: 100%;
     30  height: 100px;
     31  background: red;
     32  overflow: auto;
     33 }
     34 
     35 #long {
     36  height: 250px;
     37  width: 50%;
     38  position: absolute;
     39  background: green;
     40  top: 0;
     41  left: 25%;
     42 }
     43  </style>
     44 </head>
     45 <body>
     46  <div id="main">
     47    <div id="sticky">
     48      <div id="long">
     49      </div>
     50    </div>
     51    <div id="spacer">
     52    </div>
     53  </div>
     54 </body>
     55 <script type="application/javascript">
     56 
     57 async function test() {
     58  // Scroll to the bottom of the sticky position element that should not
     59  // allow overscroll handoff.
     60  sticky.scrollTop = sticky.scrollHeight;
     61 
     62  // After scrolling to bottom tick the refresh driver.
     63  await promiseFrame();
     64 
     65  info("Start: sticky=" + sticky.scrollTop + " main=" + main.scrollTop);
     66 
     67  let transformEnd = promiseTransformEnd();
     68 
     69  // Async scroll the sticky element by 200 pixels using the mouse-wheel.
     70  // This should handoff the overscroll to the parent element.
     71  await promiseMoveMouseAndScrollWheelOver(sticky, 25, 25, false, 200);
     72 
     73  // Wait for the trasform triggered by the gesture to complete.
     74  await transformEnd;
     75  await promiseApzFlushedRepaints();
     76 
     77  info("After scroll: sticky=" + sticky.scrollTop + " main=" + main.scrollTop);
     78 
     79  // Ensure that the main element has scrolled.
     80  isnot(main.scrollTop, 0, "The overscroll should handoff");
     81 }
     82 
     83 waitUntilApzStable()
     84 .then(test)
     85 .then(subtestDone, subtestFailed);
     86 
     87 </script>
     88 </html>