pointerevent_setpointercapture_override_pending_capture_element.html (4121B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Test overriding the pending pointer capture element</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 src="pointerevent_support.js"></script> 16 <script type="text/javascript"> 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_setPointerCapture = async_test("setPointerCapture: override the pending pointer capture element"); 23 24 function run() { 25 var target0 = document.getElementById("target0"); 26 var target1 = document.getElementById("target1"); 27 28 on_event(target0, "pointerdown", function (event) { 29 detected_pointertypes[event.pointerType] = true; 30 target0.setPointerCapture(event.pointerId); 31 test_setPointerCapture.step(function () { 32 assert_equals(target0.hasPointerCapture(event.pointerId), true, "Set capture to target0, target0.hasPointerCapture should be true"); 33 }); 34 target1.setPointerCapture(event.pointerId); 35 test_setPointerCapture.step(function () { 36 assert_equals(target0.hasPointerCapture(event.pointerId), false, "Set capture to target1, target0.hasPointerCapture should be false"); 37 assert_equals(target1.hasPointerCapture(event.pointerId), true, "Set capture to target1, target1.hasPointerCapture should be true"); 38 }); 39 }); 40 41 on_event(target0, "gotpointercapture", function (event) { 42 assert_true(false, "target0 shouldn't receive gotpointercapture"); 43 }); 44 45 on_event(target1, "gotpointercapture", function (event) { 46 assert_true(true, "target1 should receive gotpointercapture"); 47 }); 48 49 on_event(target1, "pointerup", function (event) { 50 // Make sure the test finishes after all the input actions are completed. 51 actions_promise.then( () => { 52 test_setPointerCapture.done(); 53 }); 54 }); 55 56 // Inject mouse inputs. 57 actions_promise = new test_driver.Actions() 58 .addPointer("TestPointer", pointer_type) 59 .pointerMove(0, 0, {origin: target0}) 60 .pointerDown() 61 .pointerMove(10, 10, {origin: target0}) 62 .pointerUp() 63 .send(); 64 } 65 </script> 66 </head> 67 <body onload="run()"> 68 <h1>Pointer Event: Test overriding the pending pointer capture element</h1> 69 <h4>Test Description: 70 After an element setPointerCapture, if another element also setPointerCapture and override it, the old pending pointer capture element shouldn't receive any gotpointercapture or lostpointercapture event 71 <ol> 72 <li>Press and hold left mouse button over black box 73 <li>Move mouse and release mouse button 74 </ol> 75 </h4> 76 <br> 77 <div id="target0" style="touch-action:none"></div> 78 <div id="target1"></div> 79 <div id="complete-notice"> 80 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 81 </div> 82 <div id="log"></div> 83 </body> 84 </html>