1 files changed, 63 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html
new file mode 100644
index 0000000000..6a2ad8c4a0
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="./resources/common.js"></script>
+<script>
+promise_test(() => {
+  return waitUntilLoadedAndAutofocused().then(() => {
+        outerButton = document.getElementById('outer-button');
+        assert_equals(document.activeElement, outerButton);
+
+        // Test that focus goes to the dialog if the dialog has no focusable elements
+        var outerDialog = document.getElementById('outer-dialog');
+        outerDialog.showModal();
+        assert_equals(document.activeElement, outerDialog);
+
+        // Test that an autofocus element in the dialog gets focus.
+        var dialog = document.getElementById('dialog');
+        dialog.showModal();
+        autofocusButton = document.getElementById('autofocus-button');
+        assert_equals(document.activeElement, autofocusButton);
+        dialog.close();
+
+        // ... or else first focusable element in the dialog gets focus.
+        autofocusButton.parentNode.removeChild(autofocusButton);
+        dialog.showModal();
+        firstButton = document.getElementById('first-button');
+        assert_equals(document.activeElement, firstButton);
+        dialog.close();
+
+        // ... or else the dialog itself gets focus.;
+        var buttons = dialog.querySelectorAll('button');
+        for (var i = 0; i < buttons.length; ++i)
+            buttons[i].hidden = true;
+        dialog.showModal();
+        assert_equals(document.activeElement, dialog);
+        dialog.close();
+
+        document.getElementById('outer-dialog').close();
+  });
+}, "focus when a modal dialog is opened");
+</script>
+</head>
+<body>
+<button id="outer-button" autofocus></button>
+<dialog id="outer-dialog">
+    <dialog id="dialog" tabindex=0>
+        <button disabled></button>
+        <dialog>
+            <button autofocus></button>
+        </dialog>
+        <button id="first-button"></button>
+        <div>
+            <span>
+                <button id="autofocus-button" autofocus></button>
+            </span>
+        </div>
+        <button id="final-button"></button>
+    </dialog>
+</dialog>
+</body>
+</html>