pointerevent_mouse-on-object.html | Explore in Territory

<!DOCTYPE HTML>
<script type="text/javascript" src="/resources/testharness.js"></script>
<script type="text/javascript" src="/resources/testharnessreport.js"></script>
<script type="text/javascript" src="/resources/testdriver.js"></script>
<script type="text/javascript" src="/resources/testdriver-vendor.js"></script>
<script type="text/javascript" src="/resources/testdriver-actions.js"></script>
<script type="text/javascript" src="../pointerevent_support.js"></script>

<style>
#obj {
  width: 50px;
  height: 50px;
  padding: 50px;
  background-color: lightblue;
  border:1px solid black;
}
div {
  display: block;
}
</style>

<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>


<p>
  To test that when clicking inside the blue rectangle all compat mouse events are correct:
  <ul>
    <li> Click once in the blue rectangle
    <li> Click the Done button
  </ul>
</p>
<p>
  To test that when dragging mouse outside all compat mouse events are correct:
  <ul>
    <li> Press left mouse button in the blue rectangle
    <li> Drag the mouse cursor out of the blue rectangle
    <li> Release the left mouse button
    <li> Click the Done button
  </ul>
</p>
<!-- draggable is set to false because there is a difference between auto draggable value in different browsers -->
<object id="obj" draggable="false"></object>
<button id="done">Done</button>
<div id="log"></div>
<script>
var target = document.getElementById("obj");
var done = document.getElementById("done");

var rect = target.getBoundingClientRect();
var done_clicked = 0;
var receivedEvents = [];
var previous_done_clicked = 0;

["mousedown", "mouseup", "mousemove", "pointerdown", "pointerup", "pointermove"].forEach(function(eventName) {
  target.addEventListener(eventName, function(event) {
    // This will clear receivedEvents once another test starts
    if(previous_done_clicked !== done_clicked){
      previous_done_clicked = done_clicked;
      receivedEvents = [];
    }
    receivedEvents.push(event.type);
  });
});

// Simple test to check that passive listeners can't prevent compatibility events.
target.addEventListener("pointerdown", function(event) {
    event.preventDefault();
  },
  { passive: true, once: true });

document.getElementById('done').addEventListener('click', (e) => done_clicked++);

// Need to prevent the default behaviour for firefox
target.addEventListener("dragstart", (e)=>e.preventDefault());

if(window.promise_test){
  promise_test(async() => {
    receivedEvents = [];

    await new test_driver.Actions()
          .pointerMove(Math.ceil(rect.left+5), Math.ceil(rect.top+5))
          .pointerDown()
          .pointerUp()
          .send()
          .then(() => clickInTarget("mouse", done));
    await resolveWhen(() => done_clicked === 1);

    assert_array_equals(receivedEvents.filter(isPointerEvent), ["pointermove", "pointerdown", "pointerup"],
                        "Click on object should result in the correct sequence of pointer events");
    assert_array_equals(receivedEvents.filter(isMouseEvent), ["mousemove", "mousedown", "mouseup"],
                        "Click on object should result in the correct sequence of mouse events");
    assert_true(arePointerEventsBeforeCompatMouseEvents(receivedEvents),
                        "Click on object should result in the correct sequence of events: " + receivedEvents);
  }, "Normal click event sequence within object");

  promise_test(async() => {
    receivedEvents = [];

    await new test_driver.Actions()
          .pointerMove(Math.ceil(rect.left+5), Math.ceil(rect.top+5))
          .pointerDown()
          .pointerMove(Math.ceil(rect.left-5), Math.ceil(rect.top-5))
          .pointerUp()
          .send()
          .then(() => clickInTarget("mouse", done));
    await resolveWhen(() => done_clicked === 2);

    assert_array_equals(receivedEvents.filter(isPointerEvent), ["pointermove", "pointerdown", "pointermove", "pointerup"],
                        "Drag from object should result in the correct sequence of pointer events");
    assert_array_equals(receivedEvents.filter(isMouseEvent), ["mousemove", "mousedown", "mousemove", "mouseup"],
                        "Drag from object should result in the correct sequence of mouse events");
    assert_true(arePointerEventsBeforeCompatMouseEvents(receivedEvents),
                        "Drag from object should result in the correct sequence of events: " + receivedEvents);

  }, "Click and drag outside of object event sequence");
}
</script>
chromium/third_party/blink/web_tests/external/wpt/pointerevents/compat/pointerevent_mouse-on-object.html
