modal-pseudo-class.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/selectors/modal-pseudo-class.html - WPT Dashboard Interop Dashboard

<!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>