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