LayoutTests/fast/spatial-navigation/snav-only-clipped-overflow-content.html

   1 <html>
   2   <!--
   3     This test ensures the content overflow traversal correctness of spatial navigation:
   4     if an element if clipped overflow in a scrollable container (e.g. <div>),
   5     scroll-in-direction should happen in the container box, not on the outer view.
   6
   7     * Pre-conditions:
   8     1) DRT support for spatial navigation enable/disable.
   9
  10     * Navigation steps:
  11     1) Loads this page, focus goes to "start" automatically.
  12     2) Try to move focus down to the visible focusable element in
  13        scrollable div.
  14
  15     * Expected results: There should have to a scroll action in the container
  16     (div) as an attempt to make the clipped overflow node visible and accessible
  17     via spatial navigation. -->
  18   <head>
  19     <style type="text/css">
  20       div.scroll {
  21         height: 200px;
  22         width: 300px;
  23         overflow: auto;
  24         border: 1px solid #666;
  25         background-color: #ccc;
  26         padding: 8px;
  27       }
  28     </style>
  29
  30     <script src="../js/resources/js-test-pre.js"></script>
  31     <script src="resources/spatial-navigation-utils.js"></script>
  32     <script type="application/javascript">
  33
  34     var resultMap = [
  35       ["Down", "start"],
  36       ["DONE", "DONE"]
  37     ];
  38
  39     if (window.layoutTestController) {
  40       layoutTestController.dumpAsText();
  41       layoutTestController.setSpatialNavigationEnabled(true);
  42       layoutTestController.overridePreference("WebKitTabToLinksPreferenceKey", 1);
  43       layoutTestController.waitUntilDone();
  44     }
  45
  46     function runTest()
  47     {
  48       // starting the test itself: get to a known place.
  49       document.getElementById("start").focus();
  50
  51       initTest(resultMap, testCompleted);
  52     }
  53
  54     function testCompleted()
  55     {
  56       shouldBeTrue(String(document.getElementById("div").scrollTop != 0));
  57
  58       if (window.layoutTestController)
  59         layoutTestController.notifyDone();
  60     }
  61
  62     window.onload = runTest;
  63
  64     </script>
  65     <script src="js/resources/js-test-post.js"></script>
  66   </head>
  67   <body id="some-content" xmlns="http://www.w3.org/1999/xhtml">
  68     <p>That is is a normal <a id="start" href="a">link</a>.</p>
  69     <div class="scroll" id="div">
  70       <p>This is a scrollable Div created with the CSS property overflow.</p>
  71       <br><br><br><br><br><br><br><br>
  72       <p> ... and here we have a clipped overflow <a id="1" href="a">link</a>.</p>
  73     </div>
  74     <p>And this is another normal <a id="2" href="a">link_2</a>.</p>
  75     <div id="console"></div>
  76   </body>
  77 </html>