focus-tab-on-shadow-host.html (1166B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: Use tab to navigate the focus to an element inside shadow host with delegatesFocus</title> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <script src="resources/shadow-utils.js"></script> 9 10 <body> 11 <div id="host"></div> 12 </body> 13 14 <script> 15 const host = document.getElementById("host"); 16 17 const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: true }); 18 const input = document.createElement("input"); 19 shadowRoot.appendChild(input); 20 21 promise_test(async function() { 22 assert_equals(document.activeElement, document.body); 23 // Press <tab> 24 await navigateFocusForward(); 25 assert_equals(document.activeElement, host); 26 assert_equals(shadowRoot.activeElement, input); 27 assert_true(host.matches(':focus')); 28 assert_true(input.matches(':focus')); 29 assert_true(input.matches(':focus-visible')); 30 }, ":focus should be applied to the host and :focus-visible should be applied to the child node when the focus is moved by <tab>"); 31 </script>