<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Test: focusgroup - Focus does not wrap in wrapping extending focusgroup that doesn't have focusgroup items.</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>
  <span id=item1 tabindex=0>item1</span>
  <div focusgroup="extend wrap">
    <span id=item2>item2</span> <!--NOT FOCUSABLE-->
    <span id=item3>item3</span> <!--NOT FOCUSABLE-->
  </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(item1, kArrowDown);
    assert_equals(document.activeElement, item4);

    await focusAndKeyPress(item1, kArrowRight);
    assert_equals(document.activeElement, item4);
  }, "This test validates that we don't get stuck in an infinite loop searching for a focusable element in the extending focusgroup that wraps that doesn't contain one. Wrapping should only be allowed in the focusgroup that contains the focusable element we started on or in one of its ancestors.");

</script>