tor-browser

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

wheel-event-transactions-basic.html (4236B)

      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=target-basic"/>
      7 <meta name="variant" content="?include=scroll-over-scrollable-child"/>
      8 <meta name="variant" content="?include=transaction-not-bound-to-scroll-frame"/>
      9 <script src="/resources/testharness.js"></script>
     10 <script src="/resources/testharnessreport.js"></script>
     11 <script src="/resources/testdriver.js"></script>
     12 <script src="/resources/testdriver-actions.js"></script>
     13 <script src="/resources/testdriver-vendor.js"></script>
     14 <script src="/common/subset-tests-by-key.js"></script>
     15 <script src="scroll_support.js"></script>
     16 <style>
     17 body {
     18  margin: 0;
     19  padding: 0;
     20  height: 200vh;
     21 }
     22 
     23 .spacer {
     24  width: 100%;
     25  height: 25px;
     26  padding: 0;
     27  margin: 0;
     28 }
     29 
     30 #scrollableDiv {
     31  width: 100%;
     32  height: 500px;
     33  overflow: scroll;
     34  background: yellow;
     35 }
     36 
     37 #innerDiv {
     38  width: 100%;
     39  height: 4000px;
     40  background: red;
     41 }
     42 
     43 </style>
     44 <head>
     45 <body onload=runTest()>
     46 <div id="firstRootSpacer" class="spacer" style="background: cyan"></div>
     47 <div id="secondRootSpacer" class="spacer" style="background: magenta"></div>
     48 <div id="scrollableDiv">
     49  <div id="innerDiv">
     50    <div id="firstInnerSpacer" class="spacer" style="background: green">
     51    </div>
     52    <div id="secondInnerSpacer" class="spacer" style="background: blue">
     53    </div>
     54  </div>
     55 </div>
     56 </body>
     57 
     58 <script>
     59 
     60 let variants = [
     61  // Ensure that the wheel transaction fires all wheel events to the initial
     62  // target.
     63  {
     64    key: 'target-basic',
     65    origin: "viewport",
     66    scrollX: 40,
     67    scrollY: 2,
     68    scrollingElement: document.scrollingElement,
     69    targetElement: firstRootSpacer,
     70    title: 'Wheel events should be captured to one target #1',
     71  },
     72  // Ensure that the wheel transaction fires all wheel events to the initial
     73  // target, even when another scroll frame is under the mouse cursor.
     74  {
     75    key: 'scroll-over-scrollable-child',
     76    origin: "viewport",
     77    scrollX: 40,
     78    scrollY: 27,
     79    scrollingElement: document.scrollingElement,
     80    targetElement: secondRootSpacer,
     81    title: 'Wheel events should be captured to one target #2',
     82  },
     83  // Ensure that the wheel transaction targets the topmost-element, which is
     84  // not the scrollable element.
     85  {
     86    key: 'transaction-not-bound-to-scroll-frame',
     87    origin: innerDiv,
     88    scrollX: 40,
     89    scrollY: 2,
     90    scrollingElement: scrollableDiv,
     91    targetElement: innerDiv,
     92    title: 'The wheel event transactions target may not be a scroll frame',
     93  },
     94 ];
     95 
     96 function runTest() {
     97  async function testBasic(testInfo, t) {
     98    await waitForCompositorReady();
     99 
    100    await waitForCompositorCommit();
    101 
    102    let wheelEventTargets = [];
    103    function pushTargetToWheelEventTargets(e) {
    104      wheelEventTargets.push(e.target)
    105    }
    106 
    107    window.addEventListener("wheel", pushTargetToWheelEventTargets, {passive: true});
    108 
    109    // Scroll past the boundary of the original element to ensure all events in
    110    // transaction have the same target.
    111    await new test_driver.Actions()
    112      .addWheel("wheel1")
    113      .scroll(testInfo.scrollX, testInfo.scrollY, 0, 30, {origin: testInfo.origin})
    114      .pause(1)
    115      .scroll(testInfo.scrollX, testInfo.scrollY, 0, 30, {origin: testInfo.origin})
    116      .pause(1)
    117      .scroll(testInfo.scrollX, testInfo.scrollY, 0, 30, {origin: testInfo.origin})
    118      .send();
    119 
    120    // TODO(dlrobertson): Use the scrollend event here to wait for the
    121    // wheel scroll to finish instead of waitForAnimationEnd().
    122    await waitForAnimationEnd(() => { return testInfo.scrollingElement.scrollTop; });
    123    await waitForCompositorCommit();
    124 
    125    // Ensure that all the captured wheel events are the expected target.
    126    wheelEventTargets.forEach((wheelEventTarget, i) => {
    127      assert_equals(wheelEventTarget, testInfo.targetElement,
    128                    "Wheel event at index `" + i + "` does not have the expected target");
    129    });
    130 
    131    assert_greater_than(testInfo.scrollingElement.scrollTop, 0,
    132                        "The scrolling element has scrolled");
    133  }
    134 
    135  variants.forEach((testInfo) => {
    136    subsetTestByKey(testInfo.key, promise_test, t => testBasic(testInfo, t), testInfo.title);
    137  });
    138 }
    139 </script>
    140 </html>