tor-browser

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

pointerevent_compat-mouse-events-when-removing-nodes.html (3861B)

      1 <!DOCTYPE HTML>
      2 <meta name="viewport" content="width=device-width,initial-scale=1">
      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 type="text/javascript" src="../pointerevent_support.js"></script>
      9 <!-- There are significant differences in how browsers fire pointer events and
     10 compat mouse events when elements are removed from the dom.
     11 There is a discussion about the order of pointer events and mouse compat events
     12 for this scenario in the pointer event working group (See link below)-->
     13 <link rel="help" href="https://github.com/w3c/pointerevents/issues/285">
     14 <style>
     15 div.box {
     16  margin: 5px;
     17  padding: 20px;
     18  float: left;
     19  background-color:green;
     20 }
     21 #grey {
     22  width: 50px;
     23  height: 50px;
     24 }
     25 </style>
     26 
     27 <h1>Verifies the compatibility mouse events are sent correctly when the node is deleted on pointer event handler.</h1>
     28 
     29 <div id="grey" class="box" style="background-color:grey">
     30 </div>
     31 <button id="done">Done</button>
     32 
     33 <div id="console"></div>
     34 
     35 <script>
     36 
     37 var receivedEvents = [];
     38 var done_clicked = false;
     39 
     40 var eventList = ["mousedown", "mouseup", "mousemove",
     41                 "pointerdown", "pointerup", "pointermove"];
     42 
     43 
     44 var removeNodeEvent = "";
     45 
     46 var greyDiv = document.getElementById("grey");
     47 eventList.forEach(function(eventName) {
     48  greyDiv.addEventListener(eventName, function(event) {
     49    if (event.eventPhase == Event.AT_TARGET) {
     50      receivedEvents.push(event.type+"@grey");
     51    }
     52  });
     53 });
     54 
     55 function createGreenBoxAndAddListeners() {
     56  var greenDiv = document.createElement("div");
     57  greenDiv.setAttribute("class", "box");
     58  greenDiv.id = "green";
     59  greyDiv.innerHTML = "";
     60  greyDiv.appendChild(greenDiv);
     61  eventList.forEach(function(eventName) {
     62    greenDiv.addEventListener(eventName, function(event) {
     63      if (event.eventPhase == Event.AT_TARGET) {
     64        receivedEvents.push(event.type+"@green");
     65        if (event.type == removeNodeEvent) {
     66          greenDiv.parentNode.removeChild(greenDiv);
     67        }
     68      }
     69    });
     70  });
     71 }
     72 
     73 var done_button = document.getElementById("done");
     74 done_button.addEventListener("click",()=>done_clicked=true);
     75 
     76 function performActions() {
     77  var rect = document.getElementById("green").getBoundingClientRect();
     78  var x1 = Math.ceil(rect.left + 5);
     79  var y1 = Math.ceil(rect.top + 5);
     80 
     81  return new test_driver.Actions()
     82              .pointerMove(0, 0)
     83              .pointerMove(x1, y1)
     84              .pointerDown()
     85              .pointerUp()
     86              .send()
     87              .then(()=> test_driver.click(done_button));
     88 }
     89 
     90 function testScenario(targetEvent, expectedEvents, description) {
     91  promise_test(async () => {
     92    receivedEvents = [];
     93    removeNodeEvent = targetEvent;
     94    createGreenBoxAndAddListeners();
     95 
     96    await performActions();
     97    assert_array_equals(receivedEvents, expectedEvents);
     98  }, description);
     99 }
    100 
    101 testScenario("", ["pointermove@green", "mousemove@green", "pointerdown@green", "mousedown@green", "pointerup@green", "mouseup@green"],
    102              "Compat mouse events with no node removal");
    103 
    104 testScenario("pointermove", ["pointermove@green", "mousemove@grey", "pointerdown@grey", "mousedown@grey", "pointerup@grey", "mouseup@grey"],
    105              "Compat mouse events with node removal on pointermove");
    106 
    107 testScenario("pointerdown", ["pointermove@green", "mousemove@green", "pointerdown@green", "mousedown@grey", "pointerup@grey", "mouseup@grey"],
    108              "Compat mouse events with node removal on pointerdown");
    109 
    110 testScenario("pointerup", ["pointermove@green", "mousemove@green", "pointerdown@green", "mousedown@green", "pointerup@green", "mouseup@grey"],
    111              "Compat mouse events with node removal on pointerup");
    112 </script>