| <!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> |
