pointerevent_element_haspointercapture.html (8539B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Element.hasPointerCapture test</title> 5 <meta name="viewport" content="width=device-width"> 6 <meta name="variant" content="?mouse"> 7 <meta name="variant" content="?pen"> 8 <meta name="variant" content="?touch"> 9 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/resources/testdriver.js"></script> 13 <script src="/resources/testdriver-actions.js"></script> 14 <script src="/resources/testdriver-vendor.js"></script> 15 <script type="text/javascript" src="pointerevent_support.js"></script> 16 <script> 17 const pointer_type = location.search.substring(1); 18 19 var detected_pointertypes = {}; 20 add_completion_callback(showPointerTypes); 21 var test_pointerEvent = async_test("hasPointerCapture"); 22 var listening_events = [ 23 "pointerover", 24 "pointerenter", 25 "pointerout", 26 "pointerleave", 27 "pointermove", 28 "gotpointercapture" 29 ]; 30 var set_capture_to_target0 = false; 31 32 function run() { 33 var target0 = document.getElementById("target0"); 34 var target1 = document.getElementById("target1"); 35 var actions_promise; 36 37 on_event(target0, "pointerdown", function (e) { 38 detected_pointertypes[e.pointerType] = true; 39 test_pointerEvent.step(function () { 40 if (pointer_type === "pen") { 41 // Implicit capture for pen is platform-dependent. 42 return; 43 } 44 const expected_default_capture = pointer_type !== "mouse"; 45 assert_equals(target0.hasPointerCapture(e.pointerId), expected_default_capture, 46 "before target0.setPointerCapture, target0.hasPointerCapture should be " + expected_default_capture); 47 }); 48 target1.setPointerCapture(e.pointerId); 49 test_pointerEvent.step(function () { 50 assert_equals(target0.hasPointerCapture(e.pointerId), false, 51 "after target1.setPointerCapture, target0.hasPointerCapture should be false"); 52 assert_equals(target1.hasPointerCapture(e.pointerId), true, 53 "after target1.setPointerCapture, target1.hasPointerCapture should be true"); 54 }); 55 target0.setPointerCapture(e.pointerId); 56 set_capture_to_target0 = true; 57 // hasPointerCapture will return true immediately after a call to setPointerCapture 58 test_pointerEvent.step(function () { 59 assert_equals(target0.hasPointerCapture(e.pointerId), true, 60 "after target0.setPointerCapture, target0.hasPointerCapture should be true"); 61 }); 62 // hasPointerCapture will return false immediately after a call to releasePointerCapture 63 target0.releasePointerCapture(e.pointerId); 64 set_capture_to_target0 = false; 65 test_pointerEvent.step(function () { 66 assert_equals(target0.hasPointerCapture(e.pointerId), false, 67 "after target0.releasePointerCapture, target0.hasPointerCapture should be false"); 68 assert_equals(target1.hasPointerCapture(e.pointerId), false, 69 "after target0.releasePointerCapture, target1.hasPointerCapture should be false"); 70 }); 71 target0.setPointerCapture(e.pointerId); 72 set_capture_to_target0 = true; 73 test_pointerEvent.step(function () { 74 assert_equals(target0.hasPointerCapture(e.pointerId), true, 75 "after target0.setPointerCapture, target0.hasPointerCapture should be true"); 76 }); 77 // If the element.hasPointerCapture is false element.releasePointerCapture does nothing 78 target1.releasePointerCapture(e.pointerId); 79 test_pointerEvent.step(function () { 80 assert_equals(target0.hasPointerCapture(e.pointerId), true, 81 "while target1.hasPointerCapture is false, target1.releasePointerCapture should not change hasPointerCapture"); 82 }); 83 }); 84 85 for (var i = 0; i < listening_events.length; i++) { 86 on_event(target0, listening_events[i], function (e) { 87 test_pointerEvent.step(function () { 88 assert_equals(target0.hasPointerCapture(e.pointerId), set_capture_to_target0, 89 "Received " + e.type + " target0.hasPointerCapture should be " + set_capture_to_target0); 90 }); 91 }); 92 } 93 94 on_event(target0, "pointerup", function (e) { 95 // Immediately after firing the pointerup or pointercancel events, a user agent must clear 96 // the pending pointer capture target override for the pointerId, and then run 97 // "Process Pending Pointer Capture" steps to fire lostpointercapture if necessary. 98 test_pointerEvent.step(function () { 99 assert_equals(target0.hasPointerCapture(e.pointerId), true, 100 "pointerup target0.hasPointerCapture should be true"); 101 }); 102 set_capture_to_target0 = false; 103 }); 104 105 on_event(target0, "lostpointercapture", function (e) { 106 test_pointerEvent.step(function () { 107 assert_equals(target0.hasPointerCapture(e.pointerId), false, 108 "pointerup target0.hasPointerCapture should be false"); 109 }); 110 }); 111 112 on_event(target1, "pointerup", function (e) { 113 test_pointerEvent.step(function () { 114 assert_equals(target1.hasPointerCapture(e.pointerId), false, 115 "pointerup target1.hasPointerCapture should be false"); 116 }); 117 // Make sure the test finishes after all the input actions are completed. 118 actions_promise.then( () => { 119 test_pointerEvent.done(); 120 }); 121 }); 122 123 // Inject mouse inputs. 124 actions_promise = new test_driver.Actions() 125 .addPointer("TestPointer", pointer_type) 126 .pointerMove(0, 0, {origin: target0}) 127 .pointerDown() 128 .pointerMove(0, 10, {origin: target0}) 129 .pointerMove(0, 20, {origin: target0}) 130 .pointerMove(0, -10, {origin: target1}) 131 .pointerMove(0, 0, {origin: target1}) 132 .pointerMove(0, 10, {origin: target1}) 133 .pointerUp() 134 .pointerMove(0, 0, {origin: target1}) 135 .pointerDown() 136 .pointerUp() 137 .send(); 138 } 139 </script> 140 </head> 141 <body onload="run()"> 142 <h1>Element.hasPointerCapture test</h1> 143 <h4> 144 Test Description: This test checks if Element.hasPointerCapture returns value correctly 145 <ol> 146 <li> Press black rectangle and do not release 147 <li> Move your pointer to purple rectangle 148 <li> Release the pointer 149 <li> Click purple rectangle 150 </ol> 151 </h4> 152 <p> 153 <div id="target0" style="touch-action:none"></div> 154 <div id="target1"></div> 155 <div id="complete-notice"> 156 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 157 </div> 158 <div id="log"></div> 159 </body> 160 </html>