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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
<!DOCTYPE HTML>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<style>
body {
user-select: none;
}
#green:hover {
background-color: red;
}
#blue:hover {
background-color: red;
}
#green {
background-color: green;
}
#blue {
background-color: blue;
}
div.box {
margin: 5px;
padding: 20px;
width: 50px;
height: 50px;
}
</style>
<body onload="run()">
<div id="green" class="box"></div>
<div id="blue" class="box"></div>
</body>
<script>
var receivedEventList = [];
var setcapture = "";
let testEventList = ['pointerup', 'pointerdown', 'pointermove', 'gotpointercapture', 'lostpointercapture', "pointerover", "pointerout", "pointerleave", "pointerenter"];
testEventList.forEach(function(eventName) {
green.addEventListener(eventName, logEvent);
blue.addEventListener(eventName, logEvent);
});
function logEvent(event) {
receivedEventList.push(event.target.id + " received " + event.type)
}
function setCaptureGreen(event) {
green.setPointerCapture(event.pointerId);
}
function setCaptureBlue(event) {
blue.setPointerCapture(event.pointerId);
}
function releaseCapture(event) {
if (event.target.hasPointerCapture(event.pointerId)) {
event.target.releasePointerCapture(event.pointerId);
}
}
function run() {
promise_test (async() => {
// Move to (1, 1) to reset hovering.
await new test_driver.Actions().pointerMove(1, 1).send();
receivedEventList = [];
// pointerdown at green -> set capture to green -> green receive the following moves.
document.addEventListener("pointerdown", setCaptureGreen);
await new test_driver.Actions()
.addPointer("mouse")
.pointerMove(25, 25, {origin: green})
.pointerDown()
.pointerMove(30, 30, {origin: green})
.pointerMove(25, 25, {origin: blue})
.send();
expectedEventList = ["green received pointerover",
"green received pointerenter",
"green received pointermove",
"green received pointerdown",
"green received gotpointercapture",
"green received pointermove",
"green received pointermove"];
assert_array_equals(receivedEventList, expectedEventList, "Received events: " + receivedEventList);
assert_equals(getComputedStyle(green).backgroundColor, "rgb(255, 0, 0)", "green should be red (hover).");
assert_equals(getComputedStyle(blue).backgroundColor, "rgb(0, 0, 255)", "blue should be blue.");
document.removeEventListener("pointerdown", setCaptureGreen);
// Release mouse button.
await new test_driver.Actions().addPointer("mouse").pointerUp().send();
}, "Mouse down and capture to green.");
promise_test (async() => {
// Move to (1, 1) to reset hovering.
await new test_driver.Actions().addPointer("mouse").pointerMove(1, 1).send();
receivedEventList = [];
// pointerdown at green -> set capture to blue -> blue receive the following moves.
document.addEventListener("pointerdown", setCaptureBlue);
await new test_driver.Actions()
.addPointer("mouse")
.pointerMove(25, 25, {origin: green})
.pointerDown()
.pointerMove(30, 30, {origin: green})
.pointerMove(31, 31, {origin: green})
.send();
expectedEventList = ["green received pointerover",
"green received pointerenter",
"green received pointermove",
"green received pointerdown",
"green received pointerout",
"green received pointerleave",
"blue received pointerover",
"blue received pointerenter",
"blue received gotpointercapture",
"blue received pointermove",
"blue received pointermove"];
assert_array_equals(receivedEventList, expectedEventList, "Received events: " + receivedEventList);
assert_equals(getComputedStyle(green).backgroundColor, "rgb(0, 128, 0)", "green should be green.");
assert_equals(getComputedStyle(blue).backgroundColor, "rgb(255, 0, 0)", "blue should be red (hover).");
document.removeEventListener("pointerdown", setCaptureBlue);
// Release mouse button.
await new test_driver.Actions().addPointer("mouse").pointerUp().send();
}, "Mouse down at green and capture to blue.");
promise_test (async() => {
// Move to (1, 1) to reset hovering.
await new test_driver.Actions().addPointer("mouse").pointerMove(1, 1).send();
receivedEventList = [];
// pointerdown at green -> set capture to green -> green receive first move -> release capture -> blue receive the next move
green.addEventListener("pointerdown", setCaptureGreen);
green.addEventListener("pointermove", releaseCapture);
await new test_driver.Actions()
.addPointer("mouse")
.pointerMove(25, 25, {origin: green})
.pointerDown()
.pointerMove(30, 30, {origin: blue})
.pointerMove(25, 25, {origin: blue})
.send();
expectedEventList = ["green received pointerover",
"green received pointerenter",
"green received pointermove",
"green received pointerdown",
"green received gotpointercapture",
"green received pointermove",
"green received lostpointercapture",
"green received pointerout",
"green received pointerleave",
"blue received pointerover",
"blue received pointerenter",
"blue received pointermove"]
assert_array_equals(receivedEventList, expectedEventList, "Received events: " + receivedEventList);
assert_equals(getComputedStyle(green).backgroundColor, "rgb(0, 128, 0)", "green should be green.");
assert_equals(getComputedStyle(blue).backgroundColor, "rgb(255, 0, 0)", "blue should be red (hover).");
green.removeEventListener("pointerdown", setCaptureBlue);
green.removeEventListener("pointermove", releaseCapture);
// Release mouse button.
await new test_driver.Actions().addPointer("mouse").pointerUp().send();
}, "Mouse down and capture to green, move to blue and release capture");
}
</script>
|
