snav-fragmented-link.html | Explore in Territory

<!doctype html>
<p>Here are two links that (due to their parent divs' limited width) split over two lines:</p>

<div style="font: 6px Ahem; line-height: 9px;">
  <a id="start" href="www">Random start link</a>.
  <div style="width: 230px; background: yellow; position: relative; margin-left: 20px;">
    <a id="fragmentedA" href="www">This is a long bla bla bla fragmented link.</a>
    Hey <a id="now_reachableA" href="www">previously</a> <a id="now_reachableB" href="www">unreachable</a>.

    <div style="position: absolute; right: -100px; top: 0px; width: 100px">
      <a id="anotherA" href="www">AnotherA random link</a>
    </div>
    <div style="position: absolute; left: -15px; top: 0px; width: 100px">
      <a id="B" href="www">B</a>
    </div>
  </div>
  <br>
  <div style="width: 230px; background: yellow; position: relative; margin-left: 20px;">
    This is a <a id="short" href="www">short</a> bla bla <a id="fragmentedB" href="www">fragmented liiiiiink.</a>
    Hey now <a id="now_reachableC" href="www">reachable</a>.

    <div style="position: absolute; right: -100px; top: 0px; width: 100px">
      <a id="anotherC" href="www">AnotherC random link</a>
    </div>
    <div style="position: absolute; left: -15px; top: 0px; width: 100px">
      <a id="D" href="www">D</a>
    </div>
  </div>
  <a id="end" href="www">Random end link</a>.
</div>

<p>The yellow background highlights a fragmented link's bounding box</em>.<br>
This bounding box covers another link. Here we test that SpatNav can reach that link.</p>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
  var resultMap = [
    ["Down", "start"],
    ["Down", "fragmentedA"],
    ["Right", "now_reachableA"],  // We searched *inside* #fragmentedA's box.
    ["Right", "now_reachableB"],
    ["Right", "anotherA"],
    ["Down", "anotherC"],         // #anotherA and #anotherC are perfectly aligned.
    ["Up", "anotherA"],
    ["Left", "fragmentedA"],
    ["Right", "now_reachableA"],  // We searched *inside* #fragmentedA's bounding box.
    ["Right", "now_reachableB"],
    ["Left", "now_reachableA"],
    ["Left", "B"],                // We don't go to the enclosing #fragmentedA. If we did, holding
                                  // Left would cause a loop inside #fragmentedA's bounding box.
    ["Right", "fragmentedA"],
    // Down searches *inside* #fragmentedA's box.
    ["Down", "now_reachableB"],   // #now_reachableB is wider than #now_reachableA.
    ["Left", "now_reachableA"],
    ["Right", "now_reachableB"],
    ["Right", "anotherA"],        // We don't go to #fragmentedB because Right from #fragmentedB goes back to #short.
                                  // This avoids an endless loop between #fragmentedB and #short if Right is held.
    ["Down", "anotherC"],
    ["Left", "fragmentedB"],
    ["Right", "now_reachableC"],  // We searched from the last fragment's end.
    ["Down", "end"],              // This avoids an endless loop between #fragmentedB and #short if Down is held.
    ["Up", "fragmentedB"],
    ["Down", "now_reachableC"],   // We searched *inside* #fragmentedB's box.
    ["Right", "anotherC"],
    ["Left", "fragmentedB"],
    ["Left", "short"],            // We searched *inside* #fragmentedB's bounding box, from the first fragment.
    ["Down", "end"]
  ];
  snav.assertFocusMoves(resultMap);
</script>

<p><em>Manual test instruction: Ensure that all links are reachable.</em></p>

<p>Also, when holding one of the four directional keys, ensure that the page is fully
scrolled in that direction. Especially, ensure that focus does not get stuck inside the
fragmented link's bounding box.</p>
chromium/third_party/blink/web_tests/fast/spatial-navigation/snav-fragmented-link.html
