tor-browser

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

inert-inlines.html (2804B)

      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.chromium.org/p/chromium/issues/detail?id=241699">
      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, click on all the "Click me"s.
     14 The test fails if you see red.
     15 </p>
     16 
     17 <style>
     18 dialog {
     19  width: 50px;
     20 }
     21 </style>
     22 
     23 <a id="a" href="javascript:void(0)">Click me</a>
     24 <button id="button">Click me</button>
     25 <div id="div" style="background-color: blue; width: 50px; height: 50px">Click meeee</div>
     26 <span id="span">Click me</span>
     27 <div id="dialog-parent" style="width: 50px; height: 50px">
     28  <span id="dialog-sibling">Click meeee</span>
     29  <dialog></dialog>
     30 </div>
     31 
     32 <script>
     33 promise_test(async () => {
     34  async function clickOn(element) {
     35    let absoluteTop = 0;
     36    let absoluteLeft = 0;
     37    for (let parentNode = element; parentNode; parentNode = parentNode.offsetParent) {
     38      absoluteLeft += parentNode.offsetLeft;
     39      absoluteTop += parentNode.offsetTop;
     40    }
     41 
     42    const x = Math.round(absoluteLeft + element.offsetWidth / 2);
     43    const y = Math.round(absoluteTop + element.offsetHeight / 2);
     44    const actions = new test_driver.Actions()
     45      .pointerMove(x, y)
     46      .pointerDown()
     47      .pointerUp()
     48      .pointerMove(0, 0);
     49    await actions.send();
     50  }
     51 
     52  function eventFiredOnInertElement(e) {
     53    e.target.style.background = 'red';
     54    inertElementFiredOn = true;
     55  }
     56 
     57  inertElements = ['a', 'button', 'div', 'span']
     58  inertElements.forEach(function(id) {
     59    element = document.getElementById(id);
     60    element.addEventListener('click', eventFiredOnInertElement);
     61    element.addEventListener('mousemove', eventFiredOnInertElement);
     62  });
     63 
     64  document.addEventListener('click', function(e) {
     65    document.firedOn = true;
     66  });
     67 
     68  document.getElementById('dialog-parent').addEventListener('click', function(e) {
     69    e.target.firedOn = true;
     70  });
     71 
     72  document.querySelector('dialog').showModal();
     73  for (const id of inertElements) {
     74    expectedTarget = document;
     75    if (id == 'dialog-sibling')
     76      expectedTarget = document.getElementById('dialog-parent')
     77    element = document.getElementById(id);
     78    inertElementFiredOn = false;
     79    expectedTarget.firedOn = false;
     80    await clickOn(element);
     81    assert_false(inertElementFiredOn, 'clicking on ' + id);
     82    assert_true(expectedTarget.firedOn, 'clicking on ' + id);
     83  }
     84 }, 'Tests that inert inlines do not receive mouse events.');
     85 </script>