popover-focus-inside-shadow-dom.html (1858B)
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 <my-element id="host"> 17 <template shadowrootmode="open"> 18 <button popovertarget="popover" id="invoker">Open popover</button> 19 <div popover id="popover"> 20 <input type="checkbox" id="target1" /> 21 <input type="checkbox" id="target2" /> 22 <button id="close">Close popover</button> 23 </div> 24 <button id="after"> 25 This button is where focus should land after traversing this popover 26 </button> 27 </template> 28 </my-element> 29 30 <script> 31 promise_test(async () => { 32 const shadowRoot = host.shadowRoot; 33 const invoker = shadowRoot.getElementById('invoker'); 34 const popover = shadowRoot.getElementById('popover'); 35 // Open popover 36 invoker.focus(); 37 invoker.click(); 38 assert_true(popover.matches(":popover-open")); 39 assert_equals(document.activeElement, host); 40 assert_equals(document.activeElement.shadowRoot.activeElement, invoker); 41 42 await assert_focus_navigation_bidirectional([ 43 'host/invoker', 44 'host/target1', 45 'host/target2', 46 'host/close', 47 'host/after', 48 ]); 49 }, 'Focus behavior of popover elements inside shadow DOM'); 50 </script>