tor-browser

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

pointerevent_mouse-pointer-preventdefault.html (4141B)

      1 <!DOCTYPE HTML>
      2 <title>Effect of pointer event prevent-default on compat mouse event</title>
      3 <script src="/resources/testharness.js"></script>
      4 <script src="/resources/testharnessreport.js"></script>
      5 <script src="/resources/testdriver.js"></script>
      6 <script src="/resources/testdriver-vendor.js"></script>
      7 <script src="/resources/testdriver-actions.js"></script>
      8 <script src="../pointerevent_support.js"></script>
      9 <style>
     10  div {
     11    margin: 20px;
     12    padding: 20px;
     13    background-color: green;
     14    user-select: none; // Prevents text selection on drag.
     15  }
     16 
     17 </style>
     18 <div id="preventer" draggable="false">
     19  <div id="logger" draggable="false"></div>
     20  <!-- The following div makes the center of "preventer" outside "logger", which
     21    simplifies TestDriver action coordinates below. -->
     22  <div></div>
     23 </div>
     24 <div id="done"></div>
     25 
     26 <script>
     27  'use strict';
     28 
     29  const logger = document.getElementById("logger");
     30  const preventer = document.getElementById("preventer");
     31  const done = document.getElementById("done");
     32 
     33  const preventing_handler = e => e.preventDefault();
     34 
     35  let received_events = [];
     36 
     37  const logged_pointer_events = ["pointerdown", "pointermove", "pointerup",
     38    "pointerenter", "pointerleave", "pointerover", "pointerout"];
     39  const logged_mouse_events = ["mousedown", "mousemove", "mouseup",
     40    "mouseenter", "mouseleave", "mouseover", "mouseout"];
     41 
     42  const expected_pointer_events = [
     43    "pointerover", "pointerenter", "pointermove", "pointerdown",
     44    "pointerout", "pointerleave", "pointerover", "pointerenter",
     45    "pointermove", "pointerup", "pointerout", "pointerleave"
     46  ];
     47 
     48  const expected_mouse_events_when_unaffected_by_pointer_events = [
     49    "mouseover", "mouseenter", "mousemove", "mousedown",
     50    "mouseout", "mouseleave", "mouseover", "mouseenter",
     51    "mousemove", "mouseup", "mouseout", "mouseleave"
     52  ];
     53 
     54  const expected_mouse_events_for_canceled_pointerdown = [
     55    "mouseover", "mouseenter", "mousemove",
     56    "mouseout", "mouseleave", "mouseover", "mouseenter",
     57    "mouseout", "mouseleave"
     58  ];
     59 
     60  logged_pointer_events.forEach(ename =>
     61    logger.addEventListener(ename, e => received_events.push(e.type)));
     62 
     63  logged_mouse_events.forEach(ename =>
     64    logger.addEventListener(ename, e => received_events.push(e.type)));
     65 
     66  for (let i = 0; i < logged_pointer_events.length; i++) {
     67    let event_to_cancel = logged_pointer_events[i];
     68 
     69    promise_test(async (test) => {
     70      received_events = [];
     71 
     72      preventer.addEventListener(event_to_cancel, preventing_handler);
     73      test.add_cleanup(() =>
     74          preventer.removeEventListener(event_to_cancel, preventing_handler));
     75 
     76      let click_on_done = getEvent("click", done, test);
     77 
     78      let actions = new test_driver.Actions()
     79        // Start outside all event listeners
     80        .pointerMove(0, 0)
     81        .pointerDown()
     82        .pointerUp()
     83        // Drag from inside to outside of "logger" then drag back to inside,
     84        // staying within "preventer" all the time
     85        .pointerMove(0, 0, { origin: logger })
     86        .pointerDown()
     87        .pointerMove(0, 0, { origin: preventer })
     88        .pointerUp()
     89        .pointerDown()
     90        .pointerMove(0, 0, { origin: logger })
     91        .pointerUp()
     92        // Click "done"
     93        .pointerMove(0, 0, { origin: done })
     94        .pointerDown()
     95        .pointerUp()
     96        .send();
     97 
     98      await actions;
     99      await click_on_done;
    100 
    101      assert_array_equals(received_events.filter(isPointerEvent),
    102        expected_pointer_events, "expected pointer events");
    103 
    104      if (event_to_cancel == "pointerdown") {
    105        assert_array_equals(received_events.filter(isMouseEvent),
    106          expected_mouse_events_for_canceled_pointerdown,
    107          "expected mouse events");
    108      } else {
    109        assert_array_equals(received_events.filter(isMouseEvent),
    110          expected_mouse_events_when_unaffected_by_pointer_events,
    111          "expected mouse events");
    112        assert_true(arePointerEventsBeforeCompatMouseEvents(received_events),
    113          "compat mouse events follow corresponding pointer events");
    114      }
    115    }, `Effect of canceling ${event_to_cancel} on compat mouse events`);
    116  }
    117 </script>