popover-beforetoggle-opening-event.html (1239B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Popover beforetoggle event</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 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <div popover></div> 11 12 <script> 13 test(() => { 14 let frameCount = 0; 15 requestAnimationFrame(() => {++frameCount;}); 16 const popover = document.querySelector('[popover]'); 17 const testText = 'Show Event Occurred'; 18 popover.addEventListener('beforetoggle',(e) => { 19 assert_false(e.bubbles, 'beforetoggle event does not bubble'); 20 if (e.newState !== "open") 21 return; 22 popover.textContent = testText; 23 }) 24 popover.offsetHeight; 25 assert_equals(popover.textContent,""); 26 assert_equals(frameCount,0); 27 popover.showPopover(); 28 popover.offsetHeight; 29 assert_equals(popover.textContent,testText); 30 assert_equals(frameCount,0,'nothing should be rendered before the popover is updated'); 31 popover.hidePopover(); // Cleanup 32 },'Ensure the `beforetoggle` event can be used to populate content before the popover renders'); 33 </script>