popover-shadowhost-focus.html (2100B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/issues/8994"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 7 <div popover=auto tabindex=0 data-test="autofocus=true, delegatesfocus=false" autofocus class=should-be-focused> 8 <template shadowrootmode=open> 9 <button autofocus>autofocus button</button> 10 </template> 11 </div> 12 13 <!-- The autofocus popover is what focus() gets called on, but since it has a 14 delegatesFocus shadowroot, focus() itself goes into the shadowroot. --> 15 <div popover=auto tabindex=0 data-test="autofocus=true, delegatesfocus=true" autofocus> 16 <template shadowrootmode=open shadowrootdelegatesfocus> 17 <button autofocus class=should-be-focused>autofocus button</button> 18 </template> 19 </div> 20 21 <div popover=auto tabindex=0 data-test="autofocus=false, delegatesfocus=false"> 22 <template shadowrootmode=open> 23 <button autofocus>autofocus button</button> 24 </template> 25 </div> 26 27 <div popover=auto tabindex=0 data-test="autofocus=false, delegatesfocus=true"> 28 <template shadowrootmode=open shadowrootdelegatesfocus> 29 <button autofocus>autofocus button</button> 30 </template> 31 </div> 32 33 <script> 34 document.querySelectorAll('body > [popover]').forEach(popover => { 35 promise_test(async () => { 36 const expectedFocusedElement = (popover.matches('.should-be-focused') ? popover : null) 37 || popover.querySelector('.should-be-focused') 38 || popover.shadowRoot.querySelector('.should-be-focused') 39 || document.body; 40 41 popover.showPopover(); 42 43 let actualFocusedElement = document.activeElement; 44 if (actualFocusedElement.shadowRoot && actualFocusedElement.shadowRoot.activeElement) { 45 actualFocusedElement = actualFocusedElement.shadowRoot.activeElement; 46 } 47 48 popover.hidePopover(); 49 50 // Resetting focus may happen asynchronously 51 await new Promise(resolve => requestAnimationFrame(resolve)); 52 53 assert_equals(actualFocusedElement, expectedFocusedElement); 54 }, popover.getAttribute('data-test')); 55 }); 56 </script>