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

Remove :closed pseudo-class #49576

Merged
merged 1 commit into from
Dec 6, 2024
Merged

Remove :closed pseudo-class #49576

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
1 change: 0 additions & 1 deletion css/css-shadow-parts/pseudo-classes-after-part.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
test_valid_selector("::part(mypart):any-link");
test_valid_selector("::part(mypart):autofill");
test_valid_selector("::part(mypart):checked");
test_valid_selector("::part(mypart):closed");
test_valid_selector("::part(mypart):default");
test_valid_selector("::part(mypart):defined");
test_valid_selector("::part(mypart):dir(ltr)");
Expand Down
20 changes: 3 additions & 17 deletions css/selectors/open-closed-pseudo.html → css/selectors/open-pseudo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,53 +17,39 @@
<script>
test(() => {
const dialog = document.querySelector('dialog');
assert_true(dialog.matches(':closed'),
':closed should match when the dialog is closed.');
assert_false(dialog.matches(':open'),
':open should not match when the dialog is closed.');

dialog.show();
assert_false(dialog.matches(':closed'),
':closed should not match after dialog.open().');
assert_true(dialog.matches(':open'),
':open should match after dialog.open().');

dialog.close();
dialog.showModal();
assert_false(dialog.matches(':closed'),
':closed should not match after dialog.showModal().');
assert_true(dialog.matches(':open'),
':open should match after dialog.showModal().');

dialog.close();
}, 'The dialog element should support :open and :closed.');
}, 'The dialog element should support :open.');

test(() => {
const details = document.querySelector('details');
assert_true(details.matches(':closed'),
':closed should match when the details is closed.');
assert_false(details.matches(':open'),
':open should not match when the details is closed.');

details.open = true;
assert_false(details.matches(':closed'),
':closed should not match when the details is open.');
assert_true(details.matches(':open'),
':open should match when the details is open.');
}, 'The details element should support :open and :closed.');
}, 'The details element should support :open.');

promise_test(async () => {
const select = document.querySelector('select');
assert_true(select.matches(':closed'),
':closed should match when the select is closed.');
assert_false(select.matches(':open'),
':open should not match when the select is closed.');

await test_driver.click(select);
await new Promise(requestAnimationFrame);
assert_false(select.matches(':closed'),
':closed should not match when the select is open.');
assert_true(select.matches(':open'),
':open should match when the select is open.');
}, 'The select element should support :open and :closed.');
}, 'The select element should support :open.');
</script>
8 changes: 4 additions & 4 deletions ...emantics/forms/the-select-element/select-pseudo-light-dismiss-invalidation.tentative.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
select {
background-color: rgb(0, 0, 255);
}
select:closed {
select:not(:open) {
background-color: rgb(0, 255, 0);
}
select:open {
Expand All @@ -29,22 +29,22 @@
<script>
promise_test(async () => {
assert_equals(getComputedStyle(select).backgroundColor, 'rgb(0, 255, 0)',
'The select should match :closed at the start of the test.');
'The select should match :not(:open) at the start of the test.');

await test_driver.click(select);
assert_equals(getComputedStyle(select).backgroundColor, 'rgb(255, 0, 0)',
'The select should match :open when opened.');

await test_driver.click(opttwo);
assert_equals(getComputedStyle(select).backgroundColor, 'rgb(0, 255, 0)',
'The select should match :closed after clicking an option.');
'The select should match :not(:open) after clicking an option.');

await test_driver.click(select);
assert_equals(getComputedStyle(select).backgroundColor, 'rgb(255, 0, 0)',
'The select should match :open when reopened.');

await test_driver.click(button);
assert_equals(getComputedStyle(select).backgroundColor, 'rgb(0, 255, 0)',
'The select should match :closed after light dismiss.');
'The select should match :not(:open) after light dismiss.');
}, 'select should not match :open when light dismissed.');
</script>