tor-browser

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

helper_bug1922904.html (2787B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4  <meta charset="utf-8">
      5  <meta name="viewport" content="width=device-width, initial-scale=1">
      6  <script src="apz_test_utils.js"></script>
      7  <script src="apz_test_native_event_utils.js"></script>
      8  <script src="/tests/SimpleTest/paint_listener.js"></script>
      9  <style>
     10  body {
     11    position: fixed;
     12    width: 100%;
     13    height: 100%;
     14  }
     15 
     16  .container {
     17    display: flex;
     18    gap: 40px;
     19    height: 100%;
     20 
     21    overflow-y: hidden;
     22    overflow-x: auto;
     23 
     24    scroll-snap-type: x mandatory;
     25  }
     26 
     27  section {
     28    display: flex;
     29    flex-direction: column;
     30    min-width: 92vw;
     31 
     32    padding: 1rem;
     33    gap: 30px;
     34 
     35    background-color: grey;
     36    height: 100%;
     37 
     38    scroll-snap-align: none center;
     39    scroll-snap-stop: always;
     40 
     41    overflow-x: hidden;
     42    overflow-y: auto;
     43  }
     44 
     45  section div {
     46    width: 100%;
     47  }
     48 
     49  article:nth-child(n) {
     50    background-color: turquoise;
     51  }
     52 
     53  article:nth-child(2n) {
     54    background-color: tomato;
     55  }
     56 
     57  article:nth-child(3n) {
     58    background-color: purple;
     59  }
     60 
     61  article {
     62    width: 100%;
     63    height: 75vh;
     64  }
     65  </style>
     66 </head>
     67 <body>
     68  <div class="container">
     69    <section>
     70      <div>
     71        <article>
     72          Some stuff 1
     73        </article>
     74        <article>
     75          Some stuff 2
     76        </article>
     77        <article>
     78          Some stuff 3
     79        </article>
     80      </div>
     81    </section>
     82    <section>
     83      <div>
     84        <article>
     85          Some stuff 3
     86        </article>
     87        <article>
     88          Some stuff 4
     89        </article>
     90        <article>
     91          Some stuff 5
     92        </article>
     93      </div>
     94    </section>
     95  </div>
     96 </body>
     97 <script type="application/javascript">
     98 async function test() {
     99  const container = document.querySelector(".container");
    100 
    101  let scrollendPromise = promiseOneEvent(container, "scrollend");
    102 
    103  // Send two horizontal wheel events quickly.
    104  synthesizeNativeWheel(container, 50, 50, NativePanHandler.delta, 0);
    105  synthesizeNativeWheel(container, 50, 50, NativePanHandler.delta, 0);
    106 
    107  // Wait for the end of the smooth scrolling triggered by above wheel events.
    108  await scrollendPromise;
    109 
    110  // Store the destination of the smooth scrolling temporarily.
    111  const endOfScrollPosition = container.scrollLeft;
    112 
    113  // Try to do an instant scroll to the left edge of the scroll container,
    114  // there's a scroll snap point.
    115  container.scrollTo(container.clientWidth, 0);
    116 
    117  is(endOfScrollPosition, container.scrollLeft);
    118 }
    119 
    120 if (getPlatform() == "android") {
    121  ok(true, "Skipping test because native wheel events are not supported on Android");
    122  subtestDone();
    123 } else if (getPlatform() == "linux") {
    124  ok(true, "Skipping test on Linux because of bug 1889039. ");
    125  subtestDone();
    126 } else {
    127  waitUntilApzStable()
    128  .then(test)
    129  .then(subtestDone, subtestFailed);
    130 }
    131 </script>
    132 </html>