tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

modal-dialog-blocks-mouse-events.html (3175B)

      1 <!DOCTYPE html>
      2 <link rel=author href="mailto:jarhar@chromium.org">
      3 <link rel=author href="mailto:falken@chromium.org">
      4 <link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
      5 <link rel=help href="https://bugs.webkit.org/show_bug.cgi?id=110952">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="/resources/testdriver.js"></script>
      9 <script src="/resources/testdriver-actions.js"></script>
     10 <script src="/resources/testdriver-vendor.js"></script>
     11 
     12 <p>
     13 To test manually, move the mouse to the blue box, click, and then move the
     14 mouse outside. Then repeat for the red box. The test succeeds if both boxes
     15 turn green
     16 </p>
     17 
     18 <style>
     19 #inert-div {
     20  height: 100px;
     21  width: 100px;
     22  background: blue;
     23 }
     24 
     25 dialog {
     26  width: 100px;
     27 }
     28 
     29 dialog::backdrop {
     30  display: none;
     31 }
     32 
     33 #dialog-div {
     34  height: 100px;
     35  width: 100px;
     36  background: red;
     37 }
     38 </style>
     39 
     40 <div id="inert-div"></div>
     41 <dialog id="dialog">
     42  <div id="dialog-div"></div>
     43 </dialog>
     44 
     45 <script>
     46 promise_test(async () => {
     47  async function clickOn(element) {
     48    const rect = element.getBoundingClientRect();
     49    const actions = new test_driver.Actions()
     50      .pointerMove(
     51        Math.floor(rect.left + rect.width / 2),
     52        Math.floor(rect.top + rect.height / 2))
     53      .pointerDown()
     54      .pointerUp()
     55      .pointerMove(0, 0);
     56    await actions.send();
     57  }
     58 
     59  dialog.showModal();
     60 
     61  inertDivHandledEvent = false;
     62  inertDiv = document.getElementById('inert-div');
     63  eventFiredOnInertNode = function(event) {
     64    inertDivHandledEvent = true;
     65    inertDiv.style.backgroundColor = 'red';
     66  };
     67 
     68  events =  ['mousedown', 'mouseup', 'click', 'mousemove', 'mouseover', 'mouseout'];
     69  dialogDiv = document.getElementById('dialog-div');
     70  handledEvents = {};
     71  handledEvents.dialogDiv = {};
     72  eventFiredOnDialog = function(event) {
     73    handledEvents.dialogDiv[event.type] = true;
     74    if (Object.keys(handledEvents.dialogDiv).length == events.length)
     75      dialogDiv.style.backgroundColor = 'green';
     76  };
     77 
     78  handledEvents.document = {};
     79  expectedEventCountForDocument = events.length - 1; // document won't get 'mouseout'
     80  eventFiredOnDocument = function(event) {
     81    handledEvents.document[event.type] = true;
     82    if (Object.keys(handledEvents.document).length == document.expectedEventCount && !inertDivHandledEvent) {
     83      inertDiv.style.backgroundColor = 'green';
     84    }
     85  };
     86 
     87  for (let i = 0; i < events.length; ++i) {
     88    inertDiv.addEventListener(events[i], eventFiredOnInertNode);
     89    dialogDiv.addEventListener(events[i], eventFiredOnDialog);
     90    document.addEventListener(events[i], eventFiredOnDocument);
     91  }
     92 
     93  await clickOn(inertDiv);
     94  assert_false(inertDivHandledEvent, 'Clicking on inert box');
     95  assert_equals(Object.keys(handledEvents.document).length, expectedEventCountForDocument, 'Clicking on inert box');
     96 
     97  await clickOn(dialogDiv);
     98  assert_false(inertDivHandledEvent, 'Clicking on non-inert box');
     99  assert_equals(Object.keys(handledEvents.dialogDiv).length, events.length, 'Clicking on non-inert box');
    100 }, 'Ensure that mouse events are not dispatched to an inert node.');
    101 </script>