css/selectors/modal-pseudo-class.html

<!DOCTYPE html>
<meta charset="utf-8"/>
<title>:modal pseudo-class</title>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="author" title="Jihwan Marc Kim" href="mailto:bluewhale.marc@gmail.com" />
<link rel="help" href="https://drafts.csswg.org/selectors/#modal-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>

<dialog id="dialog">Just another dialog.</dialog>
<div id="container">
  <button id="btn"></button>
</div>

<script>
  test(() => {
    const dialog = document.getElementById("dialog");
    assert_false(dialog.matches(":modal"), "dialog is initially closed (does not match :modal)");

    dialog.showModal();
    assert_true(dialog.matches(":modal"), "dialog should match :modal after showModal() call");

    dialog.close();
    assert_false(dialog.matches(":modal"), "dialog should no longer match :modal after close() call");

    dialog.show();
    assert_false(dialog.matches(":modal"), "dialog shouldn't match :modal after show() call");

    dialog.close();
    dialog.showModal();
    assert_true(dialog.matches(":modal"), "dialog should match :modal after showModal() call");

    dialog.remove();
    assert_false(dialog.matches(":modal"), "dialog shouldn't match :modal after being removed from document");
    document.body.append(dialog);
    assert_false(dialog.matches(":modal"), "dialog shouldn't match :modal after being re-appended to document");

    dialog.close();
  }, "Test that :modal matches modal <dialog>");

  promise_test(async () => {
    const container = document.getElementById("container");
    const btn = document.getElementById("btn");

    assert_false(container.matches(":modal"), "before requestFullscreen (does not match :modal)");

    await test_driver.click(btn);

    await container.requestFullscreen();

    assert_true(container.matches(":modal"), ":fullscreen should match :modal");

    await document.exitFullscreen();

    assert_false(container.matches(":modal"), "after exitFullscreen (does not match :modal)");
  }, "Test that :modal matches the fullscreen element");
</script>