<!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: 5px;
  padding: 20px;
  float: left;
}
#grey {
  width: 50px;
  height: 50px;
}
</style>

<h1>Verifies the compatibility mouse events are sent correctly when the node is deleted on pointer event handler.</h1>

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

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

<script>

var receivedEvents = [];

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


var removeNodeEvent = "";

var greyDiv = document.getElementById("grey");
eventList.forEach(function(eventName) {
  greyDiv.addEventListener(eventName, function(event) {
    if (event.eventPhase == Event.AT_TARGET) {
      receivedEvents.push(event.type+"@grey");
    }
  });
});

function createGreenBoxAndAddListeners() {
  var greenDiv = document.createElement("div");
  greenDiv.setAttribute("class", "box");
  greenDiv.id = "green";
  greyDiv.innerHTML = "";
  greyDiv.appendChild(greenDiv);
  eventList.forEach(function(eventName) {
    greenDiv.addEventListener(eventName, function(event) {
      if (event.eventPhase == Event.AT_TARGET) {
        receivedEvents.push(event.type+"@green");
        if (event.type == removeNodeEvent) {
          greenDiv.parentNode.removeChild(greenDiv);
        }
      }
    });
  });
}

function performActions() {
  var rect = document.getElementById("green").getBoundingClientRect();
  var x1 = rect.left + 5;
  var y1 = rect.top + 5;

  return new test_driver.Actions()
              .pointerMove(0, 0)
              .pointerMove(rect.left + 5, rect.top + 5)
              .pointerDown(0)
              .pointerUp(0)
              .send()
              .then( () => {
    return resolveWhen( () => receivedEvents.length == 6 );
  });
}

function testScenario(targetEvent, expectedEvents, description) {
  promise_test(async () => {
    removeNodeEvent = targetEvent;
    receivedEvents = [];
    createGreenBoxAndAddListeners();

    await performActions();
    assert_array_equals(receivedEvents, expectedEvents);
  }, description);
}

testScenario("", ["pointermove@green", "mousemove@green", "pointerdown@green", "mousedown@green", "pointerup@green", "mouseup@green"],
              "Compat mouse events with no node removal");

testScenario("pointermove", ["pointermove@green", "mousemove@grey", "pointerdown@grey", "mousedown@grey", "pointerup@grey", "mouseup@grey"],
              "Compat mouse events with node removal on pointermove");

testScenario("pointerdown", ["pointermove@green", "mousemove@green", "pointerdown@green", "mousedown@grey", "pointerup@grey", "mouseup@grey"],
              "Compat mouse events with node removal on pointerdown");

testScenario("pointerup", ["pointermove@green", "mousemove@green", "pointerdown@green", "mousedown@green", "pointerup@green", "mouseup@grey"],
              "Compat mouse events with node removal on pointerup");
</script>