| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test.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> |
| <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> |
