Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 27 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/interactive-elements/the-dialog-element/dialog-closedby.html - WPT Dashboard Interop Dashboard
<!doctype html>
<meta charset="utf-8">
<meta name="timeout" content="long">
<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#dialog-light-dismiss">
<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>
<!-- test cases: -->
<!-- normal cases: -->
<dialog closedby="any" data-behavior="any"></dialog>
<dialog closedby="closerequest" data-behavior="closerequest"></dialog>
<dialog closedby="none" data-behavior="none"></dialog>
<!-- case sensitivity: -->
<dialog closedby="AnY" data-behavior="any"></dialog>
<dialog closedby="ClOsErEqUeSt" data-behavior="closerequest"></dialog>
<dialog closedby="NoNe" data-behavior="none"></dialog>
<!-- invalid value, no value, missing attribute: -->
<dialog closedby="invalid" data-behavior="auto"></dialog>
<dialog closedby data-behavior="auto"></dialog>
<dialog data-behavior="auto"></dialog>
<script>
async function openDialog(dialog,openMethod) {
assert_false(dialog.open,'Should be closed to start');
assert_equals(dialog.matches(':open'),dialog.open,':open should match .open');
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_equals(dialog.matches(':open'),dialog.open,':open should match .open');
}
function getDefaultExpectations(behavior, openMethod) {
switch (behavior) {
case 'any':
return {
respondsToEsc: true,
respondsToLightDismiss: true,
expectedReflectionWhileOpen: behavior,
expectedReflectionWhileClosed: behavior,
};
case 'closerequest':
return {
respondsToEsc: true,
respondsToLightDismiss: false,
expectedReflectionWhileOpen: behavior,
expectedReflectionWhileClosed: behavior,
};
case 'none':
return {
respondsToEsc: false,
respondsToLightDismiss: false,
expectedReflectionWhileOpen: behavior,
expectedReflectionWhileClosed: behavior,
};
case 'auto':
if (openMethod === 'modal') {
return {
respondsToEsc: true,
respondsToLightDismiss: false,
expectedReflectionWhileOpen: 'closerequest',
expectedReflectionWhileClosed: 'none',
};
} else {
return {
respondsToEsc: false,
respondsToLightDismiss: false,
expectedReflectionWhileOpen: 'none',
expectedReflectionWhileClosed: 'none',
};
}
default:
assert_unreached('Invalid expectation');
}
}
function runTest(dialog, openMethod) {
promise_test(async (t) => {
assert_false(dialog.open,'setup');
assert_false(dialog.matches(':open'));
t.add_cleanup(() => dialog.close());
// Open the dialog
await openDialog(dialog,openMethod);
assert_equals(dialog.matches(':modal'),openMethod === 'modal',':modal incorrect');
const closedByReflectionWhileOpen = dialog.closedBy;
// 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(dialog,openMethod);
assert_equals(dialog.matches(':modal'),openMethod === 'modal',':modal incorrect');
await clickOn(outside);
const respondsToLightDismiss = !dialog.open;
assert_equals(!dialog.matches(':open'),respondsToLightDismiss,':open should match dialog.open');
dialog.close();
// See if expectations match
let expectations = getDefaultExpectations(dialog.dataset.behavior, openMethod);
assert_equals(respondsToEsc,expectations.respondsToEsc,`Dialog ${expectations.respondsToEsc ? "should" : "should NOT"} respond to ESC`);
assert_equals(respondsToLightDismiss,expectations.respondsToLightDismiss,`Dialog ${expectations.respondsToLightDismiss ? "should" : "should NOT"} respond to light dismiss`);
assert_equals(closedByReflectionWhileOpen,expectations.expectedReflectionWhileOpen,'Reflection should be limited to known values (open)');
assert_equals(dialog.closedBy,expectations.expectedReflectionWhileClosed,'Reflection should be limited to known values (closed)');
}, `closedby=${dialog.getAttribute('closedby')}, ${openMethod}`);
}
// Run tests
document.querySelectorAll('dialog').forEach((dialog) => {
for(openMethod of ['modeless','modal','open']) {
runTest(dialog, openMethod);
}
});
</script>