-
Notifications
You must be signed in to change notification settings - Fork 54
/
pointerevent_multiple_primary_pointers_boundary_events-manual.html
145 lines (128 loc) · 5.99 KB
/
pointerevent_multiple_primary_pointers_boundary_events-manual.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
<!doctype html>
<html>
<head>
<title>Pointer Event: Boundary compatibility events for multiple primary pointers</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link rel="author" title="Google" href="http://www.google.com "/>
<meta name="assert" content="When more than one primary pointers are active, each will have an independent sequence of pointer boundary events but the compatibilty mouse boundary events have their own sequence."/>
<link rel="stylesheet" type="text/css" href="pointerevent_styles.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script type="text/javascript" src="pointerevent_support.js"></script>
<script type="text/javascript">
var test_pointerEvent = async_test("Multi-pointer boundary compat events");
add_completion_callback(end_of_test);
var detected_pointertypes = {};
var event_log = [];
// These two ids help us detect two different pointing devices.
var first_entry_pointer_id = -1;
var second_entry_pointer_id = -1;
// Current node for each pointer id
var current_node_for_id = {};
function end_of_test() {
showLoggedEvents();
showPointerTypes();
}
function end_of_interaction() {
test(function () {
assert_equals(event_log.join(", "),
"mouseover@target0, mouseenter@target0, mouseout@target0, mouseleave@target0, " +
"mouseover@target1, mouseenter@target1, mouseout@target1, mouseleave@target1, " +
"mouseover@target0, mouseenter@target0, mouseout@target0, mouseleave@target0"
);
}, "Event log");
test_pointerEvent.done(); // complete test
}
function log_event(label) {
event_log.push(label);
}
function run() {
on_event(document.getElementById("done"), "click", end_of_interaction);
var target_list = ["target0", "target1"];
var pointer_event_list = ["pointerenter", "pointerleave", "pointerover", "pointerout", "pointerdown"];
var mouse_event_list = ["mouseenter", "mouseleave", "mouseover", "mouseout"];
target_list.forEach(function(targetId) {
var target = document.getElementById(targetId);
pointer_event_list.forEach(function(eventName) {
on_event(target, eventName, function (event) {
var label = event.type + "@" + targetId;
detected_pointertypes[event.pointerType] = true;
if (!event.isPrimary) {
test(function () {
assert_unreached("Non-primary pointer " + label);
}, "Non-primary pointer " + label);
}
if (event.type === "pointerenter") {
var pointer_id = event.pointerId;
if (current_node_for_id[pointer_id] !== undefined) {
test(function () {
assert_unreached("Double entry " + label);
}, "Double entry " + label);
}
current_node_for_id[pointer_id] = event.target;
// Test that two different pointing devices are used
if (first_entry_pointer_id === -1) {
first_entry_pointer_id = pointer_id;
} else if (second_entry_pointer_id === -1) {
second_entry_pointer_id = pointer_id;
test(function () {
assert_true(first_entry_pointer_id !== second_entry_pointer_id);
}, "Different pointing devices");
}
} else if (event.type === "pointerleave") {
var pointer_id = event.pointerId;
if (current_node_for_id[pointer_id] !== event.target) {
test(function () {
assert_unreached("Double exit " + label);
}, "Double exit " + label);
}
current_node_for_id[pointer_id] = undefined;
}
});
});
mouse_event_list.forEach(function(eventName) {
on_event(target, eventName, function (event) {
log_event(event.type + "@" + targetId);
});
});
});
}
</script>
<style>
#target0, #target1 {
margin: 20px;
}
#done {
margin: 20px;
border: 2px solid black;
}
</style>
</head>
<body onload="run()">
<h1>Pointer Event: Boundary compatibility events for multiple primary pointers</h1>
<h4>
When more than one primary pointers are active, each will have an independent sequence of pointer boundary events but the compatibilty mouse boundary events have their own sequence.
</h4>
Instruction:
<ol>
<li>Move the mouse directly into Target0 (without going through Target1), and then leave the mouse there unmoved.</li>
<li>Tap directly on Target1 with a finger or a stylus, and then lift the finger/stylus off the screen/digitizer without crossing Target1 boundary.</li>
<li>Move the mouse into Target0 (if not there already) and move inside it.</li>
<li>Click Done (without passing over Target1).</li>
</ol>
<div id="done">
Done
</div>
<div id="target0">
Target0
</div>
<div id="target1">
Target1
</div>
<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>