popover-light-dismiss-with-anchor.tentative.html (3423B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Popover light dismiss with anchor behavior</title> 4 <meta name="timeout" content="long"> 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 <button id=p1anchor tabindex="0">Popover1 anchor (no action)</button> 15 <div popover id=p1 anchor=p1anchor> 16 <span id=inside1>Inside popover 1</span> 17 <button id=b2 popovertarget='p2' popovertargetaction=show>Popover 2</button> 18 </div> 19 <div popover id=p2 anchor=b2> 20 <span id=inside2>Inside popover 2</span> 21 </div> 22 <style> 23 #p1 {top: 50px;} 24 #p2 {top: 120px;} 25 [popover] {bottom:auto;} 26 [popover]::backdrop { 27 /* This should *not* affect anything: */ 28 pointer-events: auto; 29 } 30 </style> 31 <script> 32 const popover1 = document.querySelector('#p1'); 33 const popover1anchor = document.querySelector('#p1anchor'); 34 const popover2 = document.querySelector('#p2'); 35 const inside1 = document.querySelector('#inside1'); 36 const inside2 = document.querySelector('#inside2'); 37 38 let popover1HideCount = 0; 39 popover1.addEventListener('beforetoggle',(e) => { 40 if (e.newState !== "closed") 41 return; 42 ++popover1HideCount; 43 e.preventDefault(); // 'beforetoggle' should not be cancellable. 44 }); 45 let popover2HideCount = 0; 46 popover2.addEventListener('beforetoggle',(e) => { 47 if (e.newState !== "closed") 48 return; 49 ++popover2HideCount; 50 e.preventDefault(); // 'beforetoggle' should not be cancellable. 51 }); 52 53 promise_test(async () => { 54 popover1.showPopover(); 55 popover2.showPopover(); 56 await waitForRender(); 57 p1HideCount = popover1HideCount; 58 let p2HideCount = popover2HideCount; 59 await clickOn(inside2); 60 assert_true(popover1.matches(':popover-open'),'popover1 should be open'); 61 assert_true(popover2.matches(':popover-open'),'popover2 should be open'); 62 assert_equals(popover1HideCount,p1HideCount,'popover1'); 63 assert_equals(popover2HideCount,p2HideCount,'popover2'); 64 popover1.hidePopover(); 65 assert_false(popover1.matches(':popover-open')); 66 assert_false(popover2.matches(':popover-open')); 67 },'Clicking inside a child popover shouldn\'t close either popover'); 68 69 promise_test(async () => { 70 popover1.showPopover(); 71 popover2.showPopover(); 72 await waitForRender(); 73 p1HideCount = popover1HideCount; 74 p2HideCount = popover2HideCount; 75 await clickOn(inside1); 76 assert_true(popover1.matches(':popover-open')); 77 assert_equals(popover1HideCount,p1HideCount); 78 assert_false(popover2.matches(':popover-open')); 79 assert_equals(popover2HideCount,p2HideCount+1); 80 popover1.hidePopover(); 81 },'Clicking inside a parent popover should close child popover'); 82 83 promise_test(async () => { 84 popover1.showPopover(); 85 assert_true(popover1.matches(':popover-open')); 86 await waitForRender(); 87 await clickOn(popover1anchor); 88 assert_false(popover1.matches(':popover-open'),'popover1 should close'); 89 },'Clicking on anchor element (that isn\'t an invoking element) shouldn\'t prevent its popover from being closed'); 90 </script>