mozilla-central/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-closedby-corner-cases.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!doctype html>
<meta charset="utf-8">
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="../../popovers/resources/popover-utils.js"></script>
<button id="outside">Outside</button>
<dialog id="dialog" closedby="any"></dialog>
<script>
const dialog = document.getElementById('dialog');
async function openDialog(openMethod) {
dialog.close();
if (!dialog.open) {
assert_false(dialog.matches(':open'),'Should be closed to start');
switch (openMethod) {
case 'modeless' :
dialog.show();
break;
case 'modal' :
dialog.showModal();
break;
case 'open' :
dialog.open = true;
break;
default:
assert_unreached('Invalid open method');
}
}
await waitForRender();
assert_true(dialog.open,'Should be open now');
assert_true(dialog.matches(':open'),'Should be open now (pseudo)');
}
const changeMethods = [
{
description: 'focusin removes and reinserts',
setup: (openMethod,signal) => {
document.body.addEventListener('focusin',(e) => {
if (!dialog.contains(e.target)) {
const position = dialog.nextElementSibling;
dialog.remove();
document.body.insertBefore(dialog,position);
}
}, {signal});
}
},
{
description: 'focusin closes dialog',
setup: (openMethod,signal) => {
document.body.addEventListener('focusin',(e) => {
if (!dialog.contains(e.target)) {
dialog.close();
}
}, {signal});
}
},
{
description: 'focusin calls showModal',
setup: (openMethod,signal) => {
document.body.addEventListener('focusin',(e) => {
if (!dialog.contains(e.target)) {
try {
dialog.showModal();
} catch {}
}
}, {signal});
// Since the closing steps will trigger another call to showModal
// in this case, before we're done with closing, we should expect
// that the ESC/light dismiss still results in a showing modal, if it
// was originally modal.
return openMethod !== 'modal';
}
},
{
description: 'requestIdleCallback calls showModal',
setup: (openMethod,signal) => {
requestIdleCallback(() => {
try {
dialog.showModal();
} catch {}
});
}
},
{
description: 'beforetoggle closes dialog',
setup: (openMethod,signal) => {
dialog.addEventListener('beforetoggle',() => dialog.close(), {signal});
}
},
{
description: 'beforetoggle calls showModal',
setup: (openMethod,signal) => {
let stackProtector = 0;
dialog.addEventListener('beforetoggle',() => {
if (++stackProtector > 20) {
return;
}
try {
dialog.showModal();
} catch {}
}, {signal});
}
},
];
function runTest(openMethod, changeMethod) {
promise_test(async (t) => {
assert_false(dialog.open,'setup');
assert_false(dialog.matches(':open'));
const controller = new AbortController();
t.add_cleanup(() => {
controller.abort();
dialog.close();
});
const expectResponds = changeMethod.setup(openMethod,controller.signal) ?? true;
// Open the dialog
await openDialog(openMethod);
// Try hitting ESC
const ESC = '\uE00C';
await test_driver.send_keys(document.documentElement,ESC);
await waitForRender();
const respondsToEsc = !dialog.open;
assert_equals(!dialog.matches(':open'),respondsToEsc,':open should match dialog.open');
dialog.close();
// Try clicking outside
await openDialog(openMethod);
await clickOn(outside);
const respondsToLightDismiss = !dialog.open;
assert_equals(!dialog.matches(':open'),respondsToLightDismiss,':open should match dialog.open');
dialog.close();
// See if expectations match
assert_equals(respondsToEsc,expectResponds,`Dialog ${expectResponds ? "should" : "should NOT"} respond to ESC`);
assert_equals(respondsToLightDismiss,expectResponds,`Dialog ${expectResponds ? "should" : "should NOT"} respond to light dismiss`);
}, `${changeMethod.description}, ${openMethod}`);
}
// Run tests
for(openMethod of ['modeless','modal','open']) {
for (const changeMethod of changeMethods) {
runTest(openMethod, changeMethod);
}
}
</script>