popover-light-dismiss-scroll-within.html (1692B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 4 <title>Popover light dismiss behavior when scrolled within</title> 5 <link rel="author" href="mailto:masonf@chromium.org"> 6 <link rel=help href="https://open-ui.org/components/popover.research.explainer"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script src="/resources/testdriver-vendor.js"></script> 12 <script src="resources/popover-utils.js"></script> 13 14 <style> 15 [popover] { 16 /* Position most popovers at the bottom-right, out of the way */ 17 inset:auto; 18 bottom:0; 19 right:0; 20 } 21 [popover]::backdrop { 22 /* This should *not* affect anything: */ 23 pointer-events: auto; 24 } 25 </style> 26 27 <div popover id=p>Inside popover 28 <div style="height:2000px;background:lightgreen"></div> 29 Bottom of popover 30 </div> 31 <button popovertarget=p>Popover</button> 32 <style> 33 #p { 34 width: 300px; 35 height: 300px; 36 overflow-y: scroll; 37 } 38 </style> 39 <script> 40 const popover = document.querySelector('#p'); 41 promise_test(async () => { 42 popover.showPopover(); 43 assert_equals(popover.scrollTop,0,'popover should start non-scrolled'); 44 await new test_driver.Actions() 45 .scroll(0, 0, 0, 50, {origin: popover}) 46 .send(); 47 await waitForRender(); 48 assert_true(popover.matches(':popover-open'),'popover should stay open'); 49 assert_equals(popover.scrollTop,50,'popover should be scrolled'); 50 popover.hidePopover(); 51 },'Scrolling within a popover should not close the popover'); 52 </script>