tor-browser

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

wheel-event-transactions-target-display-change.html (3221B)

      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=none"/>
      7 <meta name="variant" content="?include=contents"/>
      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  "none",
     41  "contents",
     42 ]
     43 
     44 function runTest() {
     45  async function testDisplayChange(display, t) {
     46    await waitForCompositorReady();
     47 
     48    await waitForCompositorCommit();
     49 
     50    let wheelEventTargets = [];
     51    let makeInitialTargetNone = false;
     52 
     53    // Modify the initial element the wheel event is targetted at to
     54    // display: <variant> once we fire the first wheel event, then log
     55    // the subsequent wheel event targets.
     56    function makeInitialElementNone(e) {
     57      wheelEventTargets.push(e.target);
     58      if (!makeInitialTargetNone) {
     59        makeInitialTargetNone = true;
     60        e.target.style.display = display;
     61      }
     62    }
     63    window.addEventListener("wheel", makeInitialElementNone, {passive: true});
     64 
     65    await waitForCompositorCommit();
     66 
     67    await new test_driver.Actions()
     68      .addWheel("wheel1")
     69      .scroll(40, 2, 0, 30, {origin: "viewport"})
     70      .pause(1)
     71      .scroll(40, 2, 0, 30, {origin: "viewport"})
     72      .send();
     73 
     74    // TODO(dlrobertson): Use the scrollend event here to wait for the
     75    // wheel scroll to finish instead of waitForAnimationEnd().
     76    await waitForAnimationEnd(() => { return document.scrollingElement.scrollTop; });
     77    await waitForCompositorCommit();
     78 
     79    // The first wheel event should be targetted at the modified element.
     80    assert_equals(wheelEventTargets.shift(), initialTarget,
     81                  "Initial wheel event is has the modified element as the target");
     82 
     83    wheelEventTargets.forEach((wheelEventTarget, i) => {
     84      // TODO(dlrobertson): This assertion is pretty weak, but browsers seem to disagree
     85      // on what element the event should target. Find out what the target should be here
     86      // and make this assertion more restrictive.
     87      assert_not_equals(wheelEventTarget, initialTarget,
     88                        "Wheel event at index `" + i + "` targetted the initial element");
     89    });
     90 
     91    assert_greater_than(document.scrollingElement.scrollTop, 0, "The document has scrolled");
     92  }
     93 
     94  variants.forEach((variant) => {
     95    subsetTestByKey(variant, promise_test, t => testDisplayChange(variant, t),
     96                    "Modify the initial wheel event target to display:" + variant);
     97  });
     98 }
     99 </script>
    100 </html>