popover-focus-inside-slot.html (1698B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <title>Popover focus behaviors inside shadow DOM</title> 4 <meta name="timeout" content="long" /> 5 <link rel="author" title="Peng Zhou" href="mailto:zhoupeng.1996@bytedance.com"> 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="/shadow-dom/focus-navigation/resources/focus-utils.js"></script> 13 <script src="/shadow-dom/focus-navigation/resources/shadow-dom.js"></script> 14 <script src="resources/popover-utils.js"></script> 15 16 <div> 17 <template shadowrootmode="open"> 18 <slot name=invoker></slot> 19 <slot name=popover></slot> 20 <slot name=after></slot> 21 </template> 22 <button slot=invoker popovertarget="popover" id="invoker">Open 23 popover</button> 24 <div slot=popover popover id="popover"> 25 <input type="checkbox" id="target1" /> 26 <input type="checkbox" id="target2" /> 27 <button id="close">Close popover</button> 28 </div> 29 <button slot=after id="after"> 30 This button is where focus should land after traversing this popover 31 </button> 32 </div> 33 34 <script> 35 promise_test(async () => { 36 // Open popover 37 invoker.focus(); 38 invoker.click(); 39 assert_true(popover.matches(":popover-open")); 40 assert_equals(document.activeElement, invoker); 41 42 await assert_focus_navigation_bidirectional([ 43 'invoker', 44 'target1', 45 'target2', 46 'close', 47 'after', 48 ]); 49 }, 'Focus behavior of popover elements inside slot'); 50 </script>