diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/pointerevents/pointerevent_click_during_capture.html | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/pointerevents/pointerevent_click_during_capture.html')
| -rw-r--r-- | testing/web-platform/tests/pointerevents/pointerevent_click_during_capture.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/testing/web-platform/tests/pointerevents/pointerevent_click_during_capture.html b/testing/web-platform/tests/pointerevents/pointerevent_click_during_capture.html new file mode 100644 index 0000000000..e7448c7a8b --- /dev/null +++ b/testing/web-platform/tests/pointerevents/pointerevent_click_during_capture.html @@ -0,0 +1,138 @@ +<!doctype html> +<html> + <head> + <title>click event target during capture</title> + <meta name="viewport" content="width=device-width"> + <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="pointerevent_support.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <style> + .box { + margin: 10px; + } + #grey { + background: grey; + } + #blue { + background: blue; + } + #green { + background: green; + } + </style> + <script type="text/javascript"> + PhaseEnum = { + Phase1: "phase1", + Phase2: "phase2", + Phase1WithCapturing: "phase1withcapturing", + Phase2WithCapturing: "phase2withcapturing", + } + var phase; + var receivedEvents; + + function resetTestState() { + phase = PhaseEnum.Phase1; + receivedEvents = []; + } + + function run() { + var test_pointerEvent = setup_pointerevent_test("click target during capture", ['mouse']); + var grey = document.getElementById('grey'); + var blue = document.getElementById('blue'); + var green = document.getElementById('green'); + var actions_promise; + + ['gotpointercapture', 'lostpointercapture', 'pointerdown', 'pointerup', 'click'].forEach(function(eventName) { + [grey, blue, green].forEach(function(target) { + target.addEventListener(eventName, function(event) { + if (event.eventPhase == event.AT_TARGET) { + receivedEvents.push(event.type + '@' + target.id); + if (phase == PhaseEnum.Phase1 && target == green && event.type == 'click') { + test(function() { + assert_equals(receivedEvents.join(','), 'pointerdown@green,pointerup@green,click@green', 'An element should only receive click when it is the first common ancestor of pointerdown and pointerup targets'); + }, "Click target when pointerup/down targeted at the same element with no capture"); + phase = PhaseEnum.Phase2; + receivedEvents = []; + } + if (phase == PhaseEnum.Phase2 && target == grey && event.type == 'click') { + test(function() { + assert_equals(receivedEvents.join(','), 'pointerdown@blue,pointerup@green,click@grey', 'An element should only receive click when it is the first common ancestor of pointerdown and pointerup targets'); + }, "Click target when pointerup/down targeted at different elements with no capture"); + phase = PhaseEnum.Phase1WithCapturing; + receivedEvents = []; + } + if (target == blue && event.type == 'lostpointercapture') { + if (phase == PhaseEnum.Phase1WithCapturing) { + test_pointerEvent.step(function() { + assert_equals(receivedEvents.join(','), 'pointerdown@green,gotpointercapture@blue,pointerup@blue,click@blue,lostpointercapture@blue', 'An element should only receive click when it is the first common ancestor of pointerdown and pointerup targets'); + }); + phase = PhaseEnum.Phase2WithCapturing; + receivedEvents = []; + } else if (phase == PhaseEnum.Phase2WithCapturing) { + test_pointerEvent.step(function() { + assert_equals(receivedEvents.join(','), 'pointerdown@blue,gotpointercapture@blue,pointerup@blue,click@blue,lostpointercapture@blue', 'An element should only receive click when it is the first common ancestor of pointerdown and pointerup targets'); + }); + // Make sure the test finishes after all the input actions are completed. + actions_promise.then( () => { + test_pointerEvent.done(); + }); + } + } + if (event.type == 'pointerdown' && (target == blue || target == green)) { + if (phase == PhaseEnum.Phase1WithCapturing || phase == PhaseEnum.Phase2WithCapturing) + blue.setPointerCapture(event.pointerId); + } + } + }); + }); + }); + + // Inject mouse inputs. + // + // TODO(mustaq@chromium.org): It is no longer testable manually. + // Switch it to a promise_test to simplify the code, and remove + // the instructions on HTML. + var actions_promise = new test_driver.Actions() + .pointerMove(0, 0, {origin: green}) + .pointerDown() + .pointerUp() + .pointerMove(0, 0, {origin: blue}) + .pointerDown() + .pointerMove(0, 0, {origin: green}) + .pointerUp() + .pointerMove(0, 0, {origin: green}) + .pointerDown() + .pointerUp() + .pointerMove(0, 0, {origin: blue}) + .pointerDown() + .pointerMove(0, 0, {origin: green}) + .pointerUp() + .send(); + + } + </script> + </head> + <body onload="run()"> + <h1>Pointer Event: click event during capture</h1> + <h2 id="pointerTypeDescription"></h2> + <h4>Test Description: + Click event should be sent to the first common ancestor of the pointerdown and pointerup targets. + <ol> + <li>Click on the green box with the left button of mouse.</li> + <li>Press down the left button on the blue box and drag to the green box and release the button.</li> + <li>Repeat the two steps above once again.</li> + </ol> + </h4> + <br> + <div> + <div id="grey" class="box"> + <div id="green" class="box"></div> + <div id="blue" class="box"></div> + </div> + </div> + </body> +</html> |