<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Test: focusgroup - Focus moves to previous item, skipping the focusgroup that extends in the orthogonal axis.</title>
<link rel="author" title="Microsoft" href="http://www.microsoft.com/">
<link rel="help" href="https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="../../resources/focusgroup-utils.js"></script>

<div focusgroup=wrap>
  <span id=item1 tabindex=0>item1</span>
  <div>
    <div focusgroup="extending vertical">
      <span id=item2 tabindex=-1>item2</span>
      <span id=item3 tabindex=-1>item3</span>
    </div>
  </div>
  <span id=item4 tabindex=-1>item4</span>
</div>

<script>

  promise_test(async t => {
    var item1 = document.getElementById("item1");
    var item4 = document.getElementById("item4");

    await focusAndKeyPress(item4, kArrowLeft);
    assert_equals(document.activeElement, item1);
  }, "When the focus is set on the last item of a focusgroup and the previous item is a descendant of a subtree, a backward arrow key press should move the focus to that previous item within the subtree. However, if that subtree is an extending focusgroup that supports only the orthogonal axis, it should be skipped.");

</script>