Skip to content
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

Jump to bottom

Add attribute reflection behavior for dialog closedBy [2/N] #48989

Merged
merged 1 commit into from
Nov 6, 2024
Merged

Add attribute reflection behavior for dialog closedBy [2/N] #48989

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
26 changes: 21 additions & 5 deletions html/semantics/interactive-elements/the-dialog-element/dialog-closedby.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,14 @@
<dialog closedby="closerequest" data-behavior="closerequest"></dialog>
<dialog closedby="none" data-behavior="none"></dialog>

<dialog closedby data-behavior="closerequest"></dialog>
<dialog closedby="invalid" data-behavior="closerequest"></dialog>
<dialog data-behavior="closerequest"></dialog>

<dialog closedby="AnY" data-behavior="any"></dialog>
<dialog closedby="ClOsErEqUeSt" data-behavior="closerequest"></dialog>
<dialog closedby="NoNe" data-behavior="none"></dialog>

<dialog closedby="invalid" data-behavior="auto"></dialog>
<dialog closedby data-behavior="auto"></dialog>
<dialog data-behavior="auto"></dialog>

<script>
function openDialog(dialog,modal) {
assert_false(dialog.open);
Expand All @@ -41,6 +41,7 @@
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;
Expand All @@ -51,6 +52,8 @@
const respondsToLightDismiss = !dialog.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');
Expand All @@ -64,11 +67,24 @@
assert_false(respondsToEsc,'Dialog should NOT respond to ESC');
assert_false(respondsToLightDismiss,'Dialog should NOT respond to light dismiss');
break;
case 'auto':
if (modal) {
assert_true(respondsToEsc,'Modal dialog in auto state should respond to ESC');
assert_false(respondsToLightDismiss,'Modal dialog in auto state should NOT respond to light dismiss');
expectedReflectionWhileOpen = 'closerequest';
} else {
assert_false(respondsToEsc,'Non-modal dialog in auto state should NOT respond to ESC');
assert_false(respondsToLightDismiss,'Non-modal dialog in auto state should NOT respond to light dismiss');
expectedReflectionWhileOpen = 'none';
}
expectedReflectionWhileClosed = 'none';
break;
default:
assert_notreached('Invalid expectation');
}
// Check reflection
assert_equals(dialog.closedBy,dialog.dataset.behavior,'Reflection should be limited to known values');
assert_equals(closedByReflectionWhileOpen,expectedReflectionWhileOpen,'Reflection should be limited to known values (open)');
assert_equals(dialog.closedBy,expectedReflectionWhileClosed,'Reflection should be limited to known values (closed)');
}, `closedby=${dialog.getAttribute('closedby')}, ${modal ? 'Modal' : 'Non-modal'}`);
}
}
Expand Down
27 changes: 27 additions & 0 deletions html/semantics/interactive-elements/the-dialog-element/non-modal-canceling.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<link rel=author href="mailto:[email protected]">
<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
<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="/close-watcher/resources/helpers.js"></script>

<dialog>Dialog</dialog>

<script>
promise_test(async () => {
const dialog = document.querySelector('dialog');
assert_false(dialog.open);
dialog.show();
assert_true(dialog.open);
await sendEscKey();
assert_true(dialog.open,'Escape does not close a non-modal dialog');
dialog.close();
dialog.showModal();
assert_true(dialog.open);
await sendEscKey();
assert_false(dialog.open,'Escape does close a modal dialog');
},'Non-modal dialogs should not be cancelable via ESC');
</script>