<html>
  <!--
    This test ensures the correctness of the "Fully aligned" precedence
    logic implemented by Spatial Navigation algorithm in an vertical direction:
    targets whose middle falls between the top and bottom of the current focused
    element are preferably to move focus to, even if it is not the shortest distance.

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

    * Navigation steps:
    1) Loads this page, focus goes to "start" automatically.
    2) Focus moves preferably to elements right up or above the
       current focused element, even when there are some other closer
       but not vertically aligned elements in the same direction.
  -->
  <head>
    <script src="../../resources/js-test-pre.js"></script>
    <script src="resources/spatial-navigation-utils.js"></script>
    <script type="application/javascript">

    var resultMap = [
      ["Down", "4"],
      ["Down", "6"],
      ["Down", "8"],
      ["Down", "end"],
      ["Up", "7"],
      ["Up", "2"],
      ["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="../resources/js-test-post.js"></script>
  </head>
  <body id="some-content" xmlns="http://www.w3.org/1999/xhtml">
    <div style="margin-left: 40px; text-align: left;">
      <div style="margin-left: 40px;">
        <a id="start" href="a">test<br></a>
      </div>
      <a id="2" href="a">test</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a id="3" href="a">test</a><br>
      <div style="margin-left: 40px;">
        <a id="4" href="a">test<br></a>
      </div>
      <div style="margin-left: 80px;">
        <a id="5" href="a">test<br></a>
      </div>
      <div style="margin-left: 40px;">
        <a id="6" href="a">test<br></a>
      </div>
      <a id="7" href="a">test<br></a>
      <br><br><br><br>
      <div style="margin-left: 40px;">
        <a id="8" href="a">test<br></a>
      </div>
      <a id="end" href="a">test<br></a>
    </div>
    <div id="console"></div>
  </body>
</html>