multi-touch-interactions.js (19478B)
1 setup({explicit_done: true}); 2 3 var debug = document.getElementById("debug"); 4 5 function debug_print (x) { 6 /* uncomment below statement to show debug messages */ 7 // document.getElementById("debug").innerHTML += x; 8 } 9 10 var starting_elements = {}; 11 12 function check_list_subset_of_targetlist(list, list_name, targetlist, targetlist_name) { 13 var exist_in_targetlist; 14 for(i=0; i<list.length; i++) { 15 exist_in_targetlist=false; 16 for(j=0; j<targetlist.length; j++) 17 if(list.item(i).identifier==targetlist.item(j).identifier) 18 exist_in_targetlist=true; 19 20 assert_true(exist_in_targetlist, list_name + ".item("+i+") exists in " + targetlist_name); 21 } 22 } 23 24 function check_list_subset_of_two_targetlists(list, list_name, targetlist1, targetlist1_name, targetlist2, targetlist2_name) { 25 var exist_in_targetlists; 26 for(i=0; i<list.length; i++) { 27 exist_in_targetlists=false; 28 for(j=0; j<targetlist1.length; j++) 29 if(list.item(i).identifier==targetlist1.item(j).identifier) 30 exist_in_targetlists=true; 31 32 if(!exist_in_targetlists) 33 for(j=0; j<targetlist2.length; j++) 34 if(list.item(i).identifier==targetlist2.item(j).identifier) 35 exist_in_targetlists=true; 36 37 assert_true(exist_in_targetlists, list_name + ".item("+i+") exists in " + targetlist1_name + " or " + targetlist2_name); 38 } 39 40 } 41 42 function is_at_least_one_item_in_targetlist(list, targetlist) { 43 for(i=0; i<list.length; i++) 44 for(j=0; j<targetlist.length; j++) 45 if(list.item(i).identifier==targetlist.item(j).identifier) 46 return true; 47 48 return false; 49 } 50 51 function check_no_item_in_targetlist(list, list_name, targetlist, targetlist_name) { 52 for(i=0; i<list.length; i++) 53 for(j=0; j<targetlist.length; j++) { 54 assert_false(list.item(i).identifier==targetlist.item(j).identifier, list_name + ".item("+i+") exists in " + targetlist_name); 55 return; 56 } 57 } 58 59 function check_targets(list, target) { 60 for(i=0; i<list.length; i++) 61 assert_true(list.item(i).target==target, "item(" + i + ").target is element receiving event"); 62 } 63 64 function check_starting_elements(list) { 65 for (i=0; i<list.length; i++) { 66 assert_equals(list.item(i).target, starting_elements[list.item(i).identifier], "item(" + i + ").target matches starting element"); 67 } 68 } 69 70 function run() { 71 var target0 = document.getElementById("target0"); 72 var target1 = document.getElementById("target1"); 73 74 var test_touchstart = async_test("touchstart event received"); 75 var test_touchmove = async_test("touchmove event received"); 76 var test_touchend = async_test("touchend event received"); 77 var test_mousedown = async_test("Interaction with mouse events"); 78 79 var touchstart_received = 0; 80 var touchmove_received = 0; 81 var touchend_received = 0; 82 var touchstart_identifier; 83 84 // last received touch lists for comparison 85 var last_touches; 86 var last_targetTouches={}; 87 var last_changedTouches={}; 88 89 var actions_promise; 90 91 on_event(window, "touchstart", function onTouchStart(ev) { 92 // process event only if it's targeted at target0 or target1 93 if(ev.target != target0 && ev.target != target1 ) 94 return; 95 96 ev.preventDefault(); 97 98 if(!touchstart_received) { 99 // Check event ordering TA: 1.6.1 100 test_touchstart.step(function() { 101 assert_equals(touchmove_received, 0, "touchstart precedes touchmove"); 102 assert_equals(touchend_received, 0, "touchstart precedes touchend"); 103 }); 104 test_touchstart.done(); 105 test_mousedown.done(); // If we got here, then the mouse event test is not needed. 106 } 107 touchstart_received++; 108 109 // TA: 1.3.2.2, 1.3.2.4 110 test(function() { 111 assert_true(ev.changedTouches.length >= 1, "changedTouches.length is at least 1"); 112 assert_true(ev.changedTouches.length <= ev.touches.length, "changedTouches.length is smaller than touches.length"); 113 check_list_subset_of_targetlist(ev.changedTouches, "changedTouches", ev.touches, "touches"); 114 }, "touchstart #" + touchstart_received + ": changedTouches is a subset of touches"); 115 116 // TA: 1.3.3.2, 1.3.3.3 117 test(function() { 118 assert_true(ev.targetTouches.length >= 1, "targetTouches.length is at least 1"); 119 assert_true(ev.targetTouches.length <= ev.touches.length, "targetTouches.length is smaller than touches.length"); 120 check_list_subset_of_targetlist(ev.targetTouches, "targetTouches", ev.touches, "touches"); 121 }, "touchstart #" + touchstart_received + ": targetTouches is a subset of touches"); 122 123 // TA: 1.3.3.9 124 test(function() { 125 check_targets(ev.targetTouches, ev.target); 126 }, "touchstart #" + touchstart_received + ": targets of targetTouches are correct"); 127 128 // TA: 1.3.4.2 129 test(function() { 130 assert_true(ev.touches.length >= 1, "touches.length is at least 1"); 131 }, "touchstart #" + touchstart_received + ": touches.length is valid"); 132 133 if(touchstart_received == 1) { 134 // TA: 1.3.3.5, 1.3.3.7 135 test(function() { 136 assert_true(ev.targetTouches.length <= ev.changedTouches.length, "targetTouches.length is smaller than changedTouches.length"); 137 check_list_subset_of_targetlist(ev.targetTouches, "targetTouches", ev.changedTouches, "changedTouches"); 138 }, "touchstart #" + touchstart_received + ": targetTouches is a subset of changedTouches"); 139 140 // TA: 1.3.4.3 141 test(function() { 142 assert_equals(ev.touches.length, ev.changedTouches.length, "touches and changedTouches have the same length"); 143 }, "touchstart #" + touchstart_received + ": touches and changedTouches have the same length"); 144 } else { 145 // TA: 1.3.3.6 146 test(function() { 147 var diff_in_targetTouches = ev.targetTouches.length - (last_targetTouches[ev.target.id] ? last_targetTouches[ev.target.id].length : 0); 148 assert_true(diff_in_targetTouches > 0, "targetTouches.length is larger than last received targetTouches.length"); 149 assert_true(diff_in_targetTouches <= ev.changedTouches.length, "change in targetTouches.length is smaller than changedTouches.length"); 150 }, "touchstart #" + touchstart_received + ": change in targetTouches.length is valid"); 151 152 // TA: 1.3.3.8 153 test(function() { 154 assert_true(is_at_least_one_item_in_targetlist(ev.targetTouches, ev.changedTouches), "at least one item of targetTouches is in changedTouches"); 155 }, "touchstart #" + touchstart_received + ": at least one targetTouches item in changedTouches"); 156 157 // TA: 1.3.4.4 158 test(function() { 159 var diff_in_touches = ev.touches.length - last_touches.length; 160 assert_true(diff_in_touches > 0, "touches.length is larger than last received touches.length"); 161 assert_equals(diff_in_touches, ev.changedTouches.length, "change in touches.length equals changedTouches.length"); 162 }, "touchstart #" + touchstart_received + ": change in touches.length is valid"); 163 164 // TA: 1.3.4.5 165 test(function() { 166 check_list_subset_of_two_targetlists(ev.touches, "touches", ev.changedTouches, "changedTouches", last_touches, "last touches"); 167 }, "touchstart #" + touchstart_received + ": touches is subset of {changedTouches, last received touches}"); 168 } 169 170 // save starting element of each new touch point 171 for (i=0; i<ev.changedTouches.length; i++) { 172 starting_elements[ev.changedTouches.item(i).identifier] = ev.changedTouches.item(i).target; 173 } 174 175 last_touches = ev.touches; 176 last_targetTouches[ev.target.id] = ev.targetTouches; 177 last_changedTouches = {}; // changedTouches are only saved for touchend events 178 }); 179 180 on_event(window, "touchmove", function onTouchMove(ev) { 181 // process event only if it's targeted at target0 or target1 182 if(ev.target != target0 && ev.target != target1 ) 183 return; 184 185 ev.preventDefault(); 186 187 // TA: 1.6.1 188 test_touchmove.step(function() { 189 assert_true(touchstart_received>0, "touchmove follows touchstart"); 190 // assert_false(touchend_received, "touchmove precedes touchend"); // this applies to scenario tests 191 }); 192 test_touchmove.done(); 193 194 touchmove_received++; 195 196 // do the detailed checking only for a few times 197 if(touchmove_received<6) { 198 // TA: 1.4.2.2, 1.4.2.4 199 test(function() { 200 assert_true(ev.changedTouches.length >= 1, "changedTouches.length is at least 1"); 201 assert_true(ev.changedTouches.length <= ev.touches.length, "changedTouches.length is smaller than touches.length"); 202 check_list_subset_of_targetlist(ev.changedTouches, "changedTouches", ev.touches, "touches"); 203 }, "touchmove #" + touchmove_received + ": changedTouches is a subset of touches"); 204 205 // TA: 1.4.3.2, 1.4.3.4 206 test(function() { 207 assert_true(ev.targetTouches.length >= 1, "targetTouches.length is at least 1"); 208 assert_true(ev.targetTouches.length <= ev.touches.length, "targetTouches.length is smaller than touches.length"); 209 check_list_subset_of_targetlist(ev.targetTouches, "targetTouches", ev.touches, "touches"); 210 }, "touchmove #" + touchmove_received + ": targetTouches is a subset of touches"); 211 212 // TA: 1.4.3.6 213 test(function() { 214 assert_true(is_at_least_one_item_in_targetlist(ev.targetTouches, ev.changedTouches), "at least one item of targetTouches is in changedTouches"); 215 }, "touchmove #" + touchmove_received + ": at least one targetTouches item in changedTouches"); 216 217 // TA: 1.4.3.8 218 test(function() { 219 check_targets(ev.targetTouches, ev.target); 220 }, "touchmove #" + touchmove_received + ": targets of targetTouches are correct"); 221 222 // TA: 1.4.4.2 223 test(function() { 224 assert_equals(ev.touches.length, last_touches.length, "length of touches is same as length of last received touches"); 225 check_list_subset_of_targetlist(ev.touches, "touches", last_touches, "last received touches"); 226 }, "touchmove #" + touchmove_received + ": touches must be same as last received touches"); 227 228 // TA: 1.6.3 229 check_starting_elements(ev.changedTouches); 230 } 231 232 last_touches = ev.touches; 233 last_targetTouches[ev.target.id] = ev.targetTouches; 234 last_changedTouches = {}; // changedTouches are only saved for touchend events 235 }); 236 237 on_event(window, "touchend", function onTouchEnd(ev) { 238 // process event only if it's targeted at target0 or target1 239 if(ev.target != target0 && ev.target != target1 ) 240 return; 241 242 test_touchend.step(function() { 243 assert_true(touchstart_received>0, "touchend follows touchstart"); 244 }); 245 test_touchend.done(); 246 247 touchend_received++; 248 249 debug_print("touchend #" + touchend_received + ":<br>"); 250 debug_print("changedTouches.length=" + ev.changedTouches.length + "<br>"); 251 debug_print("targetTouches.length=" + ev.targetTouches.length + "<br>"); 252 debug_print("touches.length=" + ev.touches.length + "<br>"); 253 for(i=0; i<ev.changedTouches.length; i++) 254 debug_print("changedTouches.item(" + i + ").target=" + ev.changedTouches.item(i).target.id + "<br>"); 255 256 // TA: 1.5.2.2 257 test(function() { 258 assert_true(ev.changedTouches.length >= 1, "changedTouches.length is at least 1"); 259 }, "touchend #" + touchend_received + ": length of changedTouches is valid"); 260 261 // TA: 1.5.2.3 262 test(function() { 263 check_list_subset_of_targetlist(ev.changedTouches, "changedTouches", last_touches, "last received touches"); 264 }, "touchend #" + touchend_received + ": changedTouches is a subset of last received touches"); 265 266 // TA: 1.5.2.4, 1.5.2.5 267 test(function() { 268 check_no_item_in_targetlist(ev.changedTouches, "changedTouches", ev.touches, "touches"); 269 check_no_item_in_targetlist(ev.changedTouches, "changedTouches", ev.targetTouches, "targetTouches"); 270 }, "touchend #" + touchend_received + ": no item in changedTouches are in touches or targetTouches"); 271 272 // TA: 1.5.2.6 273 test(function() { 274 var found=false; 275 for (i=0; i<ev.changedTouches.length; i++) 276 if (ev.changedTouches.item(i).target == ev.target) 277 found=true; 278 assert_true(found, "at least one item in changedTouches has matching target"); 279 }, "touchend #" + touchend_received + ": at least one item in changedTouches targeted at this element"); 280 281 // TA: 1.5.3.2, 1.5.3.3 282 test(function() { 283 assert_true(ev.targetTouches.length >= 0, "targetTouches.length is non-negative"); 284 assert_true(ev.targetTouches.length <= ev.touches.length, "targetTouches.length is smaller than touches.length"); 285 check_list_subset_of_targetlist(ev.targetTouches, "targetTouches", ev.touches, "touches"); 286 }, "touchend #" + touchend_received + ": targetTouches is a subset of touches"); 287 288 // TA: 1.5.3.5 (new) 289 test(function() { 290 check_targets(ev.targetTouches, ev.target); 291 }, "touchend #" + touchend_received + ": targets of targetTouches are correct"); 292 293 // In some cases, when multiple touch points are released simultaneously 294 // the UA would dispatch the "same" touchend event (same changedTouches, same touches, but possibly different targetTouches) 295 // to each of the elements that are starting elements of the released touch points. 296 // in these situations, the subsequent events are exempt from TA 1.5.3.4 and 1.5.4.2 297 var same_event_as_last = false; 298 if (last_changedTouches && last_changedTouches.length==ev.changedTouches.length) { 299 same_event_as_last = true; // assume true until proven otherwise 300 for (i=0; i<last_changedTouches.length; i++) { 301 var match = false; 302 for (j=0; j<ev.changedTouches.length; j++) 303 if (last_changedTouches.item(i) == ev.changedTouches.item(j)) { 304 match = true; 305 break; 306 } 307 if (!match) 308 same_event_as_last = false; 309 } 310 } 311 312 if (!same_event_as_last) { 313 // TA: 1.5.3.4 314 // Getting semi-random failures on this and 1.5.4.2. 315 // See 1.5.4.2. Not sure if it's the same issue... 316 test(function() { 317 assert_true(last_targetTouches[ev.target.id].length > 0, "last received targetTouches.length is not zero"); 318 var diff_in_targetTouches = last_targetTouches[ev.target.id].length - ev.targetTouches.length; 319 debug_print("diff_in_targetTouches=" + diff_in_targetTouches + "<br>"); 320 assert_true(diff_in_targetTouches > 0, "targetTouches.length is smaller than last received targetTouches.length"); 321 assert_true(diff_in_targetTouches <= ev.changedTouches.length, "change in targetTouches.length is smaller than changedTouches.length"); 322 }, "touchend #" + touchend_received + ": change in targetTouches.length is valid"); 323 324 // TA: 1.5.4.2 325 // Getting semi-random failures on this and 1.5.3.4. 326 // It looks like if fingers are lifted simultaneously, the "same" touchend event can be dispatched to two target elements 327 // but adapted to the element (same touches, changedTouches but different targetTouches). 328 // When one event is processed after another, ev.touches would end up being identical to last_touches, leading to failure. 329 // Question is why done() does not stop the processing of the latter event. 330 test(function() { 331 assert_true(last_touches.length > 0, "last received touches.length is not zero"); 332 var diff_in_touches = last_touches.length - ev.touches.length; 333 debug_print("diff_in_touches=" + diff_in_touches + "<br>"); 334 assert_true(diff_in_touches > 0, "touches.length is smaller than last received touches.length"); 335 assert_equals(diff_in_touches, ev.changedTouches.length, "change in touches.length equals changedTouches.length"); 336 }, "touchend #" + touchend_received + ": change in touches.length is valid"); 337 } 338 339 // TA: 1.6.4 340 debug_print("touchend #" + touchend_received + ": TA 1.6.4<br>"); 341 test(function() { 342 check_starting_elements(ev.changedTouches); 343 }, "touchend #" + touchend_received + ": event dispatched to correct element<br>"); 344 345 debug_print("touchend #" + touchend_received + ": saving touch lists<br>"); 346 347 last_touches = ev.touches; 348 last_targetTouches[ev.target.id] = ev.targetTouches; 349 last_changedTouches = ev.changedTouches; 350 351 debug_print("touchend #" + touchend_received + ": done<br>"); 352 if(ev.touches.length==0) 353 actions_promise.then( () => done() ); 354 }); 355 356 on_event(target0, "mousedown", function onMouseDown(ev) { 357 test_mousedown.step(function() { 358 assert_true(touchstart_received, 359 "The touchstart event must be dispatched before any mouse " + 360 "events. (If this fails, it might mean that the user agent does " + 361 "not implement W3C touch events at all.)" 362 ); 363 }); 364 test_mousedown.done(); 365 366 if (!touchstart_received) { 367 // Abort the tests. If touch events are not supported, then most of 368 // the other event handlers will never be called, and the test will 369 // time out with misleading results. 370 done(); 371 } 372 }); 373 374 actions_promise = new test_driver.Actions() 375 .addPointer("touchPointer1", "touch") 376 .addPointer("touchPointer2", "touch") 377 .addPointer("touchPointer3", "touch") 378 .pointerMove(0, 0, {origin: target0, sourceName: "touchPointer1"}) 379 .pointerMove(3, 0, {origin: target0, sourceName: "touchPointer2"}) 380 .pointerDown({sourceName: "touchPointer1"}) 381 .pointerDown({sourceName: "touchPointer2"}) 382 .pointerMove(0, 10, {origin: target0, sourceName: "touchPointer1"}) 383 .pointerMove(3, 10, {origin: target0, sourceName: "touchPointer2"}) 384 .pointerMove(0, 0, {origin: target1, sourceName: "touchPointer1"}) 385 .pointerMove(3, 0, {origin: target1, sourceName: "touchPointer2"}) 386 .pointerMove(6, 0, {origin: target0, sourceName: "touchPointer3"}) 387 .pointerDown({sourceName: "touchPointer3"}) 388 .pointerUp({sourceName: "touchPointer1"}) 389 .pointerUp({sourceName: "touchPointer2"}) 390 .pointerUp({sourceName: "touchPointer3"}) 391 .send(); 392 }