diff --git a/html/semantics/interactive-elements/the-dialog-element/modal-dialog-selection.html b/html/semantics/interactive-elements/the-dialog-element/modal-dialog-selection.html
new file mode 100644
index 00000000000000..ab8dc4fd9842aa
--- /dev/null
+++ b/html/semantics/interactive-elements/the-dialog-element/modal-dialog-selection.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Content selection in modal dialog</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#content-selection">
+<meta name="assert" content="Checks that text can be selected in a modal dialog, except with 'user-select: none'.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+dialog {
+  font: 10px/1 Ahem;
+  text-align: center;
+}
+</style>
+
+<dialog>123456789A</dialog>
+
+<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>
+<script src="/resources/testdriver-actions.js"></script>
+<script>
+const dialog = document.querySelector("dialog");
+dialog.showModal();
+
+function selectSomeText() {
+  // Clear existing selection.
+  getSelection().removeAllRanges();
+
+  // The dialog contains 10 characters. Select the 6 ones at the center.
+  return new test_driver.Actions()
+    .pointerMove(-3e1, 0, {origin: dialog})
+    .pointerDown()
+    .pointerMove(+3e1, 0, {origin: dialog})
+    .pointerUp()
+    .send();
+}
+
+promise_test(async function() {
+  await selectSomeText();
+  assert_equals(getSelection().toString(), "345678");
+}, "By default, text inside a modal dialog can be selected");
+
+promise_test(async function() {
+  dialog.style.userSelect = "none";
+  await selectSomeText();
+  assert_equals(getSelection().toString(), "");
+}, "'user-select: none' prevents text from being selected");
+</script>
