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

    var resultMap = [
      ["Down", "f2"],
      ["Down", "f3"],
      ["Down", "f3"],
      ["Down", "f4"],
      ["Down", "f4"],
      ["Down", "f5"],
      ["Down", "f6"],
      ["Down", "f9"],
      ["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>
    <style>
    div.overflow1 {overflow:auto; height:100px; width:200px; border: 1px solid cyan;}
    div.overflow2 {overflow:hidden; height:80px; width:150px; border: 1px solid cyan;}
    div:focus { outline: 2px solid red;}
    </style>
</head>

<body>
<div class="overflow1">
<div><a href="#" id="start"><img src="resources/green.png" width=40px; height=40px;></a></div>
<div><a href="#" id="f2"><img src="resources/green.png" width=50px; height=40px;></a></div>
<div><a href="#" id="f3"><img src="resources/green.png" width=40px; height=40px;></a></div>
<br>
<div><a href="#" id="f4"><img src="resources/green.png" width=50px; height=40px;></a></div>
<div class="overflow2">
<div><a href="#" id="f5"><img src="resources/green.png" width=40px; height=40px;></a></div>
<div><a href="#" id="f6"><img src="resources/green.png" width=50px; height=40px;></a></div>
<br>
<div><a href="#" id="f7"><img src="resources/green.png" width=40px; height=40px;></a></div>
<div><a href="#" id="f8"><img src="resources/green.png" width=50px; height=40px;></a></div>
</div><br>
<div><a href="#" id="f9"><img src="resources/green.png" width=40px; height=40px;></a></div>
</div></div>
<div id="console"></div>
This test is testing that div with overflow:auto would scroll, by div with overflow:hidden would not.
</body>
</html>