Index: LayoutTests/fast/events/mouseenter-mouseleave-chained-listeners.html |
diff --git a/LayoutTests/fast/events/mouseenter-mouseleave-chained-listeners.html b/LayoutTests/fast/events/mouseenter-mouseleave-chained-listeners.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..1eb9dc47ebf46fa522dc2be041e0706939b51c3d |
--- /dev/null |
+++ b/LayoutTests/fast/events/mouseenter-mouseleave-chained-listeners.html |
@@ -0,0 +1,78 @@ |
+<!DOCTYPE html> |
+<html> |
+<head> |
+ <script src="../js/resources/js-test-pre.js"></script> |
+ <script> |
+ window.jsTestIsAsync = true; |
+ |
+ document.addEventListener('DOMContentLoaded', function () { |
+ var outer = document.querySelector('#outer'); |
+ var inner1 = document.querySelector('#inner1'); |
+ var inner2 = document.querySelector('#inner2'); |
+ |
+ [outer, inner1, inner2].forEach(function (el) { |
+ ['mouseover', 'mouseout', 'mouseenter', 'mouseleave'].forEach(function (type) { |
+ if (el === inner2 && (type === 'mouseenter' || type === 'mouseleave')) |
+ return; |
+ el.addEventListener(type, handleEvent); |
+ }); |
+ }); |
+ |
+ if (window.testRunner) { |
+ eventSender.mouseMoveTo(1, 125); |
+ |
+ debug('// Entering #inner1'); |
+ eventSender.mouseMoveTo(75, 125); |
+ |
+ debug('// Entering #outer and #inner2'); |
+ eventSender.mouseMoveTo(125, 125); |
+ } |
+ |
+ finishJSTest(); |
+ }); |
+ |
+ function handleEvent(e) { |
+ var phases = ['', 'capturing', 'at target', 'bubbling']; |
+ var target = e.target ? e.target : e.srcElement; |
+ debug(e.type + " (" + phases[e.eventPhase] + ") on " + target.id); |
+ |
+ if (e.type === 'mouseleave' && target.id === 'inner1') { |
+ debug('// Setting capturing mouseenter handler on #outer from #inner1\'s mouseleave handler.'); |
+ document.querySelector('#outer').addEventListener('mouseenter', handleEvent, true); |
+ } |
+ } |
+ </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 { |
+ position: absolute; |
+ height: 50px; |
+ width: 50px; |
+ left: -50px; |
+ background: green; |
+ } |
+ |
+ #inner2 { |
+ background: red; |
+ height: 50px; |
+ position: absolute; |
+ width: 50px; |
+ } |
+ </style> |
+</head> |
+<body> |
+ <div id="outer"> |
+ <div id="inner1"></div> |
+ <div id="inner2"></div> |
+ </div> |
+</body> |
+</html> |