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