tor-browser

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

pointerevent_mouse-on-object.html (4624B)

      1 <!DOCTYPE HTML>
      2 <script type="text/javascript" src="/resources/testharness.js"></script>
      3 <script type="text/javascript" src="/resources/testharnessreport.js"></script>
      4 <script type="text/javascript" src="/resources/testdriver.js"></script>
      5 <script type="text/javascript" src="/resources/testdriver-vendor.js"></script>
      6 <script type="text/javascript" src="/resources/testdriver-actions.js"></script>
      7 <script type="text/javascript" src="../pointerevent_support.js"></script>
      8 
      9 <style>
     10 #obj {
     11  width: 50px;
     12  height: 50px;
     13  padding: 50px;
     14  background-color: lightblue;
     15  border:1px solid black;
     16 }
     17 div {
     18  display: block;
     19 }
     20 </style>
     21 
     22 <h1>Verifies that mouse activities on an object fire pointerevents. It expected to get pointerup when the pointerdown happened on the object for compatibility with flash objects.</h1>
     23 
     24 
     25 <p>
     26  To test that when clicking inside the blue rectangle all compat mouse events are correct:
     27  <ul>
     28    <li> Click once in the blue rectangle
     29    <li> Click the Done button
     30  </ul>
     31 </p>
     32 <p>
     33  To test that when dragging mouse outside all compat mouse events are correct:
     34  <ul>
     35    <li> Press left mouse button in the blue rectangle
     36    <li> Drag the mouse cursor out of the blue rectangle
     37    <li> Release the left mouse button
     38    <li> Click the Done button
     39  </ul>
     40 </p>
     41 <!-- draggable is set to false because there is a difference between auto draggable value in different browsers -->
     42 <object id="obj" draggable="false"></object>
     43 <button id="done">Done</button>
     44 <div id="log"></div>
     45 <script>
     46 var target = document.getElementById("obj");
     47 var done = document.getElementById("done");
     48 
     49 var rect = target.getBoundingClientRect();
     50 var done_clicked = 0;
     51 var receivedEvents = [];
     52 var previous_done_clicked = 0;
     53 
     54 ["mousedown", "mouseup", "mousemove", "pointerdown", "pointerup", "pointermove"].forEach(function(eventName) {
     55  target.addEventListener(eventName, function(event) {
     56    // This will clear receivedEvents once another test starts
     57    if(previous_done_clicked !== done_clicked){
     58      previous_done_clicked = done_clicked;
     59      receivedEvents = [];
     60    }
     61    receivedEvents.push(event.type);
     62  });
     63 });
     64 
     65 // Simple test to check that passive listeners can't prevent compatibility events.
     66 target.addEventListener("pointerdown", function(event) {
     67    event.preventDefault();
     68  },
     69  { passive: true, once: true });
     70 
     71 document.getElementById('done').addEventListener('click', (e) => done_clicked++);
     72 
     73 // Need to prevent the default behaviour for firefox
     74 target.addEventListener("dragstart", (e)=>e.preventDefault());
     75 
     76 if(window.promise_test){
     77  promise_test(async() => {
     78    receivedEvents = [];
     79 
     80    await new test_driver.Actions()
     81          .pointerMove(Math.ceil(rect.left+5), Math.ceil(rect.top+5))
     82          .pointerDown()
     83          .pointerUp()
     84          .send()
     85          .then(() => clickInTarget("mouse", done));
     86    await resolveWhen(() => done_clicked === 1);
     87 
     88    assert_array_equals(receivedEvents.filter(isPointerEvent), ["pointermove", "pointerdown", "pointerup"],
     89                        "Click on object should result in the correct sequence of pointer events");
     90    assert_array_equals(receivedEvents.filter(isMouseEvent), ["mousemove", "mousedown", "mouseup"],
     91                        "Click on object should result in the correct sequence of mouse events");
     92    assert_true(arePointerEventsBeforeCompatMouseEvents(receivedEvents),
     93                        "Click on object should result in the correct sequence of events: " + receivedEvents);
     94  }, "Normal click event sequence within object");
     95 
     96  promise_test(async() => {
     97    receivedEvents = [];
     98 
     99    await new test_driver.Actions()
    100          .pointerMove(Math.ceil(rect.left+5), Math.ceil(rect.top+5))
    101          .pointerDown()
    102          .pointerMove(Math.ceil(rect.left-5), Math.ceil(rect.top-5))
    103          .pointerUp()
    104          .send()
    105          .then(() => clickInTarget("mouse", done));
    106    await resolveWhen(() => done_clicked === 2);
    107 
    108    assert_array_equals(receivedEvents.filter(isPointerEvent), ["pointermove", "pointerdown", "pointermove", "pointerup"],
    109                        "Drag from object should result in the correct sequence of pointer events");
    110    assert_array_equals(receivedEvents.filter(isMouseEvent), ["mousemove", "mousedown", "mousemove", "mouseup"],
    111                        "Drag from object should result in the correct sequence of mouse events");
    112    assert_true(arePointerEventsBeforeCompatMouseEvents(receivedEvents),
    113                        "Drag from object should result in the correct sequence of events: " + receivedEvents);
    114 
    115  }, "Click and drag outside of object event sequence");
    116 }
    117 </script>