pointerevent_element_haspointercapture_release_pending_capture.html (4941B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Element.hasPointerCapture test after the pending pointer capture element releases pointer capture</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 actions_promise; 20 var detected_pointertypes = {}; 21 add_completion_callback(showPointerTypes); 22 var test_pointerEvent = async_test("hasPointerCapture test after the pending pointer capture element releases pointer capture"); 23 24 function run() { 25 var target0 = document.getElementById("target0"); 26 var target1 = document.getElementById("target1"); 27 28 on_event(target0, "pointerdown", function (e) { 29 detected_pointertypes[e.pointerType] = true; 30 target0.setPointerCapture(e.pointerId); 31 test_pointerEvent.step(function () { 32 assert_equals(target0.hasPointerCapture(e.pointerId), true, "After target0.setPointerCapture, target0.hasPointerCapture should return true"); 33 }); 34 }); 35 36 on_event(target0, "gotpointercapture", function (e) { 37 test_pointerEvent.step(function () { 38 assert_equals(target0.hasPointerCapture(e.pointerId), true, "After target0 received gotpointercapture, target0.hasPointerCapture should return true"); 39 }); 40 target1.setPointerCapture(e.pointerId); 41 test_pointerEvent.step(function () { 42 assert_equals(target0.hasPointerCapture(e.pointerId), false, "After target1.setPointerCapture, target0.hasPointerCapture should return false"); 43 assert_equals(target1.hasPointerCapture(e.pointerId), true, "After target1.setPointerCapture, target1.hasPointerCapture should return true"); 44 }); 45 target1.releasePointerCapture(e.pointerId); 46 test_pointerEvent.step(function () { 47 assert_equals(target0.hasPointerCapture(e.pointerId), false, "After target1.releasePointerCapture, target0.hasPointerCapture should be false"); 48 assert_equals(target1.hasPointerCapture(e.pointerId), false, "After target1.releasePointerCapture, target1.hasPointerCapture should be false"); 49 }); 50 }); 51 52 on_event(target1, "gotpointercapture", function (e) { 53 test_pointerEvent.step(function () { 54 assert_true(false, "target1 should never receive gotpointercapture in this test"); 55 }); 56 }); 57 58 on_event(target0, "lostpointercapture", function (e) { 59 // Make sure the test finishes after all the input actions are completed. 60 actions_promise.then( () => { 61 test_pointerEvent.done(); 62 }); 63 }); 64 65 // Inject mouse inputs. 66 actions_promise = new test_driver.Actions() 67 .addPointer("TestPointer", pointer_type) 68 .pointerMove(10, 10, {origin: target0}) 69 .pointerDown() 70 .pointerMove(10, 10, {origin: target1}) 71 .pointerUp() 72 .send(); 73 } 74 </script> 75 </head> 76 <body onload="run()"> 77 <h1>Element.hasPointerCapture test after the pending pointer capture element releases pointer capture</h1> 78 <h4> 79 Test Description: This test checks if Element.hasPointerCapture returns value correctly after the pending pointer capture element releases pointer capture 80 <ol> 81 <li> Press black rectangle and do not release 82 <li> Move your pointer to purple rectangle 83 <li> Release the pointer 84 </ol> 85 </h4> 86 <p> 87 <div id="target0" style="touch-action:none"></div> 88 <div id="target1"></div> 89 <div id="complete-notice"> 90 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 91 </div> 92 <div id="log"></div> 93 </body> 94 </html>