<html>
  <!--
    This test ensures the basic table traversal correctness of
    Spatial Navigation (SNav) algorithm: focusable elements in a
    <table> should be accessible.

    * Pre-conditions:
    1) DRT support for SNav enable/disable.

    * Navigation steps:
    1) Loads this page, focus goes to "start" automatically.
    2) Focus moves along the elements in the table, eventually
       going to outer southward and eastward links, but going
       back inside the table later on.
  -->
  <head>
    <script src="../js/resources/js-test-pre.js"></script>
    <script src="resources/spatial-navigation-utils.js"></script>
    <script type="application/javascript">

    var resultMap = [
      ["Down", "1"],
      ["Down", "4"],
      ["Down", "7"],
      ["Down", "end"],
      ["Up", "7"],
      ["Right", "8"],
      ["Right", "9"],
      ["Up", "6"],
      ["Right", "right"],
      ["Left", "6"],
      ["Up", "3"],
      ["Left", "2"],
      ["Left", "1"],
      ["DONE", "DONE"]
    ];

    if (window.testRunner) {
      testRunner.dumpAsText();
      testRunner.setSpatialNavigationEnabled(true);
      testRunner.overridePreference("WebKitTabToLinksPreferenceKey", 1);
      testRunner.waitUntilDone();
    }

    function runTest()
    {
      // starting the test itself: get to a known place.
      document.getElementById("start").focus();

      initTest(resultMap, testCompleted);
    }

    function testCompleted()
    {
      if (window.testRunner)
        testRunner.notifyDone();
    }

    window.onload = runTest;

    </script>
    <script src="js/resources/js-test-post.js"></script>
  </head>
  <body id="some-content" xmlns="http://www.w3.org/1999/xhtml">
    <a id="start" href="a">a</a><br>
    <table>
      <tbody>
        <tr>
          <td style="font-size: small;"><a id="1" href="a">a</a></td>
          <td style="font-size: small;"><a id="2" href="a">a</a></td>
          <td style="font-size: small;"><a id="3" href="a">a</a></td>
        </tr>
        <tr>
          <td style="font-size: small;"><a id="4" href="a">a</a></td>
          <td style="font-size: small;"><a id="5" href="a">a</a></td>
          <td style="font-size: small;"><a id="6" href="a">a</a></td>
        </tr>
        <tr>
          <td style="font-size: small;"><a id="7" href="a">a</a></td>
          <td style="font-size: small;"><a id="8" href="a">a</a></td>
          <td style="font-size: small;"><a id="9" href="a">a</a></td>
        </tr>
      </tbody>
    </table>
    <div style='margin-top:8px'>
      <a id="end" href="a">a<a>
    </div>
    <div style="margin-left: 50px; margin-top:-70px">
      <a id="right" href="http://www.google.com">a</a>
    </div>
    <div style="margin-top:100px" id="console"></div>
  </body>
</html>