pointerevent_releasepointercapture_pointerup_touch.html (4406B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>releasePointerCapture on pointerup</title> 5 <meta name="viewport" content="width=device-width"> 6 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="pointerevent_support.js"></script> 13 </head> 14 <body class="scrollable"> 15 <h1>Pointer Events Capture Test - releasePointerCapture on pointerup</h1> 16 <h4> 17 Test Description: This test checks if releaseCapture works properly on pointer up. Complete the following actions: 18 <ol> 19 <li> Touch black rectangle and do not release your touch 20 <li> Move and release your touch anywhere over the document 21 </ol> 22 </h4> 23 Test passes if the proper behavior of the events is observed. 24 <div id="target0" style="background:black; color:white"></div> 25 26 <script type='text/javascript'> 27 var pointerupGot = false; 28 var count=0; 29 var event_log = []; 30 var detected_pointertypes = {}; 31 var test_pointerEvent = async_test("releasePointerCapture on pointerup"); 32 33 var target0 = document.getElementById('target0'); 34 var actions_promise; 35 36 add_completion_callback(end_of_test); 37 function end_of_test() { 38 showLoggedEvents(); 39 showPointerTypes(); 40 } 41 42 window.onload = function() { 43 on_event(target0, 'pointerdown', function(e) { 44 detected_pointertypes[e.pointerType] = true; 45 test_pointerEvent.step(function () { 46 assert_equals(e.pointerType, "touch", "Test should be run using a touch as input"); 47 }); 48 sPointerCapture(e); 49 pointerupGot = false; 50 }); 51 52 on_event(target0, 'gotpointercapture', function(e) { 53 event_log.push('gotpointercapture@target0'); 54 }); 55 56 on_event(target0, 'lostpointercapture', function(e) { 57 event_log.push('lostpointercapture@target0'); 58 test_pointerEvent.step(function () { 59 assert_true(pointerupGot, "pointerup was received before lostpointercapture"); 60 }); 61 // Make sure the test finishes after all the input actions are completed. 62 actions_promise.then( () => { 63 test_pointerEvent.done(); 64 }); 65 }); 66 67 on_event(target0, 'pointerup', function(e) { 68 event_log.push('pointerup@target0'); 69 try { 70 target0.releasePointerCapture(e.pointerId); 71 } catch(error) { 72 test_pointerEvent.step(function () { 73 assert_unreached("target0.releasePointerCapture should not throw"); 74 }); 75 } 76 pointerupGot = true; 77 }); 78 79 on_event(target0, 'touchmove', function(e) { 80 // To prevent pointercancel firing. 81 e.preventDefault(); 82 }); 83 84 on_event(target0, 'pointercancel', function(e) { 85 test_pointerEvent.step(function () { 86 assert_unreached("target0 shouldn't receive pointercancel"); 87 }); 88 }); 89 90 // Inject touch inputs. 91 actions_promise = touchScrollInTarget(target0, 'down'); 92 } 93 </script> 94 <h1>Pointer Events Capture Test</h1> 95 <div id="complete-notice"> 96 <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> 97 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 98 <p>The following events were logged: <span id="event-log"></span>.</p> 99 </div> 100 <div id="log"></div> 101 </body> 102 </html>