1 files changed, 39 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/relayout-before-navigation.html b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/relayout-before-navigation.html
new file mode 100644
index 0000000000..d1fd0ce6eb
--- /dev/null
+++ b/testing/web-platform/tests/html/interaction/focus/focusgroup/tentative/grid-navigation/relayout-before-navigation.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Test: focusgroup - Relayout before navigating in a grid</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>
+<script>
+  function removeMiddleRow() {
+    document.getElementById("middle-row").remove();
+  }
+</script>
+<table focusgroup="grid">
+  <tr>
+    <td id="item1" tabindex="0" onkeydown="removeMiddleRow()">item1</td>
+  </tr>
+  <tr id="middle-row">
+    <td id="item2" tabindex="-1">item2</td>
+  </tr>
+  <tr>
+    <td id="item3" tabindex="-1">item3</td>
+  </tr>
+</table>
+
+<script>
+
+  promise_test(async t => {
+    var item1 = document.getElementById("item1");
+    var item3 = document.getElementById("item3");
+
+    await focusAndKeyPress(item1, kArrowDown);
+    assert_equals(document.activeElement, item3);
+  }, "Since |item1| removes the middle row on key press, the grid focusgroup should check for a relayout before navigating to the next row.");
+
+</script>
+\ No newline at end of file