open-pseudo.html (3336B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://drafts.csswg.org/selectors-4/#open-state"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <style> 9 10 dialog:open + #afterdialog, 11 details:open + #afterdetails, 12 select:open + #afterselect { 13 will-change: text-decoration; 14 } 15 16 </style> 17 18 <dialog>dialog</dialog> 19 <p id="afterdialog"></p> 20 21 <details>details</details> 22 <p id="afterdetails"></p> 23 24 <select> 25 <option>one</option> 26 </select> 27 <p id="afterselect"></p> 28 29 <script> 30 test(() => { 31 const dialog = document.querySelector('dialog'); 32 const after = document.getElementById("afterdialog"); 33 assert_false(dialog.matches(':open'), 34 ':open should not match when the dialog is closed.'); 35 assert_equals(getComputedStyle(after).willChange, "auto", 36 ":open style should not be applied when the dialog is closed"); 37 38 dialog.show(); 39 assert_true(dialog.matches(':open'), 40 ':open should match after dialog.show().'); 41 assert_equals(getComputedStyle(after).willChange, "text-decoration", 42 ":open style should be applied after dialog.show()"); 43 44 dialog.close(); 45 assert_equals(getComputedStyle(after).willChange, "auto", 46 ":open style should not be applied when the dialog is closed (2)"); 47 48 dialog.showModal(); 49 assert_true(dialog.matches(':open'), 50 ':open should match after dialog.showModal().'); 51 assert_equals(getComputedStyle(after).willChange, "text-decoration", 52 ":open style should be applied after dialog.showModal()"); 53 54 dialog.close(); 55 assert_equals(getComputedStyle(after).willChange, "auto", 56 ":open style should not be applied when the dialog is closed (3)"); 57 }, 'The dialog element should support :open.'); 58 59 test(() => { 60 const details = document.querySelector('details'); 61 const after = document.getElementById("afterdetails"); 62 assert_false(details.matches(':open'), 63 ':open should not match when the details is closed.'); 64 assert_equals(getComputedStyle(after).willChange, "auto", 65 ":open style should not be applied when the details is closed"); 66 67 details.open = true; 68 assert_true(details.matches(':open'), 69 ':open should match when the details is open.'); 70 assert_equals(getComputedStyle(after).willChange, "text-decoration", 71 ":open style should be applied when the details is open"); 72 }, 'The details element should support :open.'); 73 74 promise_test(async () => { 75 const select = document.querySelector('select'); 76 const after = document.getElementById("afterselect"); 77 assert_false(select.matches(':open'), 78 ':open should not match when the select is closed.'); 79 assert_equals(getComputedStyle(after).willChange, "auto", 80 ":open style should not be applied when the select is closed"); 81 82 await test_driver.click(select); 83 await new Promise(requestAnimationFrame); 84 assert_true(select.matches(':open'), 85 ':open should match when the select is open.'); 86 assert_equals(getComputedStyle(after).willChange, "text-decoration", 87 ":open style should be applied when the select is open"); 88 }, 'The select element should support :open.'); 89 </script>