<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/js-test-pre.js"></script>
<script src="../resources/accessibility-helper.js"></script>
</head>

<body id="body">

<div id="background">
    <p id="backgroundContent">Other page content with <a href="#">a dummy focusable element</a></p>
    <p><a onclick="document.getElementById('dialog').showModal(); return false;" href="#" role="button" id="displayButton">Display a dialog</a></p>
</div>

<div id="dialogParent" role="group">
    <dialog id="dialog">
        <h3>Just an example.</h3>
        <button id="ok" onclick="document.getElementById('dialog').close();" class="close-button">OK</button>
        <button onclick="document.getElementById('dialog').close();" class="close-button">Cancel</button>
    </dialog>
</div>

<script>
    description("This tests that dialog.showModal() makes other elements inert.");

    if (window.accessibilityController) {
        window.jsTestIsAsync = true;
        
        debug("Dialog is hidden");
        shouldBeTrue("backgroundAccessible()");
        document.getElementById("dialog").showModal();

        // Background should be unaccessible after loading, since the
        // dialog is displayed
        debug("Dialog is displaying");
        shouldBeFalse("backgroundAccessible()");

        // Close the dialog, background should be accessible.
        document.getElementById("ok").click();
        setTimeout(async function() {
            await waitFor(() => backgroundAccessible());
            debug("Dialog is not displaying");
            shouldBeTrue("backgroundAccessible()");

            // Non modal <dialog> should allow interactions with background.
            document.getElementById("dialog").show();
            shouldBeTrue("backgroundAccessible()");
            window.okButton = accessibilityController.accessibleElementById("ok");
            shouldBeFalse("okButton.isIgnored");
            document.getElementById("dialog").close();

            // Click the display button, dialog shows and background becomes unaccessible.
            document.getElementById("displayButton").click();
            await waitFor(() => !backgroundAccessible());
            debug("Dialog is displaying");
            shouldBeFalse("backgroundAccessible()");
            window.okButton = accessibilityController.accessibleElementById("ok");
            shouldBeFalse("okButton.isIgnored");

            // With the dialog displaying, test that aria-hidden and the opacity don't affect whether the background is accessible or not.
            // Dialog is aria hidden
            document.getElementById("dialog").setAttribute("aria-hidden", "true");
            debug("Dialog is displaying and aria-hidden=true")
            shouldBeFalse("backgroundAccessible()");

            // Set aria-hidden=false.
            document.getElementById("dialog").setAttribute("aria-hidden", "false");
            debug("Dialog is displaying and aria-hidden=false");
            shouldBeFalse("backgroundAccessible()");

            // Set aria-modal=false.
            document.getElementById("dialog").setAttribute("aria-modal", "false");
            debug("Dialog is displaying and aria-modal=false");
            shouldBeFalse("backgroundAccessible()");
            document.getElementById("dialog").removeAttribute("aria-modal");

            // Set opacity to 0 which should make the dialog invisible.
            document.getElementById("dialog").style.opacity = 0;
            debug("Dialog is not displaying with opacity 0");
            shouldBeFalse("backgroundAccessible()");

            // Set opacity to 1 which should make the dialog visible again.
            document.getElementById("dialog").style.opacity = 1;
            debug("Dialog is displaying with opacity 1");
            shouldBeFalse("backgroundAccessible()");

            // Test modal dialog is removed from DOM tree.
            document.getElementById("dialog").remove();
            await waitFor(() => backgroundAccessible());
            debug("Dialog is removed from DOM");
            shouldBeTrue("backgroundAccessible()");

            finishJSTest();
        }, 0);
    }

    function backgroundAccessible() {
        var displayButton = accessibilityController.accessibleElementById("displayButton");
        var backgroundContent = accessibilityController.accessibleElementById("backgroundContent");

        if (!displayButton || !backgroundContent)
            return false;

        return !displayButton.isIgnored && !backgroundContent.isIgnored;
    }
</script>
<script src="../resources/js-test-post.js"></script>
</body>
</html>