snav-aligned-insiders.html | Explore in Territory

<!doctype html>
<style>
  div {height: 30px;}
  div.green {background: green}
  div.red {background: red}
  *:focus {outline: blue solid 2px;}
</style>
<div id="container" href="www" style="top: 10px; left: 40px; width: 300px; height: 300px; background: yellow; position: relative; margin: 60px" tabindex="0">
  <div class="red" id="redA" style="position: absolute; top: 10px; left: 240px; width: 40px;" tabindex="0"></div>
  <div class="red" id="redB" style="position: absolute; top: 50px; left: 10px; width: 40px;" tabindex="0"></div>
  <div class="red" id="redC" style="position: absolute; top: 50px; left: 240px; width: 40px;" tabindex="0"></div>
  <div class="red" id="redD" style="position: absolute; top: 260px; left: 240px; width: 40px;" tabindex="0"></div>

  <div class="green" id="greenC" style="position: absolute; top: 85px; left: 240px; width: 40px; height: 160px" tabindex="0"></div>
  <div class="green" id="greenB" style="position: absolute; top: 260px; left: 10px; width: 220px;" tabindex="0"></div>
  <div class="green" id="greenD" style="position: absolute; top: 85px; left: 10px; width: 40px; height: 160px" tabindex="0"></div>
  <div class="green" id="greenA" style="position: absolute; top: 10px; left: 10px; width: 220px;" tabindex="0"></div>

  <a id="linkA" href="www" style="position: absolute; top: 160px; left: 320px;">linkA</a>
  <a id="linkB" href="www" style="position: absolute; top: 160px; left: -40px;">linkB</a>
  <a id="linkC" href="www" style="position: absolute; top: -40px; left: 125px;">linkC</a>
  <a id="linkD" href="www" style="position: absolute; top: 330px; left: 125px;">linkD</a>
</div>

<p><em>Manual test instruction: When moving into the yellow div, ensure
that SpatNav picks "more aligned" candidates first.</em></p>

<p>Note: In DOM order, the green candidates are <em>after</em> the red candidates.
Here SpatNav must ignore DOM order because the green candidates have bigger
projection surface.</p>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
  container.focus();
  var resultMap = [
    ["Down", "greenA"],
    ["Down", "redB"],
    ["Down", "greenD"],
    ["Left", "linkB"],
    ["Right", "container"],
    ["Right", "greenD"],
    ["Right", "greenC"],
    ["Down", "redD"],
    ["Down", "linkD"],
  ];
  snav.assertFocusMoves(resultMap);
</script>
chromium/third_party/blink/web_tests/fast/spatial-navigation/snav-aligned-insiders.html
