<!DOCTYPE html><!-- webkit-test-runner [ TabsToLinks=true SpatialNavigationEnabled=true ] -->
<html>
  <!--
    This test ensures the correctness of a basic aspect of spatial navigation traversal
    routines: focusable elements in scrollable containers (e.g. <div>) should be
    accessible, including offscreen content.

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

    * Navigation steps:
    1) Loads this page, focus goes to "start" automatically.
    2) Move focus down to the visible focusable element in
       scrollable div.
    3) Traverse the page through other focusable elements down the page.
       and then back up.

    * Expected results: All focusable element in scrollable content, including
    offscreen ones, should be accessible via spatial navigation. -->
  <head>
    <style type="text/css">
      div.scroll {
        height: 200px;
        width: 300px;
        overflow: auto;
        border: 1px solid #666;
        background-color: #ccc;
        padding: 8px;
      }
    </style>

    <script src="../../resources/js-test-pre.js"></script>
    <script src="resources/spatial-navigation-utils.js"></script>
    <script type="application/javascript">

    var resultMap = [
      ["Down", "1"],
      ["Down", "1"],
      ["Down", "2"],
      ["Down", "2"],
      ["Down", "3"],
      ["Up", "2"],
      ["Up", "2"],
      ["Up", "1"],
      ["Up", "1"],
      ["Up", "start"],
      ["DONE", "DONE"]
    ];

    if (window.testRunner) {
      testRunner.dumpAsText();
      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">
    <a id="start" href="a"><img src="resources/green.png" width=30px height=30px></a>
    <div class="scroll">
      <a id="1" href="a"><img src="resources/green.png" width=30px height=30px></a>
      <div></div>
      <img src="resources/green.png" width=200px height=200px>
      <div></div>
      <a id="2" href="a"><img src="resources/green.png" width=30px height=30px></a>.
    </div>
    <a id="3" href="a"><img src="resources/green.png" width=30px height=30px></a>
    <div id="console"></div>
    <div>This test tests that a div with css overflow:auto will scroll to reveal its focusable elements</div>
  </body>
</html>