dialog-light-dismiss-pointer-capture.html (1875B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/w3c/pointerevents/issues/542"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 10 <dialog id=dialog closedby=any> 11 dialog 12 <button>pointer capturing button</button> 13 </dialog> 14 15 <script> 16 const dialog = document.getElementById('dialog'); 17 18 function click() { 19 return (new test_driver.Actions() 20 .pointerMove(1, 1) 21 .pointerDown() 22 .pointerUp()) 23 .send(); 24 } 25 26 function touch() { 27 return (new test_driver.Actions() 28 .addPointer('finger', 'touch') 29 .pointerMove(1, 1) 30 .pointerDown() 31 .pointerUp()) 32 .send(); 33 } 34 35 [true, false].forEach(useTouch => { 36 promise_test(async t => { 37 let usePointerCapture = true; 38 t.add_cleanup(() => { 39 usePointerCapture = false; 40 dialog.close(); 41 }); 42 43 const button = dialog.querySelector('button'); 44 document.body.addEventListener('pointerdown', event => { 45 if (usePointerCapture) { 46 button.setPointerCapture(event.pointerId); 47 } 48 }); 49 50 dialog.showModal(); 51 assert_true(dialog.open, 'dialog should be open at the start of the test.'); 52 53 if (useTouch) { 54 await touch(); 55 } else { 56 await click(); 57 } 58 assert_true(dialog.open, 'dialog should not light dismiss when pointer capture is being used.'); 59 60 usePointerCapture = false; 61 if (useTouch) { 62 await touch(); 63 } else { 64 await click(); 65 } 66 assert_false(dialog.open, 'dialog should light dismiss when pointer capture is not being used.'); 67 }, `Light dismiss on dialog with ${useTouch ? 'touch' : 'mouse'} input with pointer capture.`); 68 }); 69 </script>