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