pointerevent_pointercancel_touch-manual.html (4459B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>PointerCancel - touch</title> 5 <meta name="viewport" content="width=device-width"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 9 <!-- Additional helper script for common checks across event types --> 10 <script type="text/javascript" src="pointerevent_support.js"></script> 11 </head> 12 <body class="scrollable" onload="run()"> 13 <h1>pointercancel test</h1> 14 <h3>Warning: this test works properly only for devices that have touchscreen</h3> 15 <h4> 16 Test Description: This test checks if pointercancel event triggers. 17 <p>Start touch over the black rectangle and then move your finger to scroll the page.</p> 18 </h4> 19 <p> 20 <div id="target0" style="background: black"></div> 21 <script> 22 var detected_pointertypes = {}; 23 var test_pointerEvent = async_test("pointercancel event received"); 24 // showPointerTypes is defined in pointerevent_support.js 25 // Requirements: the callback function will reference the test_pointerEvent object and 26 // will fail unless the async_test is created with the var name "test_pointerEvent". 27 add_completion_callback(showPointerTypes); 28 29 var pointerdown_event = null; 30 var pointercancel_event = null; 31 32 function run() { 33 var target0 = document.getElementById("target0"); 34 35 on_event(target0, "pointerdown", function (event) { 36 pointerdown_event = event; 37 detected_pointertypes[event.pointerType] = true; 38 }); 39 40 on_event(target0, "pointercancel", function (event) { 41 pointercancel_event = event; 42 test_pointerEvent.step(function () { 43 assert_not_equals(pointerdown_event, null, "pointerdown was received: "); 44 assert_equals(event.pointerId, pointerdown_event.pointerId, "pointerId should be the same for pointerdown and pointercancel"); 45 assert_equals(event.pointerType, pointerdown_event.pointerType, "pointerType should be the same for pointerdown and pointercancel"); 46 assert_equals(event.isPrimary, pointerdown_event.isPrimary, "isPrimary should be the same for pointerdown and pointercancel"); 47 check_PointerEvent(event); 48 }); 49 }); 50 51 on_event(target0, "pointerout", function (event) { 52 test_pointerEvent.step(function () { 53 assert_not_equals(pointercancel_event, null, "pointercancel was received before pointerout: "); 54 assert_equals(event.pointerId, pointerdown_event.pointerId, "pointerId should be the same for pointerout and pointercancel"); 55 assert_equals(event.pointerType, pointerdown_event.pointerType, "pointerType should be the same for pointerout and pointercancel"); 56 assert_equals(event.isPrimary, pointerdown_event.isPrimary, "isPrimary should be the same for pointerout and pointercancel"); 57 }); 58 }); 59 60 on_event(target0, "pointerleave", function (event) { 61 test_pointerEvent.step(function () { 62 assert_not_equals(pointercancel_event, null, "pointercancel was received before pointerleave: "); 63 assert_equals(event.pointerId, pointerdown_event.pointerId, "pointerId should be the same for pointerleave and pointercancel"); 64 assert_equals(event.pointerType, pointerdown_event.pointerType, "pointerType should be the same for pointerleave and pointercancel"); 65 assert_equals(event.isPrimary, pointerdown_event.isPrimary, "isPrimary should be the same for pointerleave and pointercancel"); 66 }); 67 test_pointerEvent.done(); 68 }); 69 } 70 </script> 71 <h1>Pointer Events pointercancel Tests</h1> 72 <div id="complete-notice"> 73 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 74 </div> 75 <div id="log"></div> 76 </body> 77 </html>