test_tabindex.html

Enable keyboard shortcuts

<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 src="/tests/SimpleTest/SimpleTest.js"></script>

  <script 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");

  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");

    is(document.activeElement.tabIndex, 4, "The active element tabindex is 4");

    synthesizeKey("KEY_Tab");

    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>