popover-focus-across-slot.html (1677B)
1 <!doctype html> 2 <meta charset="utf-8" /> 3 <title>Popover focus behaviors in form control elements</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 popover id="popover"> 17 <div id="host"> 18 <template shadowrootmode="open"> 19 <div> 20 <div> 21 <div> 22 <slot></slot> 23 <button id="close">Close popover</button> 24 </div> 25 </div> 26 </div> 27 </template> 28 <div> 29 <input type="checkbox" id="target1" /> 30 <input type="checkbox" id="target2" /> 31 </div> 32 </div> 33 </div> 34 <button popovertarget="popover" id="invoker">Open popover</button> 35 <button id="after"> 36 This button is where focus should land after traversing this popover 37 </button> 38 39 <script> 40 promise_test(async () => { 41 // Open popover 42 invoker.focus(); 43 assert_equals(document.activeElement, invoker); 44 invoker.click(); 45 assert_true(popover.matches(":popover-open")); 46 47 await assert_focus_navigation_bidirectional([ 48 'invoker', 49 'target1', 50 'target2', 51 'host/close', 52 'after', 53 ]); 54 }); 55 </script>