David Baron
caf725a2cd
Automatic update from web-platform-tests Fix dynamic change handling for :open on <details>. This adds a missing PseudoStateChanged call so that dynamic changes of the CSS :open pseudo-class on the HTML <details> element work correctly. Without this change, the added test fails with: [FAIL] The details element should support :open. assert_equals: :open style should be applied when the details is open expected "text-decoration" but got "auto" Fixed: 412841627 Change-Id: I4375c8310cedf3027ceb44d7834fd7bcfa5b188f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6489087 Commit-Queue: David Baron <dbaron@chromium.org> Reviewed-by: Joey Arhar <jarhar@chromium.org> Cr-Commit-Position: refs/heads/main@{#1451295} -- wpt-commits: dc75bdb6e7b0bd24a3d461d2ec0545e2f3d27c1c wpt-pr: 52158
90 lines
3.3 KiB
HTML
90 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<link rel=author href="mailto:jarhar@chromium.org">
|
|
<link rel=help href="https://drafts.csswg.org/selectors-4/#open-state">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/resources/testdriver.js"></script>
|
|
<script src="/resources/testdriver-vendor.js"></script>
|
|
<style>
|
|
|
|
dialog:open + #afterdialog,
|
|
details:open + #afterdetails,
|
|
select:open + #afterselect {
|
|
will-change: text-decoration;
|
|
}
|
|
|
|
</style>
|
|
|
|
<dialog>dialog</dialog>
|
|
<p id="afterdialog"></p>
|
|
|
|
<details>details</details>
|
|
<p id="afterdetails"></p>
|
|
|
|
<select>
|
|
<option>one</option>
|
|
</select>
|
|
<p id="afterselect"></p>
|
|
|
|
<script>
|
|
test(() => {
|
|
const dialog = document.querySelector('dialog');
|
|
const after = document.getElementById("afterdialog");
|
|
assert_false(dialog.matches(':open'),
|
|
':open should not match when the dialog is closed.');
|
|
assert_equals(getComputedStyle(after).willChange, "auto",
|
|
":open style should not be applied when the dialog is closed");
|
|
|
|
dialog.show();
|
|
assert_true(dialog.matches(':open'),
|
|
':open should match after dialog.show().');
|
|
assert_equals(getComputedStyle(after).willChange, "text-decoration",
|
|
":open style should be applied after dialog.show()");
|
|
|
|
dialog.close();
|
|
assert_equals(getComputedStyle(after).willChange, "auto",
|
|
":open style should not be applied when the dialog is closed (2)");
|
|
|
|
dialog.showModal();
|
|
assert_true(dialog.matches(':open'),
|
|
':open should match after dialog.showModal().');
|
|
assert_equals(getComputedStyle(after).willChange, "text-decoration",
|
|
":open style should be applied after dialog.showModal()");
|
|
|
|
dialog.close();
|
|
assert_equals(getComputedStyle(after).willChange, "auto",
|
|
":open style should not be applied when the dialog is closed (3)");
|
|
}, 'The dialog element should support :open.');
|
|
|
|
test(() => {
|
|
const details = document.querySelector('details');
|
|
const after = document.getElementById("afterdetails");
|
|
assert_false(details.matches(':open'),
|
|
':open should not match when the details is closed.');
|
|
assert_equals(getComputedStyle(after).willChange, "auto",
|
|
":open style should not be applied when the details is closed");
|
|
|
|
details.open = true;
|
|
assert_true(details.matches(':open'),
|
|
':open should match when the details is open.');
|
|
assert_equals(getComputedStyle(after).willChange, "text-decoration",
|
|
":open style should be applied when the details is open");
|
|
}, 'The details element should support :open.');
|
|
|
|
promise_test(async () => {
|
|
const select = document.querySelector('select');
|
|
const after = document.getElementById("afterselect");
|
|
assert_false(select.matches(':open'),
|
|
':open should not match when the select is closed.');
|
|
assert_equals(getComputedStyle(after).willChange, "auto",
|
|
":open style should not be applied when the select is closed");
|
|
|
|
await test_driver.click(select);
|
|
await new Promise(requestAnimationFrame);
|
|
assert_true(select.matches(':open'),
|
|
':open should match when the select is open.');
|
|
assert_equals(getComputedStyle(after).willChange, "text-decoration",
|
|
":open style should be applied when the select is open");
|
|
}, 'The select element should support :open.');
|
|
</script>
|