| <!DOCTYPE html> |
| <html> |
| <head> |
| <style> |
| #inert-div { |
| height: 100px; |
| width: 100px; |
| background: blue; |
| } |
| |
| dialog { |
| width: 100px; |
| } |
| |
| dialog::backdrop { |
| display: none; |
| } |
| |
| #dialog-div { |
| height: 100px; |
| width: 100px; |
| background: red; |
| } |
| </style> |
| <script src="../../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div id="inert-div"></div> |
| <dialog id="dialog"> |
| <div id="dialog-div"></div> |
| </dialog> |
| <script> |
| description('Test for bug 110952. Ensure that mouse events are not ' + |
| 'dispatched to an inert node. To test manually, move the mouse ' + |
| 'to the blue box, click, and then move the mouse outside. Then ' + |
| 'repeat for the red box. The test succeeds if both boxes turn ' + |
| 'green.'); |
| |
| function clickOn(element) |
| { |
| if (!window.eventSender) |
| return; |
| var rect = element.getBoundingClientRect(); |
| eventSender.mouseMoveTo(rect.left + rect.width / 2, rect.top + rect.height / 2); |
| eventSender.mouseDown(); |
| eventSender.mouseUp(); |
| eventSender.mouseMoveTo(0, 0); |
| } |
| |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| dialog.showModal(); |
| |
| inertDivHandledEvent = false; |
| inertDiv = document.getElementById('inert-div'); |
| eventFiredOnInertNode = function(event) { |
| inertDivHandledEvent = true; |
| inertDiv.style.backgroundColor = 'red'; |
| }; |
| |
| events = ['mousedown', 'mouseup', 'click', 'mousemove', 'mouseover', 'mouseout']; |
| dialogDiv = document.getElementById('dialog-div'); |
| handledEvents = {}; |
| handledEvents.dialogDiv = {}; |
| eventFiredOnDialog = function(event) { |
| handledEvents.dialogDiv[event.type] = true; |
| if (Object.keys(handledEvents.dialogDiv).length == events.length) |
| dialogDiv.style.backgroundColor = 'green'; |
| }; |
| |
| handledEvents.document = {}; |
| expectedEventCountForDocument = events.length - 1; // document won't get 'mouseout' |
| eventFiredOnDocument = function(event) { |
| handledEvents.document[event.type] = true; |
| if (Object.keys(handledEvents.document).length == document.expectedEventCount && !inertDivHandledEvent) |
| inertDiv.style.backgroundColor = 'green'; |
| }; |
| |
| for (var i = 0; i < events.length; ++i) { |
| inertDiv.addEventListener(events[i], eventFiredOnInertNode); |
| dialogDiv.addEventListener(events[i], eventFiredOnDialog); |
| document.addEventListener(events[i], eventFiredOnDocument); |
| } |
| |
| debug('Clicking on inert box'); |
| clickOn(inertDiv); |
| shouldBeFalse('inertDivHandledEvent'); |
| shouldBe('Object.keys(handledEvents.document).length', 'expectedEventCountForDocument'); |
| |
| debug('Clicking on non-inert box'); |
| clickOn(dialogDiv); |
| shouldBeFalse('inertDivHandledEvent'); |
| shouldBe('Object.keys(handledEvents.dialogDiv).length', 'events.length'); |
| </script> |
| </body> |
| </html> |
