Quelle file_focus_shadow_dom.html Sprache: HTML

products/sources/formale Sprachen/C/Firefox/dom/base/test/file_focus_shadow_dom.html

<html>
  <head>
    <title>Test for Bug 1453693</title>
    <script src="/tests/SimpleTest/SimpleTest.js"></script>
    <script src="/tests/SimpleTest/EventUtils.js"></script>
    <script>

      class TestNode extends HTMLElement {
      constructor() {
        super();
        const styles = "";
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML =
          `${styles}<div tabindex='-1'>test node</div> <slot></slot>`;
      }}

      window.customElements.define('test-node', TestNode);

      var lastFocusTarget;
      function focusLogger(event) {
        lastFocusTarget = event.target;
        console.log(event.target + " under " + event.target.parentNode);
        event.stopPropagation();
      }

      function testTabbingThroughShadowDOMWithTabIndexes() {
        var anchor = document.createElement("a");
        anchor.onfocus = focusLogger;
        anchor.href = "#";
        anchor.textContent = "in light DOM";
        document.body.appendChild(anchor);

        var host = document.createElement("div");
        document.body.appendChild(host);

        var sr = host.attachShadow({mode: "open"});
        var shadowAnchor = anchor.cloneNode(false);
        shadowAnchor.onfocus = focusLogger;
        shadowAnchor.textContent = "in shadow DOM";
        sr.appendChild(shadowAnchor);
        var shadowInput = document.createElement("input");
        shadowInput.onfocus = focusLogger;
        shadowInput.tabIndex = 1;
        sr.appendChild(shadowInput);

        var shadowDate = document.createElement("input");
        shadowDate.type = "date";
        shadowDate.onfocus = focusLogger;
        shadowDate.tabIndex = 1;
        sr.appendChild(shadowDate);

        var shadowIframe = document.createElement("iframe");
        shadowIframe.tabIndex = 1;
        sr.appendChild(shadowIframe);
        shadowIframe.contentDocument.body.innerHTML = "";

        var input = document.createElement("input");
        input.onfocus = focusLogger;
        input.tabIndex = 1;
        document.body.appendChild(input);

        var input2 = document.createElement("input");
        input2.onfocus = focusLogger;
        document.body.appendChild(input2);

        document.body.offsetLeft;

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input, "Should have focused input element. (3)");
        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, anchor, "Should have focused anchor element. (3)");
        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, shadowInput, "Should have focused input element in shadow DOM. (3)");
        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, shadowDate, "Should have focused date element in shadow DOM. (3)");
        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, shadowDate, "Should have focused date element in shadow DOM. (3)");
        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, shadowDate, "Should have focused date element in shadow DOM. (3)");
        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, shadowDate, "Should have focused date element with a calendar button in shadow DOM. (3)");

        let canTabMoveFocusToRootElement =
          !SpecialPowers.getBoolPref("dom.disable_tab_focus_to_root_element");
        if (canTabMoveFocusToRootElement) {
          synthesizeKey("KEY_Tab");
          opener.is(shadowIframe.contentDocument.activeElement,
                    shadowIframe.contentDocument.documentElement,
                    "Should have focused document element in shadow iframe. (3)");
        }

        synthesizeKey("KEY_Tab");
        opener.is(shadowIframe.contentDocument.activeElement,
                  shadowIframe.contentDocument.body.firstChild,
                  "Should have focused input element in shadow iframe. (3)");
        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, shadowAnchor, "Should have focused anchor element in shadow DOM. (3)");
        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input2, "Should have focused input[2] element. (3)");

        // Backwards
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, shadowAnchor, "Should have focused anchor element in shadow DOM. (4)");
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(shadowIframe.contentDocument.activeElement,
                  shadowIframe.contentDocument.body.firstChild,
                  "Should have focused input element in shadow iframe. (4)");
        if (canTabMoveFocusToRootElement) {
          synthesizeKey("KEY_Tab", {shiftKey: true});
          opener.is(shadowIframe.contentDocument.activeElement,
                    shadowIframe.contentDocument.documentElement,
                    "Should have focused document element in shadow iframe. (4)");
        }
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, shadowDate, "Should have focused date element with a calendar button in shadow DOM. (4)");
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, shadowDate, "Should have focused date element in shadow DOM. (4)");
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, shadowDate, "Should have focused date element in shadow DOM. (4)");
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, shadowDate, "Should have focused date element in shadow DOM. (4)");
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, shadowInput, "Should have focused input element in shadow DOM. (4)");
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, anchor, "Should have focused anchor element. (4)");
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input, "Should have focused input element. (4)");

        document.body.innerHTML = null;
      }

      function testTabbingThroughSimpleShadowDOM() {
        var anchor = document.createElement("a");
        anchor.onfocus = focusLogger;
        anchor.href = "#";
        anchor.textContent = "in light DOM";
        document.body.appendChild(anchor);
        anchor.focus();

        var host = document.createElement("div");
        document.body.appendChild(host);

        var sr = host.attachShadow({mode: "open"});
        var shadowAnchor = anchor.cloneNode(false);
        shadowAnchor.onfocus = focusLogger;
        shadowAnchor.textContent = "in shadow DOM";
        sr.appendChild(shadowAnchor);
        var shadowInput = document.createElement("input");
        shadowInput.onfocus = focusLogger;
        sr.appendChild(shadowInput);

        var hiddenShadowButton = document.createElement("button");
        hiddenShadowButton.setAttribute("style", "display: none;");
        sr.appendChild(hiddenShadowButton);

        var input = document.createElement("input");
        input.onfocus = focusLogger;
        document.body.appendChild(input);

        var input2 = document.createElement("input");
        input2.onfocus = focusLogger;
        document.body.appendChild(input2);

        document.body.offsetLeft;

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, shadowAnchor, "Should have focused anchor element in shadow DOM.");
        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, shadowInput, "Should have focused input element in shadow DOM.");
        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input, "Should have focused input element.");
        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input2, "Should have focused input[2] element.");

        // Backwards
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input, "Should have focused input element. (2)");
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, shadowInput, "Should have focused input element in shadow DOM. (2)");
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, shadowAnchor, "Should have focused anchor element in shadow DOM. (2)");
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, anchor, "Should have focused anchor element. (2)");

        host.remove();
        input.remove();
        input2.remove();
      }

      function testTabbingThroughNestedShadowDOM() {
        opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus. (1)");

        var host = document.createElement("div");
        host.id = "host";
        document.body.appendChild(host);

        var sr0 = host.attachShadow({mode: "open"});
        sr0.innerHTML = "

";
        var button = sr0.getElementById("button");
        button.onfocus = focusLogger;

        var h1 = sr0.getElementById("h1");
        var sr1 = h1.attachShadow({mode: "open"});
        sr1.innerHTML = "h1 ";
        var input11 = sr1.getElementById("h11");
        input11.onfocus = focusLogger;
        var input12 = sr1.getElementById("h12");
        input12.onfocus = focusLogger;

        var h2 = sr0.getElementById("h2");
        var sr2 = h2.attachShadow({mode: "open"});
        sr2.innerHTML = "h2 ";
        var input21 = sr2.getElementById("h21");
        input21.onfocus = focusLogger;
        var input22 = sr2.getElementById("h22");
        input22.onfocus = focusLogger;

        document.body.offsetLeft;

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, button, "[nested shadow] Should have focused button element. (1)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input11, "[nested shadow] Should have focused input element. (1)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input12, "[nested shadow] Should have focused input element. (2)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input21, "[nested shadow] Should have focused input element. (3)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input22, "[nested shadow] Should have focused input element. (4)");

        // Backwards
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input21, "[nested shadow] Should have focused input element. (5)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input12, "[nested shadow] Should have focused input element. (6)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input11, "[nested shadow] Should have focused input element. (7)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, button, "[nested shadow] Should have focused button element. (8)");

        // Back to beginning, outside of Shadow DOM.
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus. (2)");

        host.remove();
      }

      function testTabbingThroughDisplayContentsHost() {
        opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus. (1)");

        var host = document.createElement("div");
        host.id = "host";
        host.setAttribute("style", "display: contents; border: 1px solid black;");
        document.body.appendChild(host);

        var sr0 = host.attachShadow({mode: "open"});
        sr0.innerHTML = "";
        var shadowInput1 = sr0.getElementById("shadowInput1");
        shadowInput1.onfocus = focusLogger;
        var shadowInput2 = sr0.getElementById("shadowInput2");
        shadowInput2.onfocus = focusLogger;

        var host1 = document.createElement("div");
        host1.id = "host";
        host1.tabIndex = 0;
        host1.setAttribute("style", "display: contents; border: 1px solid black;");
        document.body.appendChild(host1);

        var sr1 = host1.attachShadow({mode: "open"});
        sr1.innerHTML = "";
        var shadowInput3 = sr1.getElementById("shadowInput1");
        shadowInput3.onfocus = focusLogger;
        var shadowInput4 = sr1.getElementById("shadowInput2");
        shadowInput4.onfocus = focusLogger;

        document.body.offsetLeft;

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, shadowInput1, "Should have focused input element. (1)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, shadowInput2, "Should have focused input element. (2)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, shadowInput3, "Should have focused input element. (3)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, shadowInput4, "Should have focused input element. (4)");

        // Backwards
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, shadowInput3, "Should have focused input element. (5)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, shadowInput2, "Should have focused input element. (6)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, shadowInput1, "Should have focused input element. (7)");

        // Back to beginning, outside of Shadow DOM.
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus. (2)");

        host.remove();
        host1.remove();
      }

      function testTabbingThroughLightDOMShadowDOMLightDOM() {
        opener.is(document.activeElement, document.body.firstChild,
                  "body's first child should have focus.");

        var host = document.createElement("span");
        host.innerHTML = "\n";
        host.id = "host";
        document.body.appendChild(host);

        var sr0 = host.attachShadow({mode: "open"});
        sr0.innerHTML = document.getElementById("template").innerHTML;
        var p1 = sr0.getElementById("p1");
        p1.onfocus = focusLogger;
        var p2 = sr0.getElementById("p2");
        p2.onfocus = focusLogger;

        var p = document.createElement("p");
        p.innerHTML = " link 1 ";
        var a = p.firstElementChild;
        a.onfocus = focusLogger;
        document.body.appendChild(p);

        document.body.offsetLeft;

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, p1, "Should have focused p1.");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, p2, "Should have focused p2.");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, a, "Should have focused a.");

        // Backwards
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, p2, "Should have focused p2.");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, p1, "Should have focused p1.");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(document.activeElement, document.body.firstChild,
                  "body's first child should have focus.");

        host.remove();
        p.remove();
      }

      function testFocusableHost() {
        opener.is(document.activeElement, document.body.firstChild,
                  "body's first child should have focus.");

        var host = document.createElement("div");
        host.id = "host";
        host.tabIndex = 0;
        host.onfocus = focusLogger;
        document.body.appendChild(host);

        var slotted = document.createElement("div");
        slotted.tabIndex = 0;
        slotted.onfocus = focusLogger;
        host.appendChild(slotted);

        var sr0 = host.attachShadow({mode: "open"});
        sr0.appendChild(document.createElement("slot"));

        var p = document.createElement("p");
        p.innerHTML = " link 1 ";
        var a = p.firstElementChild;
        a.onfocus = focusLogger;
        document.body.appendChild(p);

        document.body.offsetLeft;

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, host, "Should have focused host.");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, slotted, "Should have focused slotted.");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, a, "Should have focused a.");

        // Backwards
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, slotted, "Should have focused slotted.");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, host, "Should have focused host.");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(document.activeElement, document.body.firstChild,
                  "body's first child should have focus.");

        host.remove();
        p.remove();
      }

      function testShiftTabbingThroughFocusableHost() {
        opener.is(document.activeElement, document.body.firstChild,
                  "body's first child should have focus.");

        var host = document.createElement("div");
        host.id = "host";
        host.tabIndex = 0;
        host.onfocus = focusLogger;
        document.body.appendChild(host);

        var sr = host.attachShadow({mode: "open"});
        var shadowButton = document.createElement("button");
        shadowButton.innerText = "X";
        shadowButton.onfocus = focusLogger;
        sr.appendChild(shadowButton);

        var shadowInput = document.createElement("input");
        shadowInput.onfocus = focusLogger;
        sr.appendChild(shadowInput);
        sr.appendChild(document.createElement("br"));

        var input = document.createElement("input");
        input.onfocus = focusLogger;
        document.body.appendChild(input);

        document.body.offsetLeft;

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, host, "Should have focused host element. (1)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, shadowButton, "Should have focused button element in shadow DOM. (2)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, shadowInput, "Should have focused input element in shadow DOM. (3)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input, "Should have focused input element. (4)");

        // Backwards
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, shadowInput, "Should have focused input element in shadow DOM. (5)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, shadowButton, "Should have focused button element in shadow DOM. (6)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        // focus is already on host
        opener.is(sr.activeElement, null,
                  "Focus should have left button element in shadow DOM. (7)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(document.activeElement, document.body.firstChild,
                  "body's first child should have focus.");

        host.remove();
        input.remove();
      }

      function testTabbingThroughNestedSlot() {
        opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus.");

        var host0 = document.createElement("div");
        var sr0 = host0.attachShadow({mode: "open"});
        sr0.innerHTML = "";
        document.body.appendChild(host0);

        // focusable
        var host00 = document.createElement("div");
        var sr00 = host00.attachShadow({mode: "open"});
        var div00 = document.createElement("div");
        div00.tabIndex = 0;
        div00.onfocus = focusLogger;
        sr00.appendChild(div00);
        host0.appendChild(host00);

        // not focusable
        var host01 = document.createElement("div");
        var sr01 = host01.attachShadow({mode: "open"});
        sr01.innerHTML = "

";
        host0.appendChild(host01);

        // focusable
        var host02 = document.createElement("div");
        var sr02 = host02.attachShadow({mode: "open"});
        var div02 = document.createElement("div");
        div02.tabIndex = 0;
        div02.onfocus = focusLogger;
        sr02.appendChild(div02);
        host0.appendChild(host02);

        var host1 = document.createElement("div");
        var sr1 = host1.attachShadow({mode: "open"});
        sr1.innerHTML = "";
        document.body.appendChild(host1);

        var host10 = document.createElement("div");
        var sr10 = host10.attachShadow({mode: "open"});
        sr10.innerHTML = "";
        host1.appendChild(host10);

        var input10 = document.createElement("input");
        input10.onfocus = focusLogger;
        host10.appendChild(input10);

        var host11 = document.createElement("div");
        var sr11 = host11.attachShadow({mode: "open"});
        sr11.innerHTML = "";
        host1.appendChild(host11);

        var input11 = document.createElement("input");
        input11.onfocus = focusLogger;
        host11.appendChild(input11);

        document.body.offsetLeft;

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, div00, "Should have focused div element in shadow DOM. (1)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, div02, "Should have focused div element in shadow DOM. (2)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input10, "Should have focused input element in shadow DOM. (3)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input11, "Should have focused button element in shadow DOM. (4)");

        // Backwards
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input10, "Should have focused input element in shadow DOM. (5)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, div02, "Should have focused input element in shadow DOM. (6)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, div00, "Should have focused input element in shadow DOM. (7)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(document.activeElement, document.body.firstChild,
                  "body's first child should have focus.");

        host0.remove();
        host1.remove();
      }

      function testTabbingThroughSlotInLightDOM() {
        opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus.");

        var input0 = document.createElement("input");
        input0.onfocus = focusLogger;
        document.body.appendChild(input0);

        var slot1 = document.createElement("slot");
        document.body.appendChild(slot1);

        var input10 = document.createElement("input");
        input10.onfocus = focusLogger;
        slot1.appendChild(input10);

        var input11 = document.createElement("input");
        input11.onfocus = focusLogger;
        slot1.appendChild(input11);

        var input2 = document.createElement("input");
        input2.onfocus = focusLogger;
        document.body.appendChild(input2);

        document.body.offsetLeft;

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input0, "Should have focused input element. (1)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input10, "Should have focused input element in slot. (2)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input11, "Should have focused input element in slot. (3)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input2, "Should have focused input element. (4)");

        // Backwards
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input11, "Should have focused input element in slot. (5)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input10, "Should have focused input element in slot. (6)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input0, "Should have focused input element. (7)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(document.activeElement, document.body.firstChild,
                  "body's first child should have focus.");

        input0.remove();
        slot1.remove();
        input2.remove();
      }

      function testTabbingThroughFocusableSlotInLightDOM() {
        opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus.");

        var slot0 = document.createElement("slot");
        slot0.tabIndex = 0;
        slot0.setAttribute("style", "display: inline;");
        slot0.onfocus = focusLogger;
        document.body.appendChild(slot0);

        var slot00 = document.createElement("slot");
        slot00.tabIndex = 0;
        slot00.setAttribute("style", "display: inline;");
        slot00.onfocus = focusLogger;
        slot0.appendChild(slot00);

        var input000 = document.createElement("input");
        input000.onfocus = focusLogger;
        slot00.appendChild(input000);

        var input01 = document.createElement("input");
        input01.onfocus = focusLogger;
        slot0.appendChild(input01);

        var input1 = document.createElement("input");
        input1.onfocus = focusLogger;
        document.body.appendChild(input1);

        document.body.offsetLeft;

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, slot0, "Should have focused slot element. (1)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, slot00, "Should have focused slot element. (2)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input000, "Should have focused input element in slot. (3)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input01, "Should have focused input element in slot. (4)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input1, "Should have focused input element. (5)");

        // Backwards
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input01, "Should have focused input element in slot. (6)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input000, "Should have focused input element in slot. (7)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, slot00, "Should have focused slot element. (8)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, slot0, "Should have focused slot element. (9)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(document.activeElement, document.body.firstChild,
                  "body's first child should have focus.");

        slot0.remove();
        input1.remove();
      }

      function testTabbingThroughScrollableShadowDOM() {
        opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus.");

        var host0 = document.createElement("div");
        host0.setAttribute("style", "height: 50px; overflow: auto;");
        host0.onfocus = focusLogger;
        document.body.appendChild(host0);

        var sr0 = host0.attachShadow({mode: "open"});
        sr0.innerHTML = `
          <style>
            div,slot {
              height: 30px;
              display: block;
              overflow: auto;
            }
            input {
              display: block;
            }
          </style>
        `;

        var input00 = document.createElement("input");
        input00.setAttribute("style", "background-color: red;");
        input00.onfocus = focusLogger;
        sr0.appendChild(input00);

        var container01 = document.createElement("div");
        container01.onfocus = focusLogger;
        sr0.appendChild(container01);

        var input010 = document.createElement("input");
        input010.onfocus = focusLogger;
        container01.appendChild(input010);

        var input011 = document.createElement("input");
        input011.onfocus = focusLogger;
        container01.appendChild(input011);

        var slot02 = document.createElement("slot");
        slot02.onfocus = focusLogger;
        sr0.appendChild(slot02);

        var input020 = document.createElement("input");
        input020.setAttribute("style", "display: block;");
        input020.onfocus = focusLogger;
        host0.appendChild(input020);

        var input021 = document.createElement("input");
        input021.setAttribute("style", "display: block;");
        input021.onfocus = focusLogger;
        host0.appendChild(input021);

        var input1 = document.createElement("input");
        input1.onfocus = focusLogger;
        document.body.appendChild(input1);

        document.body.offsetLeft;

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, host0, "Should have focused shadow host element. (1)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input00, "Should have focused input element in shadow dom. (2)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, container01, "Should have focused scrollable element in shadow dom. (3)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input010, "Should have focused input element in shadow dom. (4)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input011, "Should have focused input element in shadow dom. (5)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, slot02, "Should have focused slot element in shadow dom. (6)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input020, "Should have focused input element in slot. (7)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input021, "Should have focused input element in slot. (8)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, input1, "Should have focused input element in light dom. (9)");

        // Backwards
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input021, "Should have focused input element in slot. (10)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input020, "Should have focused input element in slot. (11)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, slot02, "Should have focused slot element in shadow dom. (12)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input011, "Should have focused input element in shadow dom. (13)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input010, "Should have focused input element in shadow dom. (14)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, container01, "Should have focused scrollable element in shadow dom. (15)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, input00, "Should have focused input element in shadow dom. (16)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        // focus is already on host
        opener.is(sr0.activeElement, null,
                  "Focus should have left input element in shadow DOM. (7)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(document.activeElement, document.body.firstChild,
                  "body's first child should have focus.");

        host0.remove();
        input1.remove();
      }

      // Bug 1604140
      function testTabbingThroughScrollableShadowHost() {
        opener.is(document.activeElement, document.body.firstChild,
                  "body's first child should have focus.");

        let aboveFirstHost = document.createElement("div");
        aboveFirstHost.tabIndex = 0;
        aboveFirstHost.onfocus = focusLogger;
        document.body.appendChild(aboveFirstHost);

        let firstHost = document.createElement("div");
        firstHost.style = "overflow: scroll";
        document.body.appendChild(firstHost);

        let firstShadow = firstHost.attachShadow({mode: "open"});
        let divInFirstShadow = document.createElement("div");
        divInFirstShadow.tabIndex = 0;
        divInFirstShadow.onfocus = focusLogger;
        firstShadow.appendChild(divInFirstShadow);

        let aboveSecondHost = document.createElement("div");
        aboveSecondHost.tabIndex = 0;
        aboveSecondHost.onfocus = focusLogger;
        document.body.appendChild(aboveSecondHost);

        let secondHost = document.createElement("div");
        secondHost.style = "overflow: scroll";
        secondHost.tabIndex = 0;
        secondHost.onfocus = focusLogger;
        document.body.appendChild(secondHost);

        let secondShadow = secondHost.attachShadow({mode: "open"});
        let divInSecondShadow = document.createElement("div");
        divInSecondShadow.tabIndex = 0;
        divInSecondShadow.onfocus = focusLogger;
        secondShadow.appendChild(divInSecondShadow);

        let belowSecondHost = document.createElement("div");
        belowSecondHost.tabIndex = 0;
        belowSecondHost.onfocus = focusLogger;
        document.body.appendChild(belowSecondHost);

        document.body.offsetLeft;

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, aboveFirstHost, "Should have focused div above first host element. (1)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, divInFirstShadow, "Should have focused div in first shadow dom. (2)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, aboveSecondHost, "Should have focused div above second host element. (3)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, secondHost, "Should have focused second host element. (4)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, divInSecondShadow, "Should have focused div in second shadow dom. (5)");

        synthesizeKey("KEY_Tab");
        opener.is(lastFocusTarget, belowSecondHost, "Should have focused div below second host. (6)");

        // Backwards
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, divInSecondShadow, "Should have focused div in second shadow dom. (7)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        // focus is already on second host, so lastFocusTarget won't get updated.
        opener.is(document.activeElement, secondHost, "Should have focused second host element. (8)");
        opener.is(secondShadow.activeElement, null, "Focus should have left div in second shadow dom. (8)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, aboveSecondHost, "Should have focused div above second host element. (9)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, divInFirstShadow, "Should have focused div in first shadow dom. (10)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(lastFocusTarget, aboveFirstHost, "Should have focused div above first host element. (11)");

        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(document.activeElement, document.body.firstChild,
                  "body's first child should have focus.");

        aboveFirstHost.remove();
        firstHost.remove();
        aboveSecondHost.remove();
        secondHost.remove();
        belowSecondHost.remove();
      }

      function testDeeplyNestedShadowTree() {
        opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus.");
        var host1 = document.createElement("test-node");
        var lastHost = host1;
        for (var i = 0; i < 20; ++i) {
          lastHost.appendChild(document.createElement("test-node"));
          lastHost = lastHost.firstChild;
        }

        var input = document.createElement("input");
        document.body.appendChild(host1);
        document.body.appendChild(input);
        document.body.offsetLeft;

        // Test shadow tree which doesn't have anything tab-focusable.
        host1.shadowRoot.querySelector("div").focus();
        synthesizeKey("KEY_Tab");
        is(document.activeElement, input, "Should have focused input element.");
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(document.activeElement, document.body.firstChild, "body's first child should have focus.");

        // Same test but with focusable elements in the tree...
        var input2 = document.createElement("input");
        var host2 = host1.firstChild;
        var host3 = host2.firstChild;
        host2.insertBefore(input2, host3);
        var input3 = document.createElement("input");
        lastHost.appendChild(input3);
        document.body.offsetLeft;
        host3.shadowRoot.querySelector("div").focus();
        synthesizeKey("KEY_Tab");
        is(document.activeElement, input3, "Should have focused input3 element.");

        // ...and backwards
        host3.shadowRoot.querySelector("div").focus();
        synthesizeKey("KEY_Tab", {shiftKey: true});
        is(document.activeElement, input2, "Should have focused input2 element.");

        // Remove elements added to body element.
        host1.remove();
        input.remove();

        // Tests expect body.firstChild to have focus.
        document.body.firstChild.focus();
      }

      // Bug 1558393
      function testBackwardsTabbingWithSlotsWithoutFocusableContent() {
        let first = document.createElement("div");
        first.tabIndex = 0;
        let host = document.createElement("div");
        host.tabIndex = 0;
        let second = document.createElement("div");
        second.tabIndex = 0;
        host.appendChild(document.createTextNode("foo"));
        host.attachShadow({ mode: "open" }).innerHTML = `<slot></slot>`;

        document.body.appendChild(first);
        document.body.appendChild(host);
        document.body.appendChild(second);
        document.body.offsetLeft;

        first.focus();
        opener.is(document.activeElement, first, "First light div should have focus");
        synthesizeKey("KEY_Tab");
        opener.is(document.activeElement, host, "Host should be focused");
        synthesizeKey("KEY_Tab");
        opener.is(document.activeElement, second, "Second light div should be focused");

        // Now backwards
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(document.activeElement, host, "Focus should return to host");
        synthesizeKey("KEY_Tab", {shiftKey: true});
        opener.is(document.activeElement, first, "Focus should return to first light div");

        second.remove();
        host.remove();
        first.remove();
      }

      function runTest() {

        testTabbingThroughShadowDOMWithTabIndexes();
        testTabbingThroughSimpleShadowDOM();
        testTabbingThroughNestedShadowDOM();
        testTabbingThroughDisplayContentsHost();
        testTabbingThroughLightDOMShadowDOMLightDOM();
        testFocusableHost();
        testShiftTabbingThroughFocusableHost();
        testTabbingThroughNestedSlot();
        testTabbingThroughSlotInLightDOM();
        testTabbingThroughFocusableSlotInLightDOM();
        testTabbingThroughScrollableShadowDOM();
        testTabbingThroughScrollableShadowHost();
        testDeeplyNestedShadowTree();
        testBackwardsTabbingWithSlotsWithoutFocusableContent();

        opener.didRunTests();
        window.close();
      }

      function init() {
        SimpleTest.waitForFocus(runTest);
      }
    </script>
    <style>
    </style>
    <template id="template">
      <div style="overflow: hidden">
        <p tabindex="0" id="p1">component</p>
        <p tabindex="0" id="p2">/component</p>
      </div>
    </template>
  </head>
  <body onload="init()">
  </body>
</html>

Messung V0.5

¤ Dauer der Verarbeitung: 0.11 Sekunden ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.