<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Test: focusgroup - Wraps and goes into inner focusgroup.</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 id=root focusgroup=wrap>
  <div focusgroup=extend>
    <span id=item1 tabindex=-1>item1</span>
    <span id=item2 tabindex=-1>item2</span>
  </div>
  <span id=item3 tabindex=0>item3</span>
</div>

<script>

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

    await focusAndKeyPress(item3, kArrowDown);
    assert_equals(document.activeElement, item1);

    await focusAndKeyPress(item3, kArrowRight);
    assert_equals(document.activeElement, item1);
  }, "When the focus is set on the last item of a focusgroup that supports wrapping in the axis of the arrow key pressed and the first item is in an inner focusgroup that supports it too, the focus moves to that item in the inner focusgroup.");

</script>