shadow-utils.js (2427B)
1 // Structure: 2 // <div #aboveHost> 3 // <div #host> 4 // #shadowRoot 5 // <div #aboveSlot> 6 // <slot #slotAbove> 7 // (slotted) <div #slottedAbove> 8 // <slot #slotBelow> 9 // (slotted) <div #slottedBelow> 10 // <div #belowSlot> 11 // <div #belowHost> 12 function prepareDOM(container, delegatesFocus) { 13 14 const aboveHost = document.createElement("div"); 15 aboveHost.innerText = "aboveHost"; 16 const host = document.createElement("div"); 17 host.id = "host"; 18 const slottedBelow = document.createElement("div"); 19 slottedBelow.innerText = "slotted below"; 20 slottedBelow.slot = "below"; 21 const slottedAbove = document.createElement("div"); 22 slottedAbove.innerText = "slotted above"; 23 slottedAbove.slot = "above"; 24 25 const belowHost = document.createElement("div"); 26 belowHost.innerText = "belowHost"; 27 container.appendChild(aboveHost); 28 container.appendChild(host); 29 container.appendChild(belowHost); 30 host.appendChild(slottedBelow); 31 host.appendChild(slottedAbove); 32 const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: delegatesFocus}); 33 const aboveSlot = document.createElement("div"); 34 aboveSlot.innerText = "aboveSlot"; 35 36 const slotAbove = document.createElement("slot"); 37 slotAbove.name = "above"; 38 const slotBelow = document.createElement("slot"); 39 slotBelow.name = "below"; 40 41 const belowSlot = document.createElement("div"); 42 belowSlot.innerText = "belowSlot"; 43 shadowRoot.appendChild(aboveSlot); 44 shadowRoot.appendChild(slotAbove); 45 shadowRoot.appendChild(slotBelow); 46 shadowRoot.appendChild(belowSlot); 47 48 return [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost]; 49 } 50 51 function setTabIndex(elements, value) { 52 for (const el of elements) { 53 el.tabIndex = value; 54 } 55 } 56 57 function removeTabIndex(elements) { 58 for (const el of elements) { 59 el.removeAttribute("tabindex"); 60 } 61 } 62 63 function resetFocus(root = document) { 64 if (root.activeElement) 65 root.activeElement.blur(); 66 } 67 68 function navigateFocusForward() { 69 // TAB = '\ue004' 70 return test_driver.send_keys(document.body, "\ue004"); 71 } 72 73 async function assertFocusOrder(expectedOrder) { 74 const shadowRoot = document.getElementById("host").shadowRoot; 75 for (const el of expectedOrder) { 76 await navigateFocusForward(); 77 const focused = shadowRoot.activeElement ? shadowRoot.activeElement : document.activeElement; 78 assert_equals(focused, el); 79 } 80 }