pointerevent_releasepointercapture_onpointerup_mouse.html (4597B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Release capture 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 - release capture on pointerup</h1> 16 <h4> 17 Test Description: This test checks if setCapture/releaseCapture functions 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. "lostpointercapture" should be logged inside of the black rectangle immediately after "pointerup" 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 // If the setPointerCapture method has been invoked on the pointer specified by pointerId, 61 // and the releasePointerCapture method has not been invoked,a lostpointercapture event must be 62 // dispatched to the element on which the setPointerCapture method was invoked. Furthermore, 63 // subsequent events for the specified pointer must follow normal hit testing mechanisms for 64 // determining the event target. 65 // TA: 3.7 66 on_event(target0, 'lostpointercapture', function(e) { 67 test(function() { 68 assert_true(pointerupGot, "pointerup was received before lostpointercapture") 69 }, "pointerup was received before lostpointercapture"); 70 event_log.push('lostpointercapture@target0'); 71 isPointerCapture = false; 72 // Make sure the test finishes after all the input actions are completed. 73 actions_promise.then( () => { 74 done(); 75 }); 76 }); 77 78 on_event(target0, 'pointerup', function(e) { 79 event_log.push('pointerup@target0'); 80 pointerupGot = true; 81 }); 82 83 // Inject mouse inputs. 84 actions_promise = new test_driver.Actions() 85 .pointerMove(0, 0, {origin: captureButton}) 86 .pointerDown() 87 .pointerMove(10, 0, {origin: target0}) 88 .pointerUp() 89 .send(); 90 } 91 </script> 92 <h1>Pointer Events Capture Test</h1> 93 <div id="complete-notice"> 94 <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> 95 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 96 <p>The following events were logged: <span id="event-log"></span>.</p> 97 </div> 98 <div id="log"></div> 99 </body> 100 </html>