snav-multiple-select.html | Explore in Territory

<!DOCTYPE html>
<table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="1">
  <tbody>
    <tr>
      <td style="vertical-align: top; text-align: center;"></td>
      <td style="vertical-align: top; text-align: center;"><a id="2" href="a">2</a></td>
      <td style="vertical-align: top; text-align: center;"></td>
    </tr>
    <tr>
      <td style="vertical-align: top; text-align: center;"><a id="4" href="a">4</a></td>
      <td style="vertical-align: top; text-align: center;"><select id="start" multiple><option>1</option><option>2</option><option disabled>3</option><option>4</option></select></td>
      <td style="vertical-align: top; text-align: center;"><a id="6" href="a">6</a></td>
    </tr>
    <tr>
      <td style="vertical-align: top; text-align: center;"></td>
      <td style="vertical-align: top; text-align: center;"><a id="8" href="a">8</a></td>
      <td style="vertical-align: top; text-align: center;"></td>
    </tr>
  </tbody>
</table>
<p>
  This test ensures the correctness of Spatial Navigation (SNav) algorithm over multiple select element.<br>
  * Navigation steps:<br>
  1) Loads this page, focus goes to "start" automatically.<br>
  2) Focus moves away from select in 4 different directions to neighbor nodes and back.<br>
</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", "start"],
    ["Down", "start"],
    ["Down", "8"],
    ["Up", "start"],
    ["Up", "start"],
    ["Up", "start"],
    ["Up", "2"],
    ["Down", "start"],
    ["Right", "6"],
    ["Left", "start"],
    ["Left", "4"],
    ["Right", "start"]
  ];

  // Start at a known place.
  document.getElementById("start").focus();
  snav.assertFocusMoves(resultMap, true, postFocusMoveCheck);

  function postFocusMoveCheck() {
    const start = document.getElementById("start");
    const options = start.options;

    start.focus();                                    //move to 1st item
    assert_equals(options[0].selected, false);
    assert_equals(options[1].selected, false);
    assert_equals(options[2].selected, false);
    assert_equals(options[3].selected, false);
    eventSender.keyDown("ArrowDown");                 //move to 2nd item
    assert_equals(options[0].selected, false);
    assert_equals(options[1].selected, false);
    assert_equals(options[2].selected, false);
    assert_equals(options[3].selected, false);
    eventSender.keyDown(" ");                         //select 2nd item
    assert_equals(options[0].selected, false);
    assert_equals(options[1].selected, true);
    assert_equals(options[2].selected, false);
    assert_equals(options[3].selected, false);
    eventSender.keyDown("ArrowDown");                 //move to 4th item (3rd item is disabled)
    assert_equals(options[0].selected, false);
    assert_equals(options[1].selected, true);
    assert_equals(options[2].selected, false);
    assert_equals(options[3].selected, false);
    eventSender.keyDown(" ");                         //select 4th item
    assert_equals(options[0].selected, false);
    assert_equals(options[1].selected, true);
    assert_equals(options[2].selected, false);
    assert_equals(options[3].selected, true);
    eventSender.keyDown("ArrowUp");                   //move back to 2nd item
    assert_equals(options[0].selected, false);
    assert_equals(options[1].selected, true);
    assert_equals(options[2].selected, false);
    assert_equals(options[3].selected, true);
    eventSender.keyDown(" ");                         //deselect 2nd item
    assert_equals(options[0].selected, false);
    assert_equals(options[1].selected, false);
    assert_equals(options[2].selected, false);
    assert_equals(options[3].selected, true);
    eventSender.keyDown("ArrowUp");                   //move back to 1st item
    assert_equals(options[0].selected, false);
    assert_equals(options[1].selected, false);
    assert_equals(options[2].selected, false);
    assert_equals(options[3].selected, true);
    eventSender.keyDown("ArrowDown", ["shiftKey"]);   //shift-down to 2nd item
    assert_equals(options[0].selected, false);
    assert_equals(options[1].selected, true);
    assert_equals(options[2].selected, false);
    assert_equals(options[3].selected, true);
  }
</script>
chromium/third_party/blink/web_tests/fast/spatial-navigation/snav-multiple-select.html
