gesture-tap-mouse-events.html | Explore in Territory

<!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="lightgreen" class="box" style="background-color:lightgreen">
    <div id="green" class="box" style="background-color:green;">
    </div>
  </div>
  <div id="lightblue" class="box" style="background-color:lightblue">
    <div id="blue" class="box" style="background-color:blue;">
    </div>
  </div>
</div>

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

<script>

description("Verifies that tapping on an element sends mouse events to appropriate ancestors of the tapped element in correct order.");

var wasInside = {};

function init() {
  var divIds = ["grey", "lightgreen", "green", "lightblue", "blue"];

  divIds.forEach(function(id) {
    wasInside[id] = false;

    var targetDiv = document.getElementById(id);

    targetDiv.addEventListener("mouseenter", function(event) {
      debug(id + " received mouseenter");
      shouldBeFalse("wasInside['" + id + "']");
      wasInside[id] = true;
    });

    targetDiv.addEventListener("mouseleave", function(event) {
      debug(id + " received mouseleave");
      shouldBeTrue("wasInside['" + id + "']");
      wasInside[id] = false;
    });

    targetDiv.addEventListener("mouseover", function(event) {
      if (event.eventPhase == Event.AT_TARGET)
        debug(id + " received mouseover");
    });

    targetDiv.addEventListener("mouseout", function(event) {
      if (event.eventPhase == Event.AT_TARGET)
        debug(id + " received mouseout");
    });

    targetDiv.addEventListener("mousemove", function(event) {
      if (event.eventPhase == Event.AT_TARGET)
        debug(id + " received mousemove");
    });
  });
}

function sendGestureTap(id) {
  debug("-- sending gestureTap to " + id + " --");
  var rect = document.getElementById(id).getBoundingClientRect();
  eventSender.gestureTap(rect.left + 25, rect.top + 25, 20, 20);
}

function sendMouseMove(id) {
  debug("-- sending mouseMove to " + id + " --");
  var rect = document.getElementById(id).getBoundingClientRect();
  eventSender.mouseMoveTo(rect.left + 25, rect.top + 25);
}

init();
if (window.eventSender) {
  debug("--- Tap-only tests ---");
  sendGestureTap("green");
  sendGestureTap("blue");
  sendGestureTap("blue");
  sendGestureTap("lightblue");
  debug("--- Interleaved tap/mouse tests ---");
  sendMouseMove("lightgreen");
  sendGestureTap("lightblue");
  sendMouseMove("lightgreen");
  sendMouseMove("lightgreen");
} else {
  debug("This test requires eventSender");
}
</script>
chromium/third_party/blink/web_tests/fast/events/touch/gesture/gesture-tap-mouse-events.html
