blob: 6608d2aee35f59ba90c7f26ee5bfb3a5b0465251 [file] [log] [blame]
<!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>