pointerevent_releasepointercapture_pointerup_mouse.html (4419B)
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> 15 <h1>Pointer Events Capture Test - releasePointerCapture on pointerup</h1> 16 <h4> 17 Test Description: This test checks if releasePointerCapture works properly. Complete the following actions: 18 <ol> 19 <li> Press and hold left mouse button over "Set Capture" button 20 <li> Release left mouse button 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 <br> 26 <input type="button" id="btnCapture" value="Set Capture"> 27 <script type='text/javascript'> 28 var isPointerCapture = false; 29 var pointerupGot = false; 30 var count=0; 31 var event_log = []; 32 var actions_promise; 33 34 var detected_pointertypes = {}; 35 add_completion_callback(end_of_test); 36 function end_of_test() { 37 showLoggedEvents(); 38 showPointerTypes(); 39 } 40 41 var target0 = document.getElementById('target0'); 42 var captureButton = document.getElementById('btnCapture'); 43 44 setup({ explicit_done: true }); 45 46 window.onload = function() { 47 on_event(captureButton, 'pointerdown', function(e) { 48 detected_pointertypes[e.pointerType] = true; 49 if(isPointerCapture == false) { 50 isPointerCapture = true; 51 sPointerCapture(e); 52 pointerupGot = false; 53 } 54 }); 55 56 on_event(target0, 'gotpointercapture', function(e) { 57 event_log.push('gotpointercapture@target0'); 58 }); 59 60 on_event(target0, 'lostpointercapture', function(e) { 61 test(function() { 62 assert_true(pointerupGot, "pointerup was received before lostpointercapture") 63 }, "pointerup was received before lostpointercapture"); 64 event_log.push('lostpointercapture@target0'); 65 isPointerCapture = false; 66 // Make sure the test finishes after all the input actions are completed. 67 actions_promise.then( () => { 68 done(); 69 }); 70 }); 71 72 on_event(target0, 'pointerup', function(e) { 73 event_log.push('pointerup@target0'); 74 var thrown = false; 75 try { 76 target0.releasePointerCapture(e.pointerId); 77 } catch(e) { 78 thrown = true; 79 } 80 test(function() { 81 assert_false(thrown, "target0.releasePointerCapture should not throw"); 82 }, "target0.releasePointerCapture should not throw"); 83 pointerupGot = true; 84 }); 85 86 // Inject mouse inputs. 87 actions_promise = new test_driver.Actions() 88 .pointerMove(0, 0, {origin: captureButton}) 89 .pointerDown() 90 .pointerMove(10, 0, {origin: target0}) 91 .pointerUp() 92 .send(); 93 } 94 </script> 95 <h1>Pointer Events Capture Test</h1> 96 <div id="complete-notice"> 97 <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> 98 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 99 <p>The following events were logged: <span id="event-log"></span>.</p> 100 </div> 101 <div id="log"></div> 102 </body> 103 </html>