1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<!doctype html>
<html>
<head>
<title>Lostpointercapture removing new capture element prevents the new 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="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="pointerevent_support.js"></script>
</head>
<body>
<input type="button" id="button" value="Set Capture"><br>
<div id="target0"></div>
<div id="target1"></div>
<script type='text/javascript'>
"use strict";
let target0 = document.getElementById('target0');
let target1 = document.getElementById('target1');
let captureButton = document.getElementById('button');
let targets = [target0, target1, captureButton];
const LOG_EVENT_TYPES = ['pointerover', 'pointerenter', 'pointerdown', 'pointerup', 'pointerout', 'pointerleave', 'gotpointercapture', 'lostpointercapture'];
promise_test(async (test) => {
captureButton.focus();
let events = [];
let logEvent = event => events.push(`${event.type}@${event.target.id}`);
for (const target of targets) {
for (const eventType of LOG_EVENT_TYPES) {
target.addEventListener(eventType, logEvent);
}
}
let finishPromise = getEvent('pointerup', captureButton, test);
getEvent('pointerdown', captureButton, test).then((event) => {
target0.setPointerCapture(event.pointerId);
});
// On the first captured move, we'll set capture to target1.
getEvent('pointermove', target0, test).then((event) => {
target1.setPointerCapture(event.pointerId);
});
// But remove the new capture target when we lose capture.
getEvent('lostpointercapture', target0, test).then((event) => {
target1.remove();
});
getEvent('gotpointercapture', target1, test).then((event) => {
assert_unreached("target1 is removed and should never get pointer capture.");
});
// Inject mouse inputs.
//
// TODO(crbug.com/40942362): Ideally the action sequence below needs to dispatch
// only single a pointermove event between the pointerdown/up pair. Blink needs
// an additional pointermove to end the test without a timeout because of a
// complicated bug. To make sure the new pointermove does not get coalesced
// with the first pointermove, we added a pair of chorded down/up events (which
// becomes poitermoves) and removed pointermove logging to maintain Blink's test
// coverage without violating the test's goal.
const actions = new test_driver.Actions();
actions
.pointerMove(0, 0, {origin: captureButton})
.pointerDown()
.pointerMove(10, 0, {origin: captureButton})
.pointerDown({button: actions.ButtonType.MIDDLE})
.pointerUp({button: actions.ButtonType.MIDDLE})
.pointerUp()
.send();
await finishPromise;
assert_equals(events.join(", "), [
// Pointer down on button
"pointerover@button", "pointerenter@button", "pointerdown@button",
// Captured by target0
"pointerout@button", "pointerleave@button", "pointerover@target0", "pointerenter@target0", "gotpointercapture@target0",
// Captured by target1, losing capture on target0 which removes target1.
"lostpointercapture@target0", "pointerout@target0", "pointerleave@target0",
// Uncaptured pointer re-enters button and is lifted.
"pointerover@button", "pointerenter@button", "pointerup@button"
].join(", "));
}, "setPointerCapture target removed by lostpointercapture");
</script>
</body>
</html>
|
