dialog-autofocus.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /html/semantics/interactive-elements/the-dialog-element/dialog-autofocus.html - WPT Dashboard Interop Dashboard

<!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(() => {

        assert_equals(document.activeElement, document.getElementById("outer-button"));

        var dialog = document.getElementById('dialog');

        dialog.showModal();

        autofocusButton = document.getElementById('autofocus-button');

        assert_equals(document.activeElement, autofocusButton);

        anotherButton = document.getElementById('another-button');

        anotherButton.focus();

        assert_equals(document.activeElement, anotherButton);

        // Test that recreating layout does not give focus back to a previously autofocused element.

        autofocusButton.style.display = 'none';

        document.body.offsetHeight;

        autofocusButton.style.display = 'block';

        document.body.offsetHeight;

        assert_equals(document.activeElement, anotherButton);

        // Test that reinserting does not give focus back to a previously autofocused element.

        var parentNode = autofocusButton.parentNode;

        parentNode.removeChild(autofocusButton);

        document.body.offsetHeight;

        parentNode.appendChild(autofocusButton);

        document.body.offsetHeight;

        assert_equals(document.activeElement, anotherButton);

        dialog.close();

        // Test that dialog focusing steps run when a dialog is reopened.

        dialog.showModal();

        assert_equals(document.activeElement, autofocusButton);

        dialog.close();

});

}, "autofocus when a modal dialog is opened");

</script>

</head>

<body>

<button id="outer-button" autofocus></button>

<dialog id="dialog">

    <button></button>

    <!-- Unfocusable elements with [autofocus] should be ignored. -->

    <input autofocus disabled>

    <textarea autofocus hidden></textarea>

    <dialog>

        <button autofocus></button>

    </dialog>

    <div>

        <span>

            <button id="autofocus-button" autofocus></button>

        </span>

    </div>

    <button id="another-button" autofocus></button>

</dialog>

</body>

</html>