Index: LayoutTests/fast/events/mouseenter-mouseleave.html |
diff --git a/LayoutTests/fast/events/mouseenter-mouseleave.html b/LayoutTests/fast/events/mouseenter-mouseleave.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..0408f78e4252cf70f3a3b62427ed270b49a15b21 |
--- /dev/null |
+++ b/LayoutTests/fast/events/mouseenter-mouseleave.html |
@@ -0,0 +1,95 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+ <script src="../js/resources/js-test-pre.js"></script> |
+ <script> |
+ window.jsTestIsAsync = true; |
+ |
+ document.addEventListener('DOMContentLoaded', function () { |
+ listenForEvents(document.querySelector('#outer')); |
+ listenForEvents(document.querySelector('#inner1')); |
+ listenForEvents(document.querySelector('#inner2')); |
+ listenForEvents(document.querySelector('#inner3')); |
+ |
+ if (window.testRunner) { |
+ eventSender.mouseMoveTo(1, 1); |
+ eventSender.mouseMoveTo(90,140); |
+ debug("// Entering #outer"); |
+ eventSender.mouseMoveTo(110,140); |
+ debug("// Entering #inner1"); |
+ eventSender.mouseMoveTo(130,140); |
+ debug("// Entering #inner3 (and therefore also #inner2)"); |
+ eventSender.mouseMoveTo(170,140); |
+ debug("// Leaving #inner3 and #inner2, but not #outer"); |
+ eventSender.mouseMoveTo(180,140); |
+ debug("// Leaving #outer"); |
+ eventSender.mouseMoveTo(210,140); |
+ } |
+ |
+ finishJSTest(); |
+ }); |
+ |
+ function handleEvent(e) { |
+ var phases = ['', 'capturing', 'at target', 'bubbling']; |
+ var target = e.target ? e.target : e.srcElement; |
+ if (target.id && target.id != "console") { |
+ debug(e.type + " (" + phases[e.eventPhase] + ") on " + target.id); |
+ if (e.relatedTarget && e.relatedTarget.id) |
+ debug('- Related target: ' + e.relatedTarget.id); |
+ } |
+ |
+ } |
+ |
+ function listenForEvents(el) { |
+ ['mouseover', 'mouseout', 'mouseenter', 'mouseleave'].forEach(function(type) { |
+ el.addEventListener(type, handleEvent); |
+ }); |
+ } |
+ </script> |
+ <script src="../js/resources/js-test-post.js"></script> |
+ |
+ <style> |
+ #outer { |
+ background: blue; |
+ height: 100px; |
+ left: 100px; |
+ position: absolute; |
+ top: 100px; |
+ width: 100px; |
+ } |
+ |
+ #inner1 { |
+ background: red; |
+ height: 50px; |
+ left: 20px; |
+ position: absolute; |
+ top: 20px; |
+ width: 50px; |
+ } |
+ |
+ #inner2 { |
+ background: yellow; |
+ height: 20px; |
+ left: 60px; |
+ position: absolute; |
+ top: 30px; |
+ width: 20px; |
+ } |
+ |
+ #inner3 { |
+ background-color: green; |
+ height: 10px; |
+ margin: 5px; |
+ width: 10px; |
+ } |
+ </style> |
+</head> |
+<body> |
+ <div id="outer"> |
+ <div id="inner1"></div> |
+ <div id="inner2"> |
+ <div id="inner3"></div> |
+ </div> |
+ </div> |
+</body> |
+</html> |