diff --git a/css/selectors/modal-pseudo-class.html b/css/selectors/modal-pseudo-class.html
new file mode 100644
index 000000000000000..a5b198157692952
--- /dev/null
+++ b/css/selectors/modal-pseudo-class.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>:modal pseudo-class</title>
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+<link rel="help" href="https://drafts.csswg.org/selectors/#modal-state">
+
+<dialog id="dialog">Just another dialog.</dialog>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+  setup({ single_test: true });
+  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();
+</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-show-modal.html b/html/semantics/interactive-elements/the-dialog-element/dialog-show-modal.html
deleted file mode 100644
index 610e66d20112fd2..000000000000000
--- a/html/semantics/interactive-elements/the-dialog-element/dialog-show-modal.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<link rel=author href="mailto:jarhar@chromium.org">
-<link rel=author href="mailto:falken@chromium.org">
-<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
-<link rel=help href="https://bugs.webkit.org/show_bug.cgi?id=97425">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
-
-<dialog id="mydialog">It's my dialog.</dialog>
-
-<script>
-test(() => {
-  const dialog = document.getElementById("mydialog");
-  const computedStyle = window.getComputedStyle(dialog, null);
-  assert_equals(computedStyle.display, "none");
-  assert_false(dialog.matches(":modal"));
-
-  dialog.showModal();
-  assert_equals(computedStyle.display, "block");
-  assert_true(dialog.matches(":modal"));
-
-  // The quoted texts output below are from <http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#dom-dialog-showmodal>.
-  assert_throws_dom("InvalidStateError", () => dialog.showModal());
-
-  dialog.close();
-  assert_equals(computedStyle.display, "none");
-  assert_false(dialog.matches(":modal"));
-
-  dialog.parentNode.removeChild(dialog);
-  assert_throws_dom("InvalidStateError", () => dialog.showModal());
-
-  const doc = document.implementation.createHTMLDocument();
-  doc.body.appendChild(dialog);
-  assert_false(dialog.open);
-  dialog.showModal();
-  assert_true(dialog.open, "Although the document is not attached to any pages, showModal() should execute as normal.");
-}, "Tests that showModal() performs the steps specified in the HTML spec.");
-</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-show-modal-inert-crash.html b/html/semantics/interactive-elements/the-dialog-element/dialog-showModal-inert-crash.html
similarity index 100%
rename from html/semantics/interactive-elements/the-dialog-element/dialog-show-modal-inert-crash.html
rename to html/semantics/interactive-elements/the-dialog-element/dialog-showModal-inert-crash.html
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html b/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html
index 32f308235eb973f..4bd51a508984707 100644
--- a/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html
+++ b/html/semantics/interactive-elements/the-dialog-element/dialog-showModal.html
@@ -62,10 +62,12 @@
   test(function(){
     assert_false(d1.open);
     assert_false(d1.hasAttribute("open"));
+    assert_equals(getComputedStyle(d1).display, "none");
     d1.showModal();
     this.add_cleanup(function() { d1.close(); });
     assert_true(d1.open);
     assert_equals(d1.getAttribute("open"), "");
+    assert_equals(getComputedStyle(d1).display, "block");
     assert_equals(document.activeElement, b1);
   });
 
@@ -169,4 +171,18 @@
     d11.close();
     assert_equals(topElement(), d10);
   }, "when opening multiple dialogs, the most recently opened is rendered on top");
+
+  test(() => {
+    assert_false(d11.open);
+    d11.parentNode.removeChild(d11);
+    assert_throws_dom("INVALID_STATE_ERR", () => d11.showModal());
+
+    const doc = document.implementation.createHTMLDocument();
+    doc.body.appendChild(d11);
+    this.add_cleanup(() => document.body.append(d11));
+    assert_false(d11.open);
+    d11.showModal();
+    assert_true(d11.open);
+    this.add_cleanup(() => d11.close());
+  }, "Although the document is not attached to any pages, showModal() should execute as normal.");
 </script>
