non-modal-dialog-does-not-block-mouse-events.html (1441B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=author href="mailto:falken@chromium.org"> 4 <link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element"> 5 <link rel=help href="https://bugs.webkit.org/show_bug.cgi?id=110952"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 12 <p> 13 To test manually, click the red box. The test succeeds if the red box turns green. 14 </p> 15 16 <style> 17 #div { 18 height: 100px; 19 width: 100px; 20 background: red; 21 } 22 </style> 23 24 <div id="div"></div> 25 <dialog id="dialog"></dialog> 26 27 <script> 28 promise_test(async () => { 29 async function clickOn(element) { 30 const actions = new test_driver.Actions() 31 .pointerMove(0, 0, {origin: element}) 32 .pointerDown() 33 .pointerUp() 34 .pointerMove(0, 0); 35 await actions.send(); 36 } 37 38 const dialog = document.getElementById('dialog'); 39 dialog.show(); 40 41 const div = document.getElementById('div'); 42 div.firedOn = false; 43 div.addEventListener('click', function(event) { 44 div.firedOn = true; 45 div.style.backgroundColor = 'green'; 46 }); 47 48 await clickOn(div); 49 50 assert_true(div.firedOn); 51 }, 'Ensure that non-modal dialogs do not block mouse events.'); 52 </script>