<!DOCTYPE HTML>
<script src="../../../resources/js-test.js"></script>
<style>
div.box {
  margin: 10px;
  padding: 50px;
  float: left;
}
</style>

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

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

<script>
description("Verifies that pointerenter/leave/over/out are fired correctly for corresponding mouse events.");

function phaseString(eventPhase) {
  if (eventPhase == Event.NONE)
    return "none";
  else if (eventPhase == Event.CAPTURING_PHASE)
    return "capture";
  else if (eventPhase == Event.BUBBLING_PHASE)
    return "bubble";
  else if (eventPhase == Event.AT_TARGET)
    return "target";
  else
    return "***ERROR***";
}

function init() {
  var eventList = ["mouseenter", "mouseleave", "mouseover", "mouseout",
                   "pointerenter", "pointerleave", "pointerover", "pointerout"];

  ["grey", "green"].forEach(function(id) {
    var targetDiv = document.getElementById(id);

    eventList.forEach(function(eventName) {
      targetDiv.addEventListener(eventName, function(event) {

        var phaseMsg = ", at phase=" + phaseString(event.eventPhase);

        debug(id + " received " + event.type + phaseMsg);
      });
    });

  });
}

function runTests() {
  var rect = document.getElementById("grey").getBoundingClientRect();
  var x1 = rect.left - 3;
  var y1 = rect.top - 5;

  var rect = document.getElementById("green").getBoundingClientRect();
  var x2 = rect.left + 3;
  var y2 = rect.top + 5;

  eventSender.mouseMoveTo(x1, y1);
  eventSender.mouseMoveTo(x2, y2);
  eventSender.mouseMoveTo(x1, y1);
}

init();
if (window.eventSender)
  runTests();
else
  debug("This test requires eventSender");

</script>