third_party/WebKit/LayoutTests/fast/events/touch/gesture/gesture-tap-mouse-events.html

   1 <!DOCTYPE HTML>
   2 <script src="../../../../resources/js-test.js"></script>
   3 <style>
   4 div {
   5   margin: 10px;
   6   padding: 50px;
   7   float: left;
   8 }
   9 #console {
  10   padding: 0px;
  11   float: none;
  12 }
  13 </style>
  14
  15 <div id="grey" style="background-color:grey">
  16   <div id="lightgreen" style="background-color:lightgreen">
  17     <div id="green" style="background-color:green;">
  18     </div>
  19   </div>
  20   <div id="lightblue" style="background-color:lightblue">
  21     <div id="blue" style="background-color:blue;">
  22     </div>
  23   </div>
  24 </div>
  25
  26 <div id="console"></div>
  27
  28 <script>
  29
  30 description("Verifies that tapping on an element sends mouse events to appropriate ancestors of the tapped element in correct order.");
  31
  32 var wasInside = {};
  33
  34 function init() {
  35   var divIds = ["grey", "lightgreen", "green", "lightblue", "blue"];
  36
  37   divIds.forEach(function(id) {
  38     wasInside[id] = false;
  39
  40     var targetDiv = document.getElementById(id);
  41
  42     targetDiv.addEventListener("mouseenter", function(event) {
  43       debug(id + " received mouseenter");
  44       shouldBeFalse("wasInside['" + id + "']");
  45       wasInside[id] = true;
  46     });
  47
  48     targetDiv.addEventListener("mouseleave", function(event) {
  49       debug(id + " received mouseleave");
  50       shouldBeTrue("wasInside['" + id + "']");
  51       wasInside[id] = false;
  52     });
  53
  54     targetDiv.addEventListener("mouseover", function(event) {
  55       if (event.eventPhase == Event.AT_TARGET)
  56         debug(id + " received mouseover");
  57     });
  58
  59     targetDiv.addEventListener("mouseout", function(event) {
  60       if (event.eventPhase == Event.AT_TARGET)
  61         debug(id + " received mouseout");
  62     });
  63
  64     targetDiv.addEventListener("mousemove", function(event) {
  65       if (event.eventPhase == Event.AT_TARGET)
  66         debug(id + " received mousemove");
  67     });
  68   });
  69 }
  70
  71 function sendGestureTap(id) {
  72   debug("-- sending gestureTap to " + id + " --");
  73   var rect = document.getElementById(id).getBoundingClientRect();
  74   eventSender.gestureTap(rect.left + 25, rect.top + 25, 20, 20);
  75 }
  76
  77 function sendMouseMove(id) {
  78   debug("-- sending mouseMove to " + id + " --");
  79   var rect = document.getElementById(id).getBoundingClientRect();
  80   eventSender.mouseMoveTo(rect.left + 25, rect.top + 25);
  81 }
  82
  83 init();
  84 if (window.eventSender) {
  85   debug("--- Tap-only tests ---");
  86   sendGestureTap("green");
  87   sendGestureTap("blue");
  88   sendGestureTap("blue");
  89   sendGestureTap("lightblue");
  90   debug("--- Interleaved tap/mouse tests ---");
  91   sendMouseMove("lightgreen");
  92   sendGestureTap("lightblue");
  93   sendMouseMove("lightgreen");
  94   sendMouseMove("lightgreen");
  95 } else {
  96   debug("This test requires eventSender");
  97 }
  98 </script>