third_party/WebKit/LayoutTests/fast/dom/HTMLDialogElement/modal-dialog-blocks-mouse-events.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 #inert-div {
   6     height: 100px;
   7     width: 100px;
   8     background: blue;
   9 }
  10
  11 dialog {
  12     width: 100px;
  13 }
  14
  15 dialog::backdrop {
  16     display: none;
  17 }
  18
  19 #dialog-div {
  20     height: 100px;
  21     width: 100px;
  22     background: red;
  23 }
  24 </style>
  25 <script src="../../../resources/js-test.js"></script>
  26 </head>
  27 <body>
  28 <div id="inert-div"></div>
  29 <dialog id="dialog">
  30     <div id="dialog-div"></div>
  31 </dialog>
  32 <script>
  33 description('Test for bug 110952. Ensure that mouse events are not ' +
  34             'dispatched to an inert node. To test manually, move the mouse ' +
  35             'to the blue box, click, and then move the mouse outside. Then ' +
  36             'repeat for the red box. The test succeeds if both boxes turn ' +
  37             'green.');
  38
  39 function clickOn(element)
  40 {
  41     if (!window.eventSender)
  42         return;
  43     var rect = element.getBoundingClientRect();
  44     eventSender.mouseMoveTo(rect.left + rect.width / 2, rect.top + rect.height / 2);
  45     eventSender.mouseDown();
  46     eventSender.mouseUp();
  47     eventSender.mouseMoveTo(0, 0);
  48 }
  49
  50 if (window.testRunner)
  51     testRunner.dumpAsText();
  52
  53 dialog.showModal();
  54
  55 inertDivHandledEvent = false;
  56 inertDiv = document.getElementById('inert-div');
  57 eventFiredOnInertNode = function(event) {
  58     inertDivHandledEvent = true;
  59     inertDiv.style.backgroundColor = 'red';
  60 };
  61
  62 events =  ['mousedown', 'mouseup', 'click', 'mousemove', 'mouseover', 'mouseout'];
  63 dialogDiv = document.getElementById('dialog-div');
  64 handledEvents = {};
  65 handledEvents.dialogDiv = {};
  66 eventFiredOnDialog = function(event) {
  67     handledEvents.dialogDiv[event.type] = true;
  68     if (Object.keys(handledEvents.dialogDiv).length == events.length)
  69         dialogDiv.style.backgroundColor = 'green';
  70 };
  71
  72 handledEvents.document = {};
  73 expectedEventCountForDocument = events.length - 1; // document won't get 'mouseout'
  74 eventFiredOnDocument = function(event) {
  75     handledEvents.document[event.type] = true;
  76     if (Object.keys(handledEvents.document).length == document.expectedEventCount && !inertDivHandledEvent)
  77         inertDiv.style.backgroundColor = 'green';
  78 };
  79
  80 for (var i = 0; i < events.length; ++i) {
  81     inertDiv.addEventListener(events[i], eventFiredOnInertNode);
  82     dialogDiv.addEventListener(events[i], eventFiredOnDialog);
  83     document.addEventListener(events[i], eventFiredOnDocument);
  84 }
  85
  86 debug('Clicking on inert box');
  87 clickOn(inertDiv);
  88 shouldBeFalse('inertDivHandledEvent');
  89 shouldBe('Object.keys(handledEvents.document).length', 'expectedEventCountForDocument');
  90
  91 debug('Clicking on non-inert box');
  92 clickOn(dialogDiv);
  93 shouldBeFalse('inertDivHandledEvent');
  94 shouldBe('Object.keys(handledEvents.dialogDiv).length', 'events.length');
  95 </script>
  96 </body>
  97 </html>