| // Structure: |
| // <div #aboveHost> |
| // <div #host> |
| // #shadowRoot |
| // <div #aboveSlot> |
| // <slot #slotAbove> |
| // (slotted) <div #slottedAbove> |
| // <slot #slotBelow> |
| // (slotted) <div #slottedBelow> |
| // <div #belowSlot> |
| // <div #belowHost> |
| function prepareDOM(container, delegatesFocus) { |
| |
| const aboveHost = document.createElement("div"); |
| aboveHost.innerText = "aboveHost"; |
| const host = document.createElement("div"); |
| host.id = "host"; |
| const slottedBelow = document.createElement("div"); |
| slottedBelow.innerText = "slotted below"; |
| slottedBelow.slot = "below"; |
| const slottedAbove = document.createElement("div"); |
| slottedAbove.innerText = "slotted above"; |
| slottedAbove.slot = "above"; |
| |
| const belowHost = document.createElement("div"); |
| belowHost.innerText = "belowHost"; |
| container.appendChild(aboveHost); |
| container.appendChild(host); |
| container.appendChild(belowHost); |
| host.appendChild(slottedBelow); |
| host.appendChild(slottedAbove); |
| const shadowRoot = host.attachShadow({ mode: "open", delegatesFocus: delegatesFocus}); |
| const aboveSlot = document.createElement("div"); |
| aboveSlot.innerText = "aboveSlot"; |
| |
| const slotAbove = document.createElement("slot"); |
| slotAbove.name = "above"; |
| const slotBelow = document.createElement("slot"); |
| slotBelow.name = "below"; |
| |
| const belowSlot = document.createElement("div"); |
| belowSlot.innerText = "belowSlot"; |
| shadowRoot.appendChild(aboveSlot); |
| shadowRoot.appendChild(slotAbove); |
| shadowRoot.appendChild(slotBelow); |
| shadowRoot.appendChild(belowSlot); |
| |
| return [aboveHost, host, aboveSlot, slotAbove, slottedAbove, slotBelow, slottedBelow, belowSlot, belowHost]; |
| } |
| |
| function setTabIndex(elements, value) { |
| for (const el of elements) { |
| el.tabIndex = value; |
| } |
| } |
| |
| function removeTabIndex(elements) { |
| for (const el of elements) { |
| el.removeAttribute("tabindex"); |
| } |
| } |
| |
| function resetFocus(root = document) { |
| if (root.activeElement) |
| root.activeElement.blur(); |
| } |
| |
| function navigateFocusForward() { |
| // TAB = '\ue004' |
| return test_driver.send_keys(document.body, "\ue004"); |
| } |
| |
| async function assertFocusOrder(expectedOrder) { |
| const shadowRoot = document.getElementById("host").shadowRoot; |
| for (const el of expectedOrder) { |
| await navigateFocusForward(); |
| const focused = shadowRoot.activeElement ? shadowRoot.activeElement : document.activeElement; |
| assert_equals(focused, el); |
| } |
| } |