popover-focus-slotted.html (1893B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Popover focus with slotted popover and invoker</title> 4 <link rel="author" href="mailto:masonf@chromium.org"> 5 <link rel=help href="https://crbug.com/447888734"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="/html/semantics/popovers/resources/popover-utils.js"></script> 12 13 <div id="host"> 14 <template shadowrootmode="open"> 15 <div> 16 <slot id="invoker" name="invoker"></slot> 17 <slot id="popover" popover="manual"></slot> 18 </div> 19 </template> 20 <button slot="invoker">Click me</button> 21 <button id="inner">Click me next</button> 22 </div> 23 24 <script> 25 const div = document.getElementById('host'); 26 const invoker = div.shadowRoot.querySelector("#invoker"); 27 const popover = div.shadowRoot.querySelector("#popover"); 28 const inner = document.getElementById('inner'); 29 popover.togglePopover({source: invoker}); 30 31 promise_test(async () => { 32 assert_true(popover.matches(':popover-open'), 'Popover should be open'); 33 inner.focus(); 34 assert_equals(document.activeElement, inner, 'Start with inner focused'); 35 36 // Tab forward 37 await sendTab(); 38 assert_not_equals(document.activeElement, inner, 'Focus should move'); 39 }, 'Tabbing forward out of a <slot popover> should not hang.'); 40 41 promise_test(async () => { 42 assert_true(popover.matches(':popover-open'), 'Popover should be open'); 43 inner.focus(); 44 assert_equals(document.activeElement, inner, 'Start with inner focused'); 45 46 // Tab backwards 47 await sendShiftTab(); 48 assert_not_equals(document.activeElement, inner, 'Focus should move'); 49 }, 'Tabbing backwards out of a <slot popover> should not hang.'); 50 </script>