src/third_party/WebKit/LayoutTests/fast/spatial-navigation/snav-overlapping-elements.html

   1 <!DOCTYPE html>
   2 <head>
   3 <script src="../../resources/js-test.js"></script>
   4 <script src="resources/spatial-navigation-utils.js"></script>
   5 </head>
   6 <style>
   7 body a {
   8     position: absolute;
   9     height: 100px;
  10     width: 100px;
  11     border: 1px solid black;
  12 }
  13 #e1 {
  14     left: 10px;
  15     top: 10px;
  16 }
  17 #e2 {
  18     left: 20px;
  19     top: 75px;
  20 }
  21 #e3 {
  22     left: 10px;
  23     top: 150px;
  24 }
  25 #e4 {
  26     left: 10px;
  27     top: 300px;
  28 }
  29 #e5 {
  30     left: 75px;
  31     top: 300px;
  32 }
  33 #e6 {
  34     left: 150px;
  35     top: 300px;
  36 }
  37 </style>
  38 <body id="some-content" onload="runTest()">
  39 <p id="description"></p>
  40 <div id="elements">
  41 <!-- Vertical: -->
  42 <a id="e1" href="#e1">Element 1</a>
  43 <a id="e2" href="#e2">Element 2</a>
  44 <a id="e3" href="#e3">Element 3</a>
  45 <!-- Horizontal: -->
  46 <a id="e4" href="#e1">Element 4</a>
  47 <a id="e5" href="#e2">Element 5</a>
  48 <a id="e6" href="#e3">Element 6</a>
  49 </div>
  50 <div id="console"></div>
  51 <script type="application/javascript">
  52 description('This test ensures that Spatial Navigation works with overlapping elements');
  53
  54 jsTestIsAsync = true;
  55
  56 var resultMap = [
  57     // Vertical:
  58     ["Down", "e2"],
  59     ["Down", "e3"],
  60     ["Up", "e2"],
  61     ["Up", "e1"],
  62     ["Down", "e2"],
  63     ["Down", "e3"],
  64     ["Down", "e4"],
  65     // Horizontal:
  66     ["Right", "e5"],
  67     ["Right", "e6"],
  68     ["Left", "e5"],
  69     ["Left", "e4"],
  70     ["DONE", "DONE"]
  71 ];
  72
  73 if (window.testRunner) {
  74     testRunner.overridePreference("WebKitTabToLinksPreferenceKey", 1);
  75     window.internals.settings.setSpatialNavigationEnabled(true);
  76 }
  77
  78 function runTest()
  79 {
  80     // starting the test itself: get to a known place.
  81     document.getElementById("e1").focus();
  82
  83     initTest(resultMap, finishJSTest);
  84 }
  85 </script>
  86 </body>
  87 </html>