| <!DOCTYPE html> |
| <link rel=author href="mailto:jarhar@chromium.org"> |
| <link rel=author href="mailto:falken@chromium.org"> |
| <link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element"> |
| <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=241699"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| |
| <p> |
| To test manually, click on all the "Click me"s. |
| The test fails if you see red. |
| </p> |
| |
| <style> |
| dialog { |
| width: 50px; |
| } |
| </style> |
| |
| <a id="a" href="javascript:void(0)">Click me</a> |
| <button id="button">Click me</button> |
| <div id="div" style="background-color: blue; width: 50px; height: 50px">Click meeee</div> |
| <span id="span">Click me</span> |
| <div id="dialog-parent" style="width: 50px; height: 50px"> |
| <span id="dialog-sibling">Click meeee</span> |
| <dialog></dialog> |
| </div> |
| |
| <script> |
| promise_test(async () => { |
| async function clickOn(element) { |
| let absoluteTop = 0; |
| let absoluteLeft = 0; |
| for (let parentNode = element; parentNode; parentNode = parentNode.offsetParent) { |
| absoluteLeft += parentNode.offsetLeft; |
| absoluteTop += parentNode.offsetTop; |
| } |
| |
| const x = absoluteLeft + element.offsetWidth / 2; |
| const y = absoluteTop + element.offsetHeight / 2; |
| const actions = new test_driver.Actions() |
| .pointerMove(x, y) |
| .pointerDown() |
| .pointerUp() |
| .pointerMove(0, 0); |
| await actions.send(); |
| } |
| |
| function eventFiredOnInertElement(e) { |
| e.target.style.background = 'red'; |
| inertElementFiredOn = true; |
| } |
| |
| inertElements = ['a', 'button', 'div', 'span'] |
| inertElements.forEach(function(id) { |
| element = document.getElementById(id); |
| element.addEventListener('click', eventFiredOnInertElement); |
| element.addEventListener('mousemove', eventFiredOnInertElement); |
| }); |
| |
| document.addEventListener('click', function(e) { |
| document.firedOn = true; |
| }); |
| |
| document.getElementById('dialog-parent').addEventListener('click', function(e) { |
| e.target.firedOn = true; |
| }); |
| |
| document.querySelector('dialog').showModal(); |
| for (const id of inertElements) { |
| expectedTarget = document; |
| if (id == 'dialog-sibling') |
| expectedTarget = document.getElementById('dialog-parent') |
| element = document.getElementById(id); |
| inertElementFiredOn = false; |
| expectedTarget.firedOn = false; |
| await clickOn(element); |
| assert_false(inertElementFiredOn, 'clicking on ' + id); |
| assert_true(expectedTarget.firedOn, 'clicking on ' + id); |
| } |
| }, 'Tests that inert inlines do not receive mouse events.'); |
| </script> |