diff options
Diffstat (limited to 'testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-inlines.html')
-rw-r--r-- | testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-inlines.html | 85 |
1 files changed, 85 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-inlines.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-inlines.html new file mode 100644 index 0000000000..5ee4113985 --- /dev/null +++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/inert-inlines.html @@ -0,0 +1,85 @@ +<!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 = Math.round(absoluteLeft + element.offsetWidth / 2); + const y = Math.round(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> |