pointerevent_mouse-pointer-preventdefault.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /pointerevents/compat/pointerevent_mouse-pointer-preventdefault.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<title>Effect of pointer event prevent-default on compat mouse event</title>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script src="/resources/testdriver.js"></script>

<script src="/resources/testdriver-vendor.js"></script>

<script src="/resources/testdriver-actions.js"></script>

<script src="../pointerevent_support.js"></script>

<style>

  div {

    margin: 20px;

    padding: 20px;

    background-color: green;

    user-select: none; // Prevents text selection on drag.

</style>

<div id="preventer" draggable="false">

  <div id="logger" draggable="false"></div>

  <!-- The following div makes the center of "preventer" outside "logger", which

    simplifies TestDriver action coordinates below. -->

  <div></div>

</div>

<div id="done"></div>

<script>

  'use strict';

  const logger = document.getElementById("logger");

  const preventer = document.getElementById("preventer");

  const done = document.getElementById("done");

  const preventing_handler = e => e.preventDefault();

  let received_events = [];

  const logged_pointer_events = ["pointerdown", "pointermove", "pointerup",

    "pointerenter", "pointerleave", "pointerover", "pointerout"];

  const logged_mouse_events = ["mousedown", "mousemove", "mouseup",

    "mouseenter", "mouseleave", "mouseover", "mouseout"];

  const expected_pointer_events = [

    "pointerover", "pointerenter", "pointermove", "pointerdown",

    "pointerout", "pointerleave", "pointerover", "pointerenter",

    "pointermove", "pointerup", "pointerout", "pointerleave"

];

  const expected_mouse_events_when_unaffected_by_pointer_events = [

    "mouseover", "mouseenter", "mousemove", "mousedown",

    "mouseout", "mouseleave", "mouseover", "mouseenter",

    "mousemove", "mouseup", "mouseout", "mouseleave"

];

  const expected_mouse_events_for_canceled_pointerdown = [

    "mouseover", "mouseenter", "mousemove",

    "mouseout", "mouseleave", "mouseover", "mouseenter",

    "mouseout", "mouseleave"

];

  logged_pointer_events.forEach(ename =>

    logger.addEventListener(ename, e => received_events.push(e.type)));

  logged_mouse_events.forEach(ename =>

    logger.addEventListener(ename, e => received_events.push(e.type)));

  for (let i = 0; i < logged_pointer_events.length; i++) {

    let event_to_cancel = logged_pointer_events[i];

    promise_test(async (test) => {

      received_events = [];

      preventer.addEventListener(event_to_cancel, preventing_handler);

      test.add_cleanup(() =>

          preventer.removeEventListener(event_to_cancel, preventing_handler));

      let click_on_done = getEvent("click", done, test);

      let actions = new test_driver.Actions()

        // Start outside all event listeners

        .pointerMove(0, 0)

        .pointerDown()

        .pointerUp()

        // Drag from inside to outside of "logger" then drag back to inside,

        // staying within "preventer" all the time

        .pointerMove(0, 0, { origin: logger })

        .pointerDown()

        .pointerMove(0, 0, { origin: preventer })

        .pointerUp()

        .pointerDown()

        .pointerMove(0, 0, { origin: logger })

        .pointerUp()

        // Click "done"

        .pointerMove(0, 0, { origin: done })

        .pointerDown()

        .pointerUp()

        .send();

      await actions;

      await click_on_done;

      assert_array_equals(received_events.filter(isPointerEvent),

        expected_pointer_events, "expected pointer events");

      if (event_to_cancel == "pointerdown") {

        assert_array_equals(received_events.filter(isMouseEvent),

          expected_mouse_events_for_canceled_pointerdown,

          "expected mouse events");

      } else {

        assert_array_equals(received_events.filter(isMouseEvent),

          expected_mouse_events_when_unaffected_by_pointer_events,

          "expected mouse events");

        assert_true(arePointerEventsBeforeCompatMouseEvents(received_events),

          "compat mouse events follow corresponding pointer events");

    }, `Effect of canceling ${event_to_cancel} on compat mouse events`);

</script>