pointerevent_capture_mouse.html (9012B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Set/Release capture</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 <!-- Additional helper script for common checks across event types --> 13 <script type="text/javascript" src="pointerevent_support.js"></script> 14 </head> 15 <body> 16 <h1>Pointer Events capture test</h1> 17 <h4> 18 Test Description: This test checks if setCapture/releaseCapture functions works properly. Complete the following actions: 19 <ol> 20 <li> Move your mouse over the black rectangle. pointermove event should be logged in the black rectangle</li> 21 <li> Move your mouse over the purple rectangle. pointerover event should be logged in the purple rectangle</li> 22 <li> Press and hold left mouse button over "Set Capture" button. "gotpointercapture" should be logged in the black rectangle</li> 23 <li> Move your mouse anywhere. pointermove should be logged in the black rectangle</li> 24 <li> Move your mouse over the purple rectangle. Nothig should happen</li> 25 <li> Move your mouse over the black rectangle. pointermove should be logged in the black rectangle</li> 26 <li> Release left mouse button. "lostpointercapture" should be logged in the black rectangle</li> 27 </ol> 28 </h4> 29 Test passes if the proper behaviour of the events is observed. 30 <div id="target0"></div> 31 <br> 32 <div id="target1"></div> 33 <br> 34 <input type="button" id="btnCapture" value="Set Capture"> 35 <script type='text/javascript'> 36 var isPointerCapture = false; 37 var pointermoveNoCaptureGot0 = false; 38 var pointermoveCaptureGot0 = false; 39 var pointermoveNoCaptureGot1 = false; 40 var ownEventForTheCapturedTargetGot = false; 41 var count=0; 42 var event_log = []; 43 var actions_promise1; 44 var actions_promise2; 45 var actions_promise3; 46 var actions_promise4; 47 48 var detected_pointertypes = {}; 49 add_completion_callback(end_of_test); 50 function end_of_test() { 51 showLoggedEvents(); 52 showPointerTypes(); 53 } 54 55 var target0 = document.getElementById('target0'); 56 var target1 = document.getElementById('target1'); 57 var captureButton = document.getElementById('btnCapture'); 58 59 var test_gotpointercapture = async_test("gotpointercapture event received"); 60 var test_lostpointercapture = async_test("lostpointercapture event received"); 61 62 window.onload = function() { 63 on_event(captureButton, 'pointerdown', function(e) { 64 if(isPointerCapture == false) { 65 isPointerCapture = true; 66 sPointerCapture(e); 67 } 68 }); 69 70 on_event(target0, 'gotpointercapture', function(e) { 71 actions_promise3.then( () => { 72 test_gotpointercapture.done(); 73 }); 74 event_log.push('gotpointercapture@target0'); 75 }); 76 77 on_event(target0, 'lostpointercapture', function(e) { 78 actions_promise4.then( () => { 79 test_lostpointercapture.done(); 80 }); 81 isPointerCapture = false; 82 event_log.push('lostpointercapture@target0'); 83 }); 84 85 run(); 86 } 87 88 function run() { 89 var test_pointermove0 = async_test("pointerover event for black rectangle received") 90 var test_pointermove1 = async_test("pointerover event for purple rectangle received") 91 92 on_event(target0, "pointermove", function (event) { 93 detected_pointertypes[ event.pointerType ] = true; 94 if(!pointermoveNoCaptureGot0) { 95 actions_promise2 = actions_promise1.then( () => { 96 test_pointermove0.done(); 97 event_log.push('pointermove@target0'); 98 pointermoveNoCaptureGot0 = true; 99 // Second dispatch a pointer move to target1. 100 return new test_driver.Actions().pointerMove(0, 0, {origin: target1}).send(); 101 }); 102 } 103 if(isPointerCapture) { 104 if(!pointermoveCaptureGot0) { 105 test(function() { 106 assert_equals(event.relatedTarget, null, "relatedTarget is null when the capture is set") 107 }, "relatedTarget is null when the capture is set. relatedTarget is " + event.relatedTarget); 108 test(function() { 109 assert_true((event.clientX < target0.getBoundingClientRect().left)|| 110 (event.clientX > target0.getBoundingClientRect().right)|| 111 (event.clientY < target0.getBoundingClientRect().top)|| 112 (event.clientY > target0.getBoundingClientRect().bottom), 113 "pointermove received for captured element while out of it") 114 }, "pointermove received for captured element while out of it"); 115 event_log.push('pointermove@target0'); 116 pointermoveCaptureGot0 = true; 117 // Fourth dispatch a pointer move to target0. 118 actions_promise4 = actions_promise3.then( () => { 119 return new test_driver.Actions().pointerMove(0, 0, {origin: target0}).send(); 120 }); 121 } 122 if((event.clientX > target0.getBoundingClientRect().left)&& 123 (event.clientX < target0.getBoundingClientRect().right)&& 124 (event.clientY > target0.getBoundingClientRect().top)&& 125 (event.clientY < target0.getBoundingClientRect().bottom)&& 126 !ownEventForTheCapturedTargetGot) { 127 test(function() { 128 assert_true(true, "pointermove received for captured element while inside of it"); 129 }, "pointermove received for captured element while inside of it"); 130 event_log.push('pointermove@target0'); 131 ownEventForTheCapturedTargetGot = true; 132 } 133 } 134 }); 135 136 // First dispatch a pointer move to target0. 137 actions_promise1 = new test_driver.Actions().pointerMove(0, 0, {origin: target0}).send(); 138 139 on_event(target1, "pointermove", function (event) { 140 test(function() { 141 assert_false(isPointerCapture, "pointermove shouldn't trigger for this target when capture is enabled"); 142 }, "pointermove shouldn't trigger for the purple rectangle while the black rectangle has capture"); 143 144 if(!pointermoveNoCaptureGot1) { 145 actions_promise3 = actions_promise2.then( () => { 146 test_pointermove1.done(); 147 event_log.push('pointermove@target1'); 148 pointermoveNoCaptureGot1 = true; 149 // Third, drag the mouse from btnCapture, target1 to target0. 150 return new test_driver.Actions() 151 .pointerMove(0, 0, {origin: btnCapture}) 152 .pointerDown() 153 .pointerMove(0, 0, {origin: target1}) 154 .pointerMove(0, 0, {origin: target0}) 155 .pointerUp() 156 .send(); 157 }); 158 } 159 }); 160 } 161 </script> 162 <h1>Pointer Events Capture Test</h1> 163 <div id="complete-notice"> 164 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 165 <p>The following events were logged: <span id="event-log"></span>.</p> 166 </div> 167 <div id="log"></div> 168 </body> 169 </html>