dom/svg/test/test_tabindex.html
author David Walsh <dwalsh@mozilla.com>
Tue, 23 Oct 2018 13:06:03 -0500
changeset 442769 b48368889eb5756251512ac0595078d49983be42
parent 404362 50d6fe2d0bca50837dd34eb4a79957885c55bffc
child 466515 69b00bf72f9e848f4da07120f391c5cf147ea5a5
permissions -rw-r--r--
Bug 1501379 - Update debugger frontend v95. r=jdescottes

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test for SVG tabIndex - Bug 778654</title>
  <link rel="stylesheet" type="text/css"
        href="chrome://mochikit/content/tests/SimpleTest/test.css" />

  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" overflow="visible">
  <foreignObject id="f" x="0" y="0" width="200" height="60" tabindex="0">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <p>Here is a paragraph that requires word wrap</p>
    </body>
  </foreignObject>
  <rect id="r" x="0" y="70" width="100" height="100" fill="yellow" tabindex="1"/>
  <text id="t" x="0" y="200" tabindex="2">
    This is SVG text
  </text>
  <a xlink:href="#" id="l1" tabindex="3">
    <circle cx="10" cy="230" r="10"/>
  </a>
  <a id="l2" tabindex="4">
    <circle cx="10" cy="260" r="10"/>
  </a>
  <rect id="r6" x="0" y="70" width="100" height="100" fill="yellow" tabindex="6"/>
  <rect id="r7" x="0" y="70" width="100" height="100" fill="yellow" tabindex="7"/>
</svg>
<pre id="test">
<script class="testbody" type="text/javascript">
SimpleTest.waitForExplicitFinish();

function main()
{
  var f = document.getElementById('f');
  var r = document.getElementById('r');
  var t = document.getElementById('t');
  var l1 = document.getElementById('l1');
  var l2 = document.getElementById('l2');
  const isMac = ("nsILocalFileMac" in SpecialPowers.Ci);

  try {
    // Step 1: Checking by assigning tabIndex
    is(f.tabIndex, 0, "foreignObject initial tabIndex");
    f.tabIndex = 1;
    is(f.tabIndex, 1, "foreignObject tabIndex is set to 1");

    is(r.tabIndex, 1, "rect initial tabIndex");
    r.tabIndex = 2;
    is(r.tabIndex, 2, "rect tabIndex is set to 2");

    is(t.tabIndex, 2, "text initial tabIndex");
    t.tabIndex = 3;
    is(t.tabIndex, 3, "text is set to 3");

    is(l1.tabIndex, 3, "link initial tabIndex");
    l1.tabIndex = 4;
    is(l1.tabIndex, 4, "link is set to 4");

    is(l2.tabIndex, 4, "non-link initial tabIndex");
    l2.tabIndex = 5;
    is(l2.tabIndex, 5, "non-link is set to 4");

    // Step 2: Checking by triggering TAB event
    is(document.activeElement.tabIndex, -1, "In the beginning, the active element tabindex is -1");

    synthesizeKey("KEY_Tab");
    is(document.activeElement.tabIndex, 1, "The active element tabindex is 1");

    synthesizeKey("KEY_Tab");
    is(document.activeElement.tabIndex, 2, "The active element tabindex is 2");

    synthesizeKey("KEY_Tab");
    is(document.activeElement.tabIndex, 3, "The active element tabindex is 3");

    synthesizeKey("KEY_Tab");
    // On Mac, SVG link elements should not be focused.
    if (isMac) {
      is(document.activeElement.tabIndex, 6, "The active element tabindex is 6");
    } else {
      is(document.activeElement.tabIndex, 4, "The active element tabindex is 4");
    }

    synthesizeKey("KEY_Tab");
    // On Mac, SVG link elements should not be focused.
    if (isMac) {
      is(document.activeElement.tabIndex, 7, "The active element tabindex is 7");
    } else {
      is(document.activeElement.tabIndex, 5, "The active element tabindex is 5");
    }
  } catch(e) {
    ok(false, "Got unexpected exception" + e);
  }

  SimpleTest.finish();
}

SimpleTest.waitForFocus(main);

</script>
</pre>
</body>
</html>