snav-skippable-candidate-unskippable.html

<!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="clickable green" id="a">A
  <div>A-child1</div>
  <div>A-child2</div>
</div>
<div class="cursor green" id="b">B
  <div>B-child1</div>
  <div>B-child2</div>
</div>
<div class="cursor green" id="c" style="height: 20px; margin-bottom: 40px;">C
  <!-- |c-child| is out side of |c|. -->
  <div class="green" tabindex="0" id="c-child" style="margin-top: 20px;">C-child</div>
</div>
<div class="cursor green" id="d" style="height: 20px; margin-bottom: 20px;">D
  <!-- |d-child| extends outside of the ancestor of |d|. -->
  <div class="green" tabindex="0" id="d-child">D-child</div>
</div>
<div id="e" style="position: relative; height: 50px">E
  <div class="clickable box" id="e-child1" style="left: 110px; top: 30px;">E-child1</div>
  <div class="clickable box gray" id="e-child2" style="left: 0; top: 15px;">E-child2
    <div class="clickable green" id="e-child2-child">E-child2-child</div>
  </div>
</div>
<button class="green" style="margin-left: 90px;" id="button">Button</button>
<div id="f" style=" position: relative; height: 50px">F
  <div class="clickable box green" id="f-child1" style="left: 110px; top: 30px;">F-child1</div>
  <div class="clickable box gray" id="f-child2" style="left: 0; top: 15px;">F-child2
    <div class="clickable" id="f-child2-child">F-child2-child</div>
  </div>
</div>
<div class="cursor green" tabindex="0" id="g">G
  <div class="green" tabindex="0" id="g-child">G-child</div>
</div>
<div class="editable green" id="h">H
  <div class="clickable green uneditable" id="h-child">H-child</div>
</div>
<div class="green" id="i" tabindex="0" style="height: 50px; overflow-y: scroll;">I
  <div class="clickable green" id="i-child" style="margin: 20px;">I-child</div>
</div>

<p>This test ensures that an element that SupportsSpatialNavigationFocus()
  becomes a candidate in some cases, even though 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);
  }

  document.getElementsByClassName("editable")[0].contentEditable = true;
  document.getElementsByClassName("uneditable")[0].contentEditable = false;

  var resultMap = [
    ["Down", "a"],
    ["Down", "b"],
    ["Down", "c"],
    ["Down", "c-child"],
    ["Down", "d"],
    ["Down", "d-child"],
    ["Down", "e-child2-child"],
    ["Down", "button"],
    ["Down", "f-child1"],
    ["Down", "g"],
    ["Down", "g-child"],
    ["Down", "h"],
    ["Down", "h-child"],
    ["Down", "i"],
    ["Down", "i-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-unskippable.html
