Skip to content

Improve testing dialog closedby and requestClose #50808

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chromium-wpt-export-bot merged 1 commit into from
Feb 19, 2025
Merged

Improve testing dialog closedby and requestClose #50808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions html/semantics/interactive-elements/the-dialog-element/dialog-closedby-start-open.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,16 @@
promise_test(async (t) => {
const dialog = document.querySelector('dialog#test1');
assert_true(dialog.open);
assert_true(dialog.matches(':open'));
await new test_driver.send_keys(document.documentElement,ESC);
assert_false(dialog.open);
assert_false(dialog.matches(':open'));
dialog.showModal();
assert_true(dialog.open);
assert_true(dialog.matches(':open'));
await new test_driver.send_keys(document.documentElement,ESC);
assert_false(dialog.open);
assert_false(dialog.matches(':open'));
}, `Dialogs that start open and have closedby should still function`);
</script>

Expand All @@ -48,7 +52,9 @@
});
});
assert_true(dialog.open);
assert_true(dialog.matches(':open'));
await new test_driver.send_keys(document.documentElement,ESC);
assert_false(dialog.open,'ESC should still work');
assert_false(dialog.matches(':open'));
}, `Opening and closing a dialog during the dialog focus fixup should still leave closedby functional`);
</script>
11 changes: 11 additions & 0 deletions html/semantics/interactive-elements/the-dialog-element/dialog-closedby.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,46 +27,57 @@
<script>
function openDialog(dialog,modal) {
assert_false(dialog.open);
assert_false(dialog.matches(':open'));
if (modal) {
dialog.showModal();
} else {
dialog.show();
}
assert_true(dialog.open);
assert_true(dialog.matches(':open'));
assert_equals(dialog.matches(':modal'),modal);
}
function runTest(dialog) {
for(modal of [false,true]) {
promise_test(async (t) => {
assert_false(dialog.open);
assert_false(dialog.matches(':open'));
t.add_cleanup(() => dialog.close());
// Try hitting ESC
openDialog(dialog,modal);
const closedByReflectionWhileOpen = dialog.closedBy;
const ESC = '\uE00C';
await new test_driver.send_keys(document.documentElement,ESC);
const respondsToEsc = !dialog.open;
const respondsToEsc2 = !dialog.matches(':open');
dialog.close();
// Try clicking outside
openDialog(dialog,modal);
await clickOn(outside);
const respondsToLightDismiss = !dialog.open;
const respondsToLightDismiss2 = !dialog.matches(':open');
dialog.close();
// See if expectations match
let expectedReflectionWhileOpen = dialog.dataset.behavior;
let expectedReflectionWhileClosed = dialog.dataset.behavior;
switch (dialog.dataset.behavior) {
case 'any':
assert_true(respondsToEsc,'Dialog should respond to ESC');
assert_true(respondsToEsc2,'Dialog should respond to ESC (:open)');
assert_true(respondsToLightDismiss,'Dialog should respond to light dismiss');
assert_true(respondsToLightDismiss2,'Dialog should respond to light dismiss (:open)');
break;
case 'closerequest':
assert_true(respondsToEsc,'Dialog should respond to ESC');
assert_true(respondsToEsc2,'Dialog should respond to ESC (:open)');
assert_false(respondsToLightDismiss,'Dialog should NOT respond to light dismiss');
assert_false(respondsToLightDismiss2,'Dialog should NOT respond to light dismiss (:open)');
break;
case 'none':
assert_false(respondsToEsc,'Dialog should NOT respond to ESC');
assert_false(respondsToEsc2,'Dialog should NOT respond to ESC (:open)');
assert_false(respondsToLightDismiss,'Dialog should NOT respond to light dismiss');
assert_false(respondsToLightDismiss2,'Dialog should NOT respond to light dismiss (:open)');
break;
case 'auto':
if (modal) {
Expand Down
50 changes: 34 additions & 16 deletions html/semantics/interactive-elements/the-dialog-element/dialog-requestclose.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,25 @@

<script>
const dialog = document.querySelector('dialog');
function openDialog(modal) {
function openDialog(openMethod) {
assert_false(dialog.open);
if (modal) {
dialog.showModal();
} else {
dialog.show();
assert_false(dialog.matches(':open'));
switch (openMethod) {
case 'modeless':
dialog.show();
break;
case 'modal':
dialog.showModal();
break;
case 'open':
dialog.open = true;
break;
default:
assert_unreached('Unknown open method');
}
assert_true(dialog.open);
assert_equals(dialog.matches(':modal'),modal);
assert_true(dialog.matches(':open'));
assert_equals(dialog.matches(':modal'),openMethod === 'modal');
}
function getSignal(t) {
const controller = new AbortController();
Expand All @@ -43,25 +53,27 @@
return getSignal(t);
}

[false,true].forEach(modal => {
['modeless','modal','open'].forEach(openMethod => {
[null,'any','closedrequest','none'].forEach(closedby => {
const testDescription = `for ${modal ? "modal" : "modeless"} dialog with closedby=${closedby}`;
const testDescription = `for ${openMethod} dialog with closedby=${closedby}`;
promise_test(async (t) => {
await setup(t,closedby);
openDialog(modal);
openDialog(openMethod);
dialog.requestClose();
assert_false(dialog.open);
assert_false(dialog.matches(':open'));
},`requestClose basic behavior ${testDescription}`);

promise_test(async (t) => {
const signal = await setup(t,closedby);
let events = [];
dialog.addEventListener('cancel',() => events.push('cancel'),{signal});
dialog.addEventListener('close',() => events.push('close'),{signal});
openDialog(modal);
openDialog(openMethod);
assert_array_equals(events,[]);
dialog.requestClose();
assert_false(dialog.open);
assert_false(dialog.matches(':open'));
assert_array_equals(events,['cancel'],'close is scheduled');
await new Promise(resolve => requestAnimationFrame(resolve));
assert_array_equals(events,['cancel','close']);
Expand All @@ -72,14 +84,15 @@
let events = [];
dialog.addEventListener('cancel',() => events.push('cancel'),{signal});
dialog.addEventListener('close',() => events.push('close'),{signal});
openDialog(modal);
openDialog(openMethod);
dialog.setAttribute('closedby',closedby);
assert_array_equals(events,[]);
dialog.requestClose();
assert_false(dialog.open,'Adding closedby after dialog is open');
assert_false(dialog.matches(':open'));
assert_array_equals(events,['cancel']);
events=[];
openDialog(modal);
openDialog(openMethod);
dialog.removeAttribute('closedby');
assert_array_equals(events,[]);
dialog.requestClose();
Expand All @@ -96,32 +109,36 @@
e.preventDefault();
}
},{signal});
openDialog(modal);
openDialog(openMethod);
dialog.requestClose();
assert_true(dialog.open,'cancel event was cancelled - dialog shouldn\'t close');
assert_true(dialog.matches(':open'));
shouldPreventDefault = false;
dialog.requestClose();
assert_false(dialog.open,'cancel event was not cancelled - dialog should now close');
assert_false(dialog.matches(':open'));
},`requestClose can be cancelled ${testDescription}`);

promise_test(async (t) => {
const signal = await setup(t,closedby);
dialog.addEventListener('cancel',(e) => e.preventDefault(),{signal});
openDialog(modal);
openDialog(openMethod);
// No user activation here.
dialog.requestClose();
dialog.requestClose();
dialog.requestClose();
assert_true(dialog.open,'cancel event was cancelled - dialog shouldn\'t close');
assert_true(dialog.matches(':open'));
},`requestClose avoids abuse prevention logic ${testDescription}`);

promise_test(async (t) => {
await setup(t,closedby);
openDialog(modal);
openDialog(openMethod);
assert_equals(dialog.returnValue,'','Return value starts out empty');
const returnValue = 'The return value';
dialog.requestClose(returnValue);
assert_false(dialog.open);
assert_false(dialog.matches(':open'));
assert_equals(dialog.returnValue,returnValue,'Return value should be set');
dialog.show();
dialog.close();
Expand All @@ -134,11 +151,12 @@
promise_test(async (t) => {
await setup(t,closedby);
dialog.addEventListener('cancel',(e) => e.preventDefault(),{once:true});
openDialog(modal);
openDialog(openMethod);
dialog.returnValue = 'foo';
assert_equals(dialog.returnValue,'foo');
dialog.requestClose('This should not get saved');
assert_true(dialog.open,'cancelled');
assert_true(dialog.matches(':open'));
assert_equals(dialog.returnValue,'foo','Return value should not be changed');
},`requestClose(returnValue) doesn't change returnvalue when cancelled ${testDescription}`);
}
Expand Down