pointerevent_setpointercapture_relatedtarget.html (5729B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Set/Release capture + relatedTarget</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 - capture and relatedTarget</h1> 16 <h4> 17 Test Description: This test checks if setCapture/releaseCapture functions works properly. Complete the following actions: 18 <ol> 19 <li> Put your mouse over the purple rectangle. pointerover should be received for the purple rectangle 20 <li> Press and hold left mouse button over "Set Capture" button 21 <li> Move your mouse. pointerover should be received for the black rectangle 22 <li> Release left mouse button to complete the test. 23 </ol> 24 </h4> 25 Test passes if the proper behavior of the events is observed. 26 27 <div id="target0" style="background:black; color:white"></div> 28 <br> 29 <div id="target1" style="background:purple; color:white"></div> 30 <br> 31 <input type="button" id="btnCapture" value="Set Capture"> 32 <script type='text/javascript'> 33 var isPointerCapture = false; 34 var isPointeroverGot = false; 35 var count=0; 36 var event_log = []; 37 38 var detected_pointertypes = {}; 39 add_completion_callback(end_of_test); 40 function end_of_test() { 41 showLoggedEvents(); 42 showPointerTypes(); 43 } 44 45 var target0 = document.getElementById('target0'); 46 var target1 = document.getElementById('target1'); 47 var captureButton = document.getElementById('btnCapture'); 48 49 setup({ explicit_done: true }); 50 51 window.onload = function() { 52 on_event(captureButton, 'pointerdown', function(e) { 53 if(isPointerCapture == false) { 54 isPointerCapture = true; 55 sPointerCapture(e); 56 } 57 else { 58 isPointerCapture = false; 59 rPointerCapture(e); 60 } 61 }); 62 63 on_event(target0, 'gotpointercapture', function(e) { 64 event_log.push('gotpointercapture@target0'); 65 }); 66 67 on_event(target0, 'lostpointercapture', function(e) { 68 event_log.push('lostpointercapture@target0'); 69 isPointerCapture = false; 70 }); 71 72 run(); 73 } 74 75 function run() { 76 var actions_promise; 77 78 // After invoking the setPointerCapture method on an element, subsequent pointer events for the specified pointer must be targeted at that element 79 // and boundary events should be sent accordingly and relatedTarget should behave normally. 80 on_event(target0, "pointerover", function (event) { 81 event_log.push('pointerover@target0'); 82 if(isPointerCapture && isPointeroverGot) { 83 test(function() { 84 assert_not_equals(event.relatedTarget, null, "relatedTarget should not be null even when the capture is set") 85 }, "relatedTarget should not be null even when the capture is set."); 86 87 actions_promise.then( () => { 88 done(); 89 }); 90 } 91 }); 92 93 on_event(target1, "pointerover", function (event) { 94 detected_pointertypes[ event.pointerType ] = true; 95 if(!isPointeroverGot) { 96 test(function() { 97 assert_equals(isPointerCapture, false, "pointerover shouldn't trigger for this target when capture is enabled"); 98 }, "pointerover shouldn't trigger for the purple rectangle while the black rectangle has capture"); 99 isPointeroverGot = true; 100 event_log.push('pointerover@target1'); 101 } 102 }); 103 104 // Inject mouse inputs. 105 actions_promise = new test_driver.Actions() 106 .pointerMove(0, 0, {origin: target1}) 107 .pointerMove(0, 0, {origin: captureButton}) 108 .pointerDown() 109 .pointerMove(0, 0, {origin: target1}) 110 .pointerMove(0, 0, {origin: target0}) 111 .pointerUp() 112 .send(); 113 } 114 </script> 115 <h1>Pointer Events Capture Test</h1> 116 <div id="complete-notice"> 117 <p>Test complete: Scroll to Summary to view Pass/Fail Results.</p> 118 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 119 <p>The following events were logged: <span id="event-log"></span>.</p> 120 <p>Refresh the page to run the tests again with a different pointer type.</p> 121 </div> 122 <div id="log"></div> 123 </body> 124 </html>