modal-pseudo-class.html (2248B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"/> 3 <title>:modal pseudo-class</title> 4 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 5 <link rel="author" title="Jihwan Marc Kim" href="mailto:bluewhale.marc@gmail.com" /> 6 <link rel="help" href="https://drafts.csswg.org/selectors/#modal-state"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="/resources/testdriver.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 12 <dialog id="dialog">Just another dialog.</dialog> 13 <div id="container"> 14 <button id="btn"></button> 15 </div> 16 17 <script> 18 test(() => { 19 const dialog = document.getElementById("dialog"); 20 assert_false(dialog.matches(":modal"), "dialog is initially closed (does not match :modal)"); 21 22 dialog.showModal(); 23 assert_true(dialog.matches(":modal"), "dialog should match :modal after showModal() call"); 24 25 dialog.close(); 26 assert_false(dialog.matches(":modal"), "dialog should no longer match :modal after close() call"); 27 28 dialog.show(); 29 assert_false(dialog.matches(":modal"), "dialog shouldn't match :modal after show() call"); 30 31 dialog.close(); 32 dialog.showModal(); 33 assert_true(dialog.matches(":modal"), "dialog should match :modal after showModal() call"); 34 35 dialog.remove(); 36 assert_false(dialog.matches(":modal"), "dialog shouldn't match :modal after being removed from document"); 37 document.body.append(dialog); 38 assert_false(dialog.matches(":modal"), "dialog shouldn't match :modal after being re-appended to document"); 39 40 dialog.close(); 41 }, "Test that :modal matches modal <dialog>"); 42 43 promise_test(async () => { 44 const container = document.getElementById("container"); 45 const btn = document.getElementById("btn"); 46 47 assert_false(container.matches(":modal"), "before requestFullscreen (does not match :modal)"); 48 49 await test_driver.click(btn); 50 51 await container.requestFullscreen(); 52 53 assert_true(container.matches(":modal"), ":fullscreen should match :modal"); 54 55 await document.exitFullscreen(); 56 57 assert_false(container.matches(":modal"), "after exitFullscreen (does not match :modal)"); 58 }, "Test that :modal matches the fullscreen element"); 59 </script>