Google Git
Sign in
chromium / external / w3c / web-platform-tests / e2fe8bbd62a081282326d64dc2e80035799bc9fa / . / touch-events / multi-touch-interfaces-manual.html
blob: e9f1b91c4862ebaa77fb855b6d20c2850e5b482b [file] [log] [blame]
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]1<!DOCTYPE HTML>
2<html>
3<!--
4 Test cases for Touch Events v1 Recommendation
5 http://www.w3.org/TR/touch-events/
6
7 These tests are based on Mozilla-Nokia-Google's single-touch
8 tests and to some extent Olli Pettay's multi-touch tests.
9
James Grahamcb5041f2014-04-24 15:24:26[diff] [blame]10 The primary purpose of the tests in this document is checking that the
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]11 various interfaces of the Touch Events APIs are correctly implemented.
James Grahamcb5041f2014-04-24 15:24:26[diff] [blame]12 Other interactions are covered in other test files.
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]13
14 This document references Test Assertions (abbrev TA below) written by Cathy Chan
15 http://www.w3.org/2010/webevents/wiki/TestAssertions
16-->
17
18<head>
19<title>Touch Events Multi-Touch Interface Tests</title>
20<meta name="viewport" content="width=device-width">
21<script src="/resources/testharness.js"></script>
Geoffrey Sneddonc327c272018-05-07 18:05:31[diff] [blame]22<script src="/resources/testharnessreport.js"></script>
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]23<script>
24 setup({explicit_done: true});
25
26 // Check a Touch object's atttributes for existence and correct type
27 // TA: 1.1.2, 1.1.3
28 function check_Touch_object (t) {
29 test(function() {
30 assert_equals(Object.prototype.toString.call(t), "[object Touch]", "touch is of type Touch");
31 }, "touch point is a Touch object");
32 [
33 ["long", "identifier"],
34 ["EventTarget", "target"],
35 ["long", "screenX"],
36 ["long", "screenY"],
37 ["long", "clientX"],
38 ["long", "clientY"],
39 ["long", "pageX"],
40 ["long", "pageY"],
41 ].forEach(function(attr) {
42 var type = attr[0];
43 var name = attr[1];
44
45 // existence check
46 test(function() {
47 assert_true(name in t, name + " attribute in Touch object");
48 }, "Touch." + name + " attribute exists");
49
50 // type check
51 switch(type) {
52 case "long":
53 test(function() {
54 assert_equals(typeof t[name], "number", name + " attribute of type long");
55 }, "Touch." + name + " attribute is of type number (long)");
56 break;
57 case "EventTarget":
58 // An event target is some type of Element
59 test(function() {
60 assert_true(t[name] instanceof Element, "EventTarget must be an Element.");
61 }, "Touch." + name + " attribute is of type Element");
62 break;
63 default:
64 break;
65 }
66 });
67 }
68
69 // Check a TouchList object's attributes and methods for existence and proper type
70 // Also make sure all of the members of the list are Touch objects
71 // TA: 1.2.1, 1.2.2, 1.2.5, 1.2.6
72 function check_TouchList_object (tl) {
73 test(function() {
74 assert_equals(Object.prototype.toString.call(tl), "[object TouchList]", "touch list is of type TouchList");
75 }, "touch list is a TouchList object");
76 [
77 ["unsigned long", "length"],
78 ["function", "item"],
79 ].forEach(function(attr) {
80 var type = attr[0];
81 var name = attr[1];
82
83 // existence check
84 test(function() {
85 assert_true(name in tl, name + " attribute in TouchList");
86 }, "TouchList." + name + " attribute exists");
87
88 // type check
89 switch(type) {
90 case "unsigned long":
91 test(function() {
92 assert_equals(typeof tl[name], "number", name + " attribute of type long");
93 }, "TouchList." + name + " attribute is of type number (unsigned long)");
94 break;
95 case "function":
96 test(function() {
97 assert_equals(typeof tl[name], "function", name + " attribute of type function");
98 }, "TouchList." + name + " attribute is of type function");
99 break;
100 default:
101 break;
102 }
103 });
104 // Each member of tl should be a proper Touch object
105 for (var i=0; i < tl.length; i++) {
106 check_Touch_object(tl.item(i));
107 }
108 }
109
110 // Check a TouchEvent event's attributes for existence and proper type
111 // Also check that each of the event's TouchList objects are valid
112 // TA: 1.{3,4,5}.1.1, 1.{3,4,5}.1.2
113 function check_TouchEvent(ev) {
114 test(function() {
115 assert_true(ev instanceof TouchEvent, "event is a TouchEvent event");
116 }, ev.type + " event is a TouchEvent event");
117 [
118 ["TouchList", "touches"],
119 ["TouchList", "targetTouches"],
120 ["TouchList", "changedTouches"],
121 ["boolean", "altKey"],
122 ["boolean", "metaKey"],
123 ["boolean", "ctrlKey"],
124 ["boolean", "shiftKey"],
125 ].forEach(function(attr) {
126 var type = attr[0];
127 var name = attr[1];
128
129 // existence check
130 test(function() {
131 assert_true(name in ev, name + " attribute in " + ev.type + " event");
132 }, ev.type + "." + name + " attribute exists");
133
134 // type check
135 switch(type) {
136 case "boolean":
137 test(function() {
138 assert_equals(typeof ev[name], "boolean", name + " attribute of type boolean");
139 }, ev.type + "." + name + " attribute is of type boolean");
140 break;
141 case "TouchList":
142 test(function() {
143 assert_equals(Object.prototype.toString.call(ev[name]), "[object TouchList]", name + " attribute of type TouchList");
144 }, ev.type + "." + name + " attribute is of type TouchList");
145 // Now check the validity of the TouchList
146 check_TouchList_object(ev[name]);
147 break;
148 default:
149 break;
150 }
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]151 });
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]152 }
153
154 function is_touch_over_element(touch, element) {
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]155 var bounds = element.getBoundingClientRect();
156 return touch.pageX >= bounds.left && touch.pageX <= bounds.right &&
157 touch.pageY >= bounds.top && touch.pageY <= bounds.bottom;
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]158 }
159
160 function check_touch_clientXY(touch) {
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]161 assert_equals(touch.clientX, touch.pageX - window.pageXOffset, "touch.clientX is touch.pageX - window.pageXOffset.");
162 assert_equals(touch.clientY, touch.pageY - window.pageYOffset, "touch.clientY is touch.pageY - window.pageYOffset.");
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]163 }
164
165 function run() {
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]166 var target0 = document.getElementById("target0");
167 var target1 = document.getElementById("target1");
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]168
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]169 var test_touchstart = async_test("touchstart event received");
170 var test_touchmove = async_test("touchmove event received");
171 var test_touchend = async_test("touchend event received");
172 var test_mousedown = async_test("Interaction with mouse events");
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]173
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]174 var touchstart_received = 0;
175 var touchmove_received = false;
176 var touchend_received = false;
177 var invalid_touchmove_received = false;
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]178
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]179 on_event(target0, "touchstart", function onTouchStart(ev) {
180 ev.preventDefault();
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]181
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]182 if(!touchstart_received) {
183 // Check event ordering TA: 1.6.2
184 test_touchstart.step(function() {
185 assert_false(touchmove_received, "touchstart precedes touchmove");
186 assert_false(touchend_received, "touchstart precedes touchend");
187 });
188 test_touchstart.done();
189 test_mousedown.done(); // If we got here, then the mouse event test is not needed.
190 }
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]191
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]192 if(++touchstart_received <= 2)
193 check_TouchEvent(ev);
194 });
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]195
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]196 on_event(target0, "touchmove", function onTouchMove(ev) {
197 ev.preventDefault();
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]198
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]199 if (touchmove_received)
200 return;
201 touchmove_received = true;
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]202
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]203 test_touchmove.step(function() {
204 assert_true(touchstart_received>0, "touchmove follows touchstart");
205 assert_false(touchend_received, "touchmove precedes touchend");
206 });
207 test_touchmove.done();
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]208
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]209 check_TouchEvent(ev);
210 });
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]211
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]212 on_event(target1, "touchmove", function onTouchMove(ev) {
213 invalid_touchmove_received = true;
214 });
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]215
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]216 on_event(window, "touchend", function onTouchEnd(ev) {
217 touchend_received = true;
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]218
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]219 test_touchend.step(function() {
220 assert_true(touchstart_received>0, "touchend follows touchstart");
221 assert_true(touchmove_received, "touchend follows touchmove");
222 assert_false(invalid_touchmove_received, "touchmove dispatched to correct target");
223 });
224 test_touchend.done();
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]225
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]226 check_TouchEvent(ev);
227 done();
228 });
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]229
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]230 on_event(target0, "mousedown", function onMouseDown(ev) {
231 test_mousedown.step(function() {
232 assert_true(touchstart_received,
233 "The touchstart event must be dispatched before any mouse " +
234 "events. (If this fails, it might mean that the user agent does " +
235 "not implement W3C touch events at all.)"
236 );
237 });
238 test_mousedown.done();
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]239
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]240 if (!touchstart_received) {
241 // Abort the tests. If touch events are not supported, then most of
242 // the other event handlers will never be called, and the test will
243 // time out with misleading results.
244 done();
245 }
246 });
247 }
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]248</script>
249<style>
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]250 div {
251 margin: 0em;
252 padding: 2em;
253 }
254 #target0 {
255 background: yellow;
256 border: 1px solid orange;
257 }
258 #target1 {
259 background: lightblue;
260 border: 1px solid blue;
261 }
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]262</style>
263</head>
264<body onload="run()">
Philip Jägenstedtd3603102017-11-28 14:02:06[diff] [blame]265 <h1>Touch Events: multi-touch interface tests</h1>
266 <div id="target0">
267 Touch this box with one finger, then another one...
268 </div>
269 <div id="target1">
270 ...then drag to this box and lift your fingers.
271 </div>
272 <div id="log"></div>
Sangwhan Moon70f1aa22014-04-08 11:10:47[diff] [blame]273</body>
274</html>