tor-browser

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

wheel-event-transactions-target-resize.html (2849B)

      1 <!DOCTYPE HTML>
      2 <html>
      3 <head>
      4 <meta charset="utf-8">
      5 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
      6 <meta name="variant" content="?include=passive-false"/>
      7 <meta name="variant" content="?include=passive-true"/>
      8 <script src="/resources/testharness.js"></script>
      9 <script src="/resources/testharnessreport.js"></script>
     10 <script src="/resources/testdriver.js"></script>
     11 <script src="/resources/testdriver-actions.js"></script>
     12 <script src="/resources/testdriver-vendor.js"></script>
     13 <script src="/common/subset-tests-by-key.js"></script>
     14 <script src="scroll_support.js"></script>
     15 <style>
     16 body {
     17  margin: 0;
     18  padding: 0;
     19  height: 200vh;
     20 }
     21 
     22 .spacer {
     23  width: 100%;
     24  height: 25px;
     25  padding: 0;
     26  margin: 0;
     27 }
     28 
     29 </style>
     30 <head>
     31 <body onload=runTest()>
     32 <div id="initialTarget" class="spacer" style="background: red"></div>
     33 <div id="firstRootSpacer" class="spacer" style="background: green"></div>
     34 <div id="secondRootSpacer" class="spacer" style="background: blue"></div>
     35 </body>
     36 
     37 <script>
     38 
     39 let variants = [
     40  {
     41    key: "passive-false",
     42    passive: false,
     43  },
     44  {
     45    key: "passive-true",
     46    passive: true,
     47  },
     48 ];
     49 
     50 function runTest() {
     51  async function testResizeTarget(passive, t) {
     52    await waitForCompositorReady();
     53 
     54    await waitForCompositorCommit();
     55 
     56    let wheelEventTargets = [];
     57    let resizedInitialTarget = false;
     58 
     59    // Resize the initial element the wheel event is targetted at once we fire the
     60    // first wheel event, then log the subsequent wheel event targets.
     61    function resizeInitialElement(e) {
     62      wheelEventTargets.push(e.target);
     63      if (!resizedInitialTarget) {
     64        resizedInitialTarget = true;
     65        e.target.style.height = '10px';
     66      }
     67    }
     68    window.addEventListener("wheel", resizeInitialElement, {passive: passive});
     69 
     70    await waitForCompositorCommit();
     71 
     72    await new test_driver.Actions()
     73      .addWheel("wheel1")
     74      .scroll(2, 2, 0, 30, {origin: "viewport"})
     75      .pause(1)
     76      .scroll(2, 2, 0, 30, {origin: "viewport"})
     77      .send();
     78 
     79    // TODO(dlrobertson): Use the scrollend event here to wait for the
     80    // wheel scroll to finish instead of waitForAnimationEnd().
     81    await waitForAnimationEnd(() => { return document.scrollingElement.scrollTop; });
     82    await waitForCompositorCommit();
     83 
     84    wheelEventTargets.forEach((wheelEventTarget, i) => {
     85      assert_equals(wheelEventTarget, initialTarget,
     86                    "Wheel event at `" + i + "` does not match the expected target")
     87    });
     88    assert_greater_than(document.scrollingElement.scrollTop, 0, "The document has scrolled");
     89  }
     90 
     91  variants.forEach((variant) => {
     92    subsetTestByKey(variant.key, promise_test, t => testResizeTarget(variant.passive, t),
     93                    "Resize the initial target and use a passive:" + variant.passive + " listener");
     94  });
     95 }
     96 </script>
     97 </html>