forked from web-platform-tests/wpt
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpointerevent_capture_mouse.html
169 lines (157 loc) · 8.8 KB
/
pointerevent_capture_mouse.html
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
<!doctype html>
<html>
<head>
<title>Set/Release 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>
<!-- Additional helper script for common checks across event types -->
<script type="text/javascript" src="pointerevent_support.js"></script>
</head>
<body>
<h1>Pointer Events capture test</h1>
<h4>
Test Description: This test checks if setCapture/releaseCapture functions works properly. Complete the following actions:
<ol>
<li> Move your mouse over the black rectangle. pointermove event should be logged in the black rectangle</li>
<li> Move your mouse over the purple rectangle. pointerover event should be logged in the purple rectangle</li>
<li> Press and hold left mouse button over "Set Capture" button. "gotpointercapture" should be logged in the black rectangle</li>
<li> Move your mouse anywhere. pointermove should be logged in the black rectangle</li>
<li> Move your mouse over the purple rectangle. Nothig should happen</li>
<li> Move your mouse over the black rectangle. pointermove should be logged in the black rectangle</li>
<li> Release left mouse button. "lostpointercapture" should be logged in the black rectangle</li>
</ol>
</h4>
Test passes if the proper behaviour of the events is observed.
<div id="target0"></div>
<br>
<div id="target1"></div>
<br>
<input type="button" id="btnCapture" value="Set Capture">
<script type='text/javascript'>
var isPointerCapture = false;
var pointermoveNoCaptureGot0 = false;
var pointermoveCaptureGot0 = false;
var pointermoveNoCaptureGot1 = false;
var ownEventForTheCapturedTargetGot = false;
var count=0;
var event_log = [];
var actions_promise1;
var actions_promise2;
var actions_promise3;
var actions_promise4;
var detected_pointertypes = {};
add_completion_callback(end_of_test);
function end_of_test() {
showLoggedEvents();
showPointerTypes();
}
var target0 = document.getElementById('target0');
var target1 = document.getElementById('target1');
var captureButton = document.getElementById('btnCapture');
var test_gotpointercapture = async_test("gotpointercapture event received");
var test_lostpointercapture = async_test("lostpointercapture event received");
window.onload = function() {
on_event(captureButton, 'pointerdown', function(e) {
if(isPointerCapture == false) {
isPointerCapture = true;
sPointerCapture(e);
}
});
on_event(target0, 'gotpointercapture', function(e) {
actions_promise3.then( () => {
test_gotpointercapture.done();
});
event_log.push('gotpointercapture@target0');
});
on_event(target0, 'lostpointercapture', function(e) {
actions_promise4.then( () => {
test_lostpointercapture.done();
});
isPointerCapture = false;
event_log.push('lostpointercapture@target0');
});
run();
}
function run() {
var test_pointermove0 = async_test("pointerover event for black rectangle received")
var test_pointermove1 = async_test("pointerover event for purple rectangle received")
on_event(target0, "pointermove", function (event) {
detected_pointertypes[ event.pointerType ] = true;
if(!pointermoveNoCaptureGot0) {
actions_promise2 = actions_promise1.then( () => {
test_pointermove0.done();
event_log.push('pointermove@target0');
pointermoveNoCaptureGot0 = true;
// Second dispatch a pointer move to target1.
return new test_driver.Actions().pointerMove(0, 0, {origin: target1}).send();
});
}
if(isPointerCapture) {
if(!pointermoveCaptureGot0) {
test(function() {
assert_equals(event.relatedTarget, null, "relatedTarget is null when the capture is set")
}, "relatedTarget is null when the capture is set. relatedTarget is " + event.relatedTarget);
test(function() {
assert_true((event.clientX < target0.getBoundingClientRect().left)||
(event.clientX > target0.getBoundingClientRect().right)||
(event.clientY < target0.getBoundingClientRect().top)||
(event.clientY > target0.getBoundingClientRect().bottom),
"pointermove received for captured element while out of it")
}, "pointermove received for captured element while out of it");
event_log.push('pointermove@target0');
pointermoveCaptureGot0 = true;
// Fourth dispatch a pointer move to target0.
actions_promise4 = actions_promise3.then( () => {
return new test_driver.Actions().pointerMove(0, 0, {origin: target0}).send();
});
}
if((event.clientX > target0.getBoundingClientRect().left)&&
(event.clientX < target0.getBoundingClientRect().right)&&
(event.clientY > target0.getBoundingClientRect().top)&&
(event.clientY < target0.getBoundingClientRect().bottom)&&
!ownEventForTheCapturedTargetGot) {
test(function() {
assert_true(true, "pointermove received for captured element while inside of it");
}, "pointermove received for captured element while inside of it");
event_log.push('pointermove@target0');
ownEventForTheCapturedTargetGot = true;
}
}
});
// First dispatch a pointer move to target0.
actions_promise1 = new test_driver.Actions().pointerMove(0, 0, {origin: target0}).send();
on_event(target1, "pointermove", function (event) {
test(function() {
assert_false(isPointerCapture, "pointermove shouldn't trigger for this target when capture is enabled");
}, "pointermove shouldn't trigger for the purple rectangle while the black rectangle has capture");
if(!pointermoveNoCaptureGot1) {
actions_promise3 = actions_promise2.then( () => {
test_pointermove1.done();
event_log.push('pointermove@target1');
pointermoveNoCaptureGot1 = true;
// Third, drag the mouse from btnCapture, target1 to target0.
return new test_driver.Actions()
.pointerMove(0, 0, {origin: btnCapture})
.pointerDown()
.pointerMove(0, 0, {origin: target1})
.pointerMove(0, 0, {origin: target0})
.pointerUp()
.send();
});
}
});
}
</script>
<h1>Pointer Events Capture Test</h1>
<div id="complete-notice">
<p>The following pointer types were detected: <span id="pointertype-log"></span>.</p>
<p>The following events were logged: <span id="event-log"></span>.</p>
</div>
<div id="log"></div>
</body>
</html>