<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Test: focusgroup - Focus wraps successfully from the last item inside an extending focusgroup to the first item of the parent 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>
  <span id=item1 tabindex=0>item1</span>
  <div id=item2 tabindex=-1 focusgroup=extend>
    <span id=item3 tabindex=-1>item3</span>
    <span id=item4 tabindex=-1>item4</span>
  </div>
</div>

<script>

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

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

    await focusAndKeyPress(item4, kArrowRight);
    assert_equals(document.activeElement, item1);
  }, "When the focus is set on the last item of an inner focusgroup that supports wrapping while its parent focusgroup also does, the focus should move to the first item of the parent focusgroup.");

</script>