snav-skippable-candidate.html | Explore in Territory

<!doctype html>
<style>
  .cursor {
    cursor: pointer;
  }

  .box {
    display: inline-block;
    position: absolute;
    width: 100px;
  }

  div {
    margin-top: 5px;
    border: 1px solid black;
  }

  div div {
    margin-top: 0;
    width: 100px;
    border: none;
  }

  * {
    background: white;
  }

  .green {
    /* To help debugging, every element in resultMap is green */
    background: lightgreen;
  }

  .gray {
    /* To help debugging, every skippable-element is gray */
    background: lightgray;
  }
</style>
<button class="green" id="start">Start</button>
<div class="cursor gray" id="a">A
  <div>A-child1</div>
  <button class="green" id="a-child2">A-child2</button>
</div>
<div class="clickable gray" id="b">B
  <div>B-child1</div>
  <div class="green" tabindex="0" id="b-child2">B-child2</div>
</div>
<div class="cursor gray" id="c">C
  <input type="text" id="c-child1">
  <div>C-child2</div>
</div>
<div class="clickable gray" id="d">D
  <div class="clickable gray" id="d-child">D-child
    <div class="clickable green" id="d-child-child">D-child-child
    </div>
  </div>
</div>
<div class="clickable gray" id="e">E
  <div>
    <div class="green" tabindex="0" id="e-child-child">E-child-child
    </div>
  </div>
</div>
<div class="cursor gray" id="f" style="position: relative; margin-top: 60px; height: 30px;">F
  <!-- |f-child1| is out side of |f|. -->
  <div class="green" tabindex="0" id="f-child1" style="position: absolute; top: -25px;">F-child1</div>
  <div class="green" tabindex="0" id="f-child2" style="position: absolute; top: 0;">F-child2</div>
</div>
<div class="clickable gray" id="g">G
  <div class="cursor gray">
    <a href="" class="green" id="g-child">G-child
      <div class="clickable gray">
        <div class="cursor gray">
          <a href="" class="green" id="g-child-child">G-child-child</a>
        </div>
      </div>
    </a>
  </div>
</div>

<p>This test ensures that an element that SupportsSpatialNavigationFocus()
  doesn't become a candidate if it has an inner focusable descendant.
</p>

<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
  const noop = () => { };
  const clickableElements = document.getElementsByClassName("clickable");
  for (let elem of clickableElements) {
    elem.addEventListener('click', noop);
  }

  var resultMap = [
    ["Down", "a-child2"],
    ["Down", "b-child2"],
    ["Down", "c-child1"],
    ["Down", "d-child-child"],
    ["Down", "e-child-child"],
    ["Down", "f-child1"],
    ["Down", "f-child2"],
    ["Down", "g-child"],
    ["Down", "g-child-child"]
  ];

  // Start from a known place.
  document.getElementById("start").focus();
  snav.assertFocusMoves(resultMap);
</script>
chromium/third_party/blink/web_tests/fast/spatial-navigation/snav-skippable-candidate.html
