pointerevent_mouse-pointer-updown-events.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /pointerevents/compat/pointerevent_mouse-pointer-updown-events.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<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 type="text/javascript" src="../pointerevent_support.js"></script>

<style>

div.box {

  margin: 10px;

  padding: 50px;

  float: left;

</style>

<h1>Verifies that pointerup/down are fired correctly for corresponding mouse events</h1>

<div id="lightgreen" class="box" style="background-color:lightgreen">

  <div id="green" class="box" style="background-color:green">

  </div>

</div>

<div id="console"></div>

<script>

var eventsReceived = [];

function init() {

  var eventList = ["mousedown", "mouseup", "pointerdown", "pointerup"];

  ["green", "lightgreen"].forEach(function(id) {

    var targetDiv = document.getElementById(id);

    eventList.forEach(function(eventName) {

      targetDiv.addEventListener(eventName, function(event) {

        eventsReceived.push(`${event.type}@${id}`);

});

});

});

function performActions() {

  var rect = document.getElementById("green").getBoundingClientRect();

  var x1 = Math.ceil(rect.left + 5);

  var y1 = Math.ceil(rect.top + 5);

  var rect = document.getElementById("lightgreen").getBoundingClientRect();

  var x2 = Math.ceil(rect.left + 5);

  var y2 = Math.ceil(rect.top + 5);

  return new test_driver.Actions()

            .pointerMove(x1, y1)

            .pointerDown()

            .pointerUp()

            .pointerDown()

            .pointerMove(x2, y2)

            .pointerUp()

            .pointerDown()

            .pointerMove(x1, y1)

            .pointerUp()

            .send()

            .then(()=>resolveWhen(()=>eventsExpected.length === eventsReceived.length));

var eventsExpected = ["pointerdown@green", "pointerdown@lightgreen",

              "mousedown@green", "mousedown@lightgreen",

              "pointerup@green", "pointerup@lightgreen",

              "mouseup@green", "mouseup@lightgreen",

              "pointerdown@green", "pointerdown@lightgreen",

              "mousedown@green", "mousedown@lightgreen",

              "pointerup@lightgreen", "mouseup@lightgreen",

              "pointerdown@lightgreen", "mousedown@lightgreen",

              "pointerup@green", "pointerup@lightgreen",

              "mouseup@green", "mouseup@lightgreen"];

function runTests(){

  promise_test((test) => {

    return new Promise(async (resolve)=>{

      await performActions();

      test.step(()=>{

        assert_array_equals(eventsExpected, eventsReceived);

});

      resolve();

});

  }, "pointerup/down events are fired correctly for corresponding mouse events");

init();

runTests();

</script>