pointerevent_setpointercapture_pointerup_touch.html (4269B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>setPointerCapture 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 - setPointerCapture 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 20 <li> Release your touch 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 count=0; 28 var event_log = []; 29 var detected_pointertypes = {}; 30 var test_pointerEvent = async_test("setPointerCapture on pointerup"); 31 32 var target0 = document.getElementById('target0'); 33 var actions_promise; 34 35 add_completion_callback(end_of_test); 36 function end_of_test() { 37 showLoggedEvents(); 38 showPointerTypes(); 39 } 40 41 window.onload = function() { 42 on_event(target0, 'pointerdown', function(e) { 43 detected_pointertypes[e.pointerType] = true; 44 event_log.push('pointerdown@target0'); 45 test_pointerEvent.step(function () { 46 assert_equals(e.pointerType, "touch", "Test should be run using a touch as input"); 47 }); 48 }); 49 50 on_event(target0, 'gotpointercapture', function(e) { 51 event_log.push('gotpointercapture@target0'); 52 }); 53 54 on_event(target0, 'lostpointercapture', function(e) { 55 event_log.push('lostpointercapture@target0'); 56 }); 57 58 on_event(target0, 'pointerup', function(e) { 59 event_log.push('pointerup@target0'); 60 try { 61 target0.setPointerCapture(e.pointerId); 62 } catch(error) { 63 test_pointerEvent.step(function () { 64 assert_unreached("target0.setPointerCapture should not throw"); 65 }); 66 } 67 // Make sure the test finishes after all the input actions are completed. 68 actions_promise.then( () => { 69 test_pointerEvent.done(); 70 }); 71 }); 72 73 on_event(target0, 'touchmove', function(e) { 74 // To prevent pointercancel firing. 75 e.preventDefault(); 76 }); 77 78 on_event(target0, 'pointercancel', function(e) { 79 test_pointerEvent.step(function () { 80 assert_unreached("target0 shouldn't receive pointercancel"); 81 }); 82 }); 83 84 // Inject touch inputs. 85 actions_promise = new test_driver.Actions() 86 .addPointer("touchPointer1", "touch") 87 .pointerMove(10, 10, {origin: target0}) 88 .pointerDown() 89 .pause(100) 90 .pointerUp() 91 .send(); 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>