diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/uievents/click | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/uievents/click')
6 files changed, 425 insertions, 0 deletions
diff --git a/testing/web-platform/tests/uievents/click/auxclick_event.html b/testing/web-platform/tests/uievents/click/auxclick_event.html new file mode 100644 index 0000000000..8bb2e137f5 --- /dev/null +++ b/testing/web-platform/tests/uievents/click/auxclick_event.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Clicking with primary vs non-primary buttons</title> + <link rel="help" href="https://wicg.github.io/auxclick/"> + <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> + <style> +#target { + background-color: green; + height: 200px; + width: 200px; +} + </style> + </head> + <body> + <h1>Clicking with primary vs non-primary buttons</h1> + <p>Double-click on the green box with a non-primary button. When using mouse any button other than the left button is non-primary. If a "PASS" result appears, the test passes; otherwise, it fails.</p> + <div id="target"></div> + <script> + var test_auxclick = async_test("auxclick event sequence received."); + var actions_promise; + var target = document.querySelector('#target'); + document.addEventListener('contextmenu', event => { event.preventDefault(); }); + ['click', 'dblclick'].forEach(eventName => { + target.addEventListener(eventName, () => { + test_auxclick.step(() => { + assert_unreached(eventName + ' event should not be dispatched for non-primary buttons.'); + }); + }); + document.addEventListener(eventName, () => { + test_auxclick.step(() => { + assert_unreached('document should not receive ' + eventName + ' for non-primary buttons.'); + }); + }, true); + }); + var click_count = 0; + var events = []; + ['mousedown', 'mouseup'].forEach(eventName => { + target.addEventListener(eventName, event => { + events.push(event.type); + }); + }); + target.addEventListener('auxclick', event => { + events.push(event.type); + click_count++; + if (click_count==1) { + test (() => { + assert_equals(event.detail, click_count, 'detail attribute of auxclick should be the click count.'); + }, "First auxclick should have detail=1 indicating the fire click"); + } else { + test (() => { + assert_equals(event.detail, click_count, 'detail attribute of auxclick should be the click count.'); + }, "Second auxclick should have detail=2 indicating the fire click"); + test_auxclick.step(() => { + assert_array_equals(events, ['mousedown', 'mouseup', 'auxclick', 'mousedown', 'mouseup', 'auxclick'], + 'There should be two auxclick events for a non-primary button double click each preceded by one mousemove and one mouseup'); + assert_equals(event.detail, click_count, 'detail attribute of auxclick should be the click count.'); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_auxclick.done(); + }); + } + }); + + // Inject mouse double click events. + var actions = new test_driver.Actions(); + actions_promise = actions.pointerMove(0, 0, {origin: target}) + .pointerDown({button: actions.ButtonType.MIDDLE}) + .pointerUp({button: actions.ButtonType.MIDDLE}) + .pointerDown({button: actions.ButtonType.MIDDLE}) + .pointerUp({button: actions.ButtonType.MIDDLE}) + .send(); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/uievents/click/click_event_target_child_parent.html b/testing/web-platform/tests/uievents/click/click_event_target_child_parent.html new file mode 100644 index 0000000000..a09e5532af --- /dev/null +++ b/testing/web-platform/tests/uievents/click/click_event_target_child_parent.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Click targets the nearest common ancestor</title> + <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> + <style> + div { + padding: 10px; + margin: 5px; + } + a { + background: grey; + } + </style> + </head> + <body id='body'> + <h1>Click targeting when targets of down and up are child and parents</h1> + This test verifies that click event always goes to the first common ancestor of down and up event targets. + + <ul> + <li>Press down the primary button on link 1 and move onto green container and release.</li> + <li>Press down the primary button on red container and move onto link 2 and release.</li> + <li>Click done.</li> + </ul> + + <div id="link_container1" style="background: green"> + <a id="link1" href="#">link1</a> + </div> + + <div id="link_container2" style="background: red"> + <a id="link2" href="#">link2</a> + </div> + <button id="done">Done</button> + <script> + var test_click_target = async_test("Click targets the nearest common ancestor"); + var actions_promise; + + // Prevent drag to avoid interfering with the click. + document.addEventListener('dragstart', (e) => e.preventDefault()); + + var events = []; + var nodes = ['link_container1', 'link1', 'link_container2', 'link2', 'body']; + + for (var i = 0; i < nodes.length; i++) { + ['mousedown', 'mouseup', 'click'].forEach((eventName) => { + document.getElementById(nodes[i]).addEventListener(eventName, (e) => { + if (e.eventPhase == Event.AT_TARGET) + events.push(e.type + '@' + e.target.id); + }); + }); + } + document.getElementById('done').addEventListener('click', () => { + test_click_target.step(() => { + assert_equals (events.join(','), + "mousedown@link1,mouseup@link_container1,click@link_container1,mousedown@link_container2,mouseup@link2,click@link_container2", + "Click should be sent to the nearest common ancestor"); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_click_target.done(); + }); + }); + + // Inject mouse events. + var actions = new test_driver.Actions(); + actions_promise = actions.pointerMove(0, 0, {origin: document.getElementById('link1')}) + .pointerDown() + .pointerMove(0, 0, {origin: document.getElementById('link_container1')}) + .pointerUp() + .pointerMove(0, 0, {origin: document.getElementById('link_container2')}) + .pointerDown() + .pointerMove(0, 0, {origin: document.getElementById('link2')}) + .pointerUp() + .pointerMove(0, 0, {origin: document.getElementById('done')}) + .pointerDown() + .pointerUp() + .send(); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/uievents/click/click_event_target_siblings.html b/testing/web-platform/tests/uievents/click/click_event_target_siblings.html new file mode 100644 index 0000000000..24d64dc9ac --- /dev/null +++ b/testing/web-platform/tests/uievents/click/click_event_target_siblings.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Click targets the nearest common ancestor</title> + <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> + <style> + div { + padding: 10px; + margin: 5px; + } + </style> + </head> + <body id='body'> + <h1>Click targeting when targets of down and up are sibling elements</h1> + This test verifies that click event always goes to the first common ancestor of down and up event targets. + + <ul> + <li>Press down the primary button on red div and move to blue box and release.</li> + <li>Press down the primary button on button b1 and move to button b2 and release.</li> + <li>Press down the primary button on input i1 and move to input i2 and release.</li> + <li>Press down the primary button on link 1 and move to link 2 and release.</li> + <li>Click done.</li> + </ul> + + <div id="div_container" style="background: green"> + <div id="red_div" style="background: red"></div> + <div id="blue_div" style="background: blue"></div> + </div> + + <div id="button_container" style="background: green"> + <button id="button1">b1</button> + <button id="button2">b2</button> + </div> + + <div id="input_container" style="background: green"> + <input id="input1" value="i1"> + <input id="input2" value="i2"> + </div> + + <div id="link_container" style="background: green"> + <a id="link1" href="#">link1</a> + <br/> + <a id="link2" href="#">link2</a> + </div> + + <button id="done">Done</button> + <script> + var test_click_target = async_test("Click targets the nearest common ancestor"); + var actions_promise; + + // Prevent drag to avoid interfering with the click. + document.addEventListener('dragstart', (e) => e.preventDefault()); + + var events = []; + var nodes = ['div_container', 'red_div', 'blue_div', 'button_container', 'button1', 'button2', 'input_container', 'input1', 'input2', 'link_container', 'link1', 'link2', 'body']; + + for (var i = 0; i < nodes.length; i++) { + ['mousedown', 'mouseup', 'click'].forEach((eventName) => { + document.getElementById(nodes[i]).addEventListener(eventName, (e) => { + if (e.eventPhase == Event.AT_TARGET) + events.push(e.type + '@' + e.target.id); + }); + }); + } + document.getElementById('done').addEventListener('click', () => { + test_click_target.step(() => { + assert_equals (events.join(','), + "mousedown@red_div,mouseup@blue_div,click@div_container,mousedown@button1,mouseup@button2,click@button_container,mousedown@link1,mouseup@link2,click@link_container", + "Click should be sent to the nearest common ancestor"); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_click_target.done(); + }); + }); + + // Inject mouse events. + var actions = new test_driver.Actions(); + actions_promise = actions.pointerMove(0, 0, {origin: document.getElementById('red_div')}) + .pointerDown() + .pointerMove(0, 0, {origin: document.getElementById('blue_div')}) + .pointerUp() + .pointerMove(0, 0, {origin: document.getElementById('button1')}) + .pointerDown() + .pointerMove(0, 0, {origin: document.getElementById('button2')}) + .pointerUp() + .pointerMove(0, 0, {origin: document.getElementById('link1')}) + .pointerDown() + .pointerMove(0, 0, {origin: document.getElementById('link2')}) + .pointerUp() + .pointerMove(0, 0, {origin: document.getElementById('done')}) + .pointerDown() + .pointerUp() + .send(); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/uievents/click/click_events_on_input.html b/testing/web-platform/tests/uievents/click/click_events_on_input.html new file mode 100644 index 0000000000..2f380eb451 --- /dev/null +++ b/testing/web-platform/tests/uievents/click/click_events_on_input.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Clicking with primary vs non-primary buttons</title> + <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> + </head> + <body> + <h1>Clicking on input type=text element when placeholder changes</h1> + <input id="target" onfocus="this.placeholder = ++focusCount;" placeholder="initial"> + <input id="other"> + <script> + var focusCount = 0; + var target = document.querySelector('#target'); + document.addEventListener('contextmenu', event => { event.preventDefault(); }); + + var test_click = async_test("Test click and auxclick on input element"); + + // The test is on purpose rather vague, since auxclick handling on + // touchscreens isn't well defined. + // But at least there should be 'click' + var didGetClick = false; + async function testClick(type, mouseButton) { + return new Promise((resolve) => { + target.addEventListener(type, event => { + event.preventDefault(); + didGetClick = didGetClick || event.type == "click"; + test_click.step(() => { + assert_equals(event.type, type, 'Should have got an event.'); + }); + }, {once: true}); + + // Inject mouse click events. + var actions = new test_driver.Actions(); + document.getElementById("other").focus(); + actions.pointerMove(0, 0, {origin: target}) + .pointerDown({button: mouseButton}) + .pointerUp({button: mouseButton}) + .send() + .then(resolve); + }); + } + + async function testClicks() { + var buttonType = test_driver.Actions.prototype.ButtonType; + await testClick("click", buttonType.LEFT); + await testClick("auxclick", buttonType.MIDDLE); + await testClick("auxclick", buttonType.RIGHT); + test_click.step(() => { + assert_true(didGetClick, 'Should have got at least "click".'); + }); + test_click.done(); + } + + testClicks(); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/uievents/click/contextmenu_event.html b/testing/web-platform/tests/uievents/click/contextmenu_event.html new file mode 100644 index 0000000000..7a33d0aa38 --- /dev/null +++ b/testing/web-platform/tests/uievents/click/contextmenu_event.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Contextmenu event</title> + <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> +</head> +<body> + <h1>Test contextmenu event</h1> + <p>Tests that right-clicking fires a contextmenu event.</p> + <ol id="instructions"> + <li>Right-click here. + </ol> + <script> + let event_log = []; + + function cancel_and_log_event(ename) { + return new Promise(resolve => { + document.body.addEventListener(ename, e => { + e.preventDefault(); + event_log.push(e.type); + resolve(e); + }, {once: true}); + }); + } + + promise_test(async () => { + const event_promises = ["mousedown", "mouseup", "contextmenu"] + .map(ename => cancel_and_log_event(ename)); + + let target = document.getElementById("instructions"); + let actions = new test_driver.Actions(); + actions.pointerMove(0, 0, {origin: target}) + .pointerDown({button: actions.ButtonType.RIGHT}) + .pointerUp({button: actions.ButtonType.RIGHT}) + .send(); + + await Promise.all(event_promises); + + assert_equals(event_log.length, 3, "Three events are received"); + assert_true(event_log.includes("contextmenu"), "contextmenu event is received"); + assert_true(event_log.includes("mouseup"), "mouseup event is received"); + assert_equals(event_log[0], "mousedown", "mousedown event is the first event received"); + }, "Test contextmenu dispatched after mousedown"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/uievents/click/dblclick_event_mouse.html b/testing/web-platform/tests/uievents/click/dblclick_event_mouse.html new file mode 100644 index 0000000000..50324f6dfd --- /dev/null +++ b/testing/web-platform/tests/uievents/click/dblclick_event_mouse.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>dblclick event for the mouse pointer type</title> + <link rel="author" title="Google" href="http://www.google.com/" /> + <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> + <style> + #target + { + background-color: green; + width: 200px; + height: 200px; + } + </style> + </head> + <body> + <p>Double-click on the green box with the left mouse button.</p> + <div id="target"></div> + <script> + promise_test(async (t) => { + const target = document.getElementById("target"); + const event_watcher = new EventWatcher(t, target, ["click", "dblclick"]); + const actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: target}) + .pointerDown() + .pointerUp() + .pointerDown() + .pointerUp() + .send(); + // Make sure the test finishes after all the input actions are completed. + t.add_cleanup(() => actions_promise); + const event = await event_watcher.wait_for(["click", "click", "dblclick"]); + assert_equals(event.type, "dblclick"); + assert_equals(event.target, target); + assert_equals(event.detail, 2); + }); + </script> + </body> +</html> |