focus-tabindex-order-shadow-varying-tabindex-3.html (2836B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>HTML Test: focus - the sequential focus navigation order with nested shadow dom with varying tabindex values</title> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="resources/shadow-utils.js"></script> 10 <body> 11 <script> 12 promise_test(async () => { 13 function createButtonInShadowDOM(host, parent) { 14 const root = host.attachShadow({mode: "open"}); 15 root.innerHTML = "<input>"; 16 parent.appendChild(host); 17 return root; 18 } 19 20 const host1 = document.createElement("div"); 21 const root1 = createButtonInShadowDOM(host1, document.body); 22 23 const forwarder = document.createElement("div"); 24 forwarder.setAttribute("tabindex", 0); 25 document.body.appendChild(forwarder); 26 27 const host2 = document.createElement("div"); 28 host2.setAttribute("tabindex", -1); 29 const root2 = host2.attachShadow({mode: "open"}); 30 document.body.appendChild(host2); 31 32 const host2_1 = document.createElement("div"); 33 const root2_1 = createButtonInShadowDOM(host2_1, root2); 34 35 const host2_2 = document.createElement("div"); 36 host2_2.setAttribute("tabindex", -1); 37 const root2_2 = createButtonInShadowDOM(host2_2, root2); 38 39 const host2_3 = document.createElement("div"); 40 const root2_3 = createButtonInShadowDOM(host2_3, root2); 41 42 root1.querySelector("input").focus(); 43 44 let forwarderFocused = false; 45 forwarder.addEventListener("focus", () => { 46 forwarderFocused = true; 47 root2_2.querySelector("input").focus(); 48 }); 49 50 // Structure: 51 // <div #host1></div> 52 // #ShadowRoot 53 // <button>Button</button> 54 // <div #forwarder tabindex=0></div> 55 // <div #host2 tabindex=-1></div> 56 // #ShadowRoot 57 // <div #host2_1></div> 58 // #ShadowRoot 59 // <button>Button</button> 60 // <div #host2_2 tabindex=-1></div> 61 // #ShadowRoot 62 // <button>Button</button> 63 // <div #host2_3></div> 64 // #ShadowRoot 65 // <button>Button</button> 66 assert_equals(document.activeElement, host1); 67 assert_equals(root1.activeElement, root1.querySelector("input")); 68 69 await navigateFocusForward(); 70 assert_true(forwarderFocused); 71 assert_equals(document.activeElement, host2); 72 assert_equals(root2_2.activeElement, root2_2.querySelector("input")); 73 74 // In buggy Firefox build, the following focus navigation will 75 // move the focus back to #host1_1's button. 76 await navigateFocusForward(); 77 assert_equals(document.activeElement, host2); 78 assert_equals(root2_3.activeElement, root2_3.querySelector("input")); 79 }, "Order with different tabindex on host") 80 </script>