| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| <script> |
| window.jsTestIsAsync = true; |
| |
| document.addEventListener('DOMContentLoaded', function () { |
| 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); |
| } |
| |
| } |
| </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" onmouseenter="handleEvent(event)" onmouseleave="handleEvent(event)" onmouseover="handleEvent(event)" onmouseout="handleEvent(event)"> |
| <div id="inner1" onmouseenter="handleEvent(event)" onmouseleave="handleEvent(event)" onmouseover="handleEvent(event)" onmouseout="handleEvent(event)"></div> |
| <div id="inner2" onmouseenter="handleEvent(event)" onmouseleave="handleEvent(event)" onmouseover="handleEvent(event)" onmouseout="handleEvent(event)"> |
| <div id="inner3" onmouseenter="handleEvent(event)" onmouseleave="handleEvent(event)" onmouseover="handleEvent(event)" onmouseout="handleEvent(event)"></div> |
| </div> |
| </div> |
| </body> |
| </html> |
