popover-invoking-attribute.html (2595B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Popover invoking attribute</title> 4 <link rel="author" href="mailto:masonf@chromium.org"> 5 <link rel=help href="https://open-ui.org/components/popover.research.explainer"> 6 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html"> 7 <meta name="timeout" content="long"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/resources/testdriver.js"></script> 11 <script src="/resources/testdriver-actions.js"></script> 12 <script src="/resources/testdriver-vendor.js"></script> 13 <script src="resources/popover-utils.js"></script> 14 <script src="resources/popover-invoking-attribute.js"></script> 15 16 <body> 17 <script> 18 runPopoverInvokerTests(["auto","manual"]); 19 </script> 20 21 <button popovertarget=p1>Toggle Popover 1</button> 22 <div popover id=p1 style="border: 5px solid red;top: 100px;left: 100px;">This is popover #1</div> 23 24 <script> 25 function clickOn(element) { 26 const actions = new test_driver.Actions(); 27 return actions.pointerMove(0, 0, {origin: element}) 28 .pointerDown({button: actions.ButtonType.LEFT}) 29 .pointerUp({button: actions.ButtonType.LEFT}) 30 .send(); 31 } 32 33 const popover = document.querySelector('[popover]'); 34 const button = document.querySelector('button'); 35 let showCount = 0; 36 let hideCount = 0; 37 popover.addEventListener('beforetoggle',(e) => { 38 if (e.newState === "open") 39 ++showCount; 40 else 41 ++hideCount; 42 }); 43 44 async function assertState(expectOpen,expectShow,expectHide) { 45 assert_equals(popover.matches(':popover-open'),expectOpen,'Popover open state is incorrect'); 46 await new Promise(resolve => requestAnimationFrame(resolve)); 47 assert_equals(showCount,expectShow,'Show count is incorrect'); 48 assert_equals(hideCount,expectHide,'Hide count is incorrect'); 49 } 50 51 window.addEventListener('load', () => { 52 promise_test(async () => { 53 showCount = hideCount = 0; 54 await assertState(false,0,0); 55 await clickOn(button); 56 await assertState(true,1,0); 57 popover.hidePopover(); 58 await assertState(false,1,1); 59 button.click(); 60 await assertState(true,2,1); 61 popover.hidePopover(); 62 await assertState(false,2,2); 63 }, "Clicking a popovertarget button opens a closed popover (also check event counts)"); 64 65 promise_test(async () => { 66 showCount = hideCount = 0; 67 await assertState(false,0,0); 68 await clickOn(button); 69 await assertState(true,1,0); 70 await clickOn(button); 71 await assertState(false,1,1); 72 }, "Clicking a popovertarget button closes an open popover (also check event counts)"); 73 }); 74 </script>