1 files changed, 36 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-overlay.html b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-overlay.html
new file mode 100644
index 0000000000..9cd2426b8c
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/interactive-elements/the-dialog-element/dialog-overlay.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<title>dialog: overlay</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<link rel="help" href="https://drafts.csswg.org/css-position-4/#overlay">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<dialog id="dialog"></dialog>
+<script>
+  const dialog = document.getElementById("dialog");
+
+  test(() => {
+    assert_equals(getComputedStyle(dialog).overlay, "none",
+                  "Computed overlay");
+    assert_equals(getComputedStyle(dialog, "::backdrop").overlay, "none",
+                  "Computed overlay for ::backdrop");
+  }, "dialog computed overlay initially 'none'");
+
+  test(() => {
+    dialog.showModal();
+
+    assert_equals(getComputedStyle(dialog).overlay, "auto",
+                  "Computed overlay on open dialog");
+    // ::backdrop pseudo element is always rendered in the top layer when its
+    // originating element is. It does not get its overlay property changed,
+    // though.
+    assert_equals(getComputedStyle(dialog, "::backdrop").overlay, "none",
+                  "Computed overlay for ::backdrop");
+
+    dialog.close();
+
+    assert_equals(getComputedStyle(dialog).overlay, "none",
+                  "Computed overlay on closed dialog");
+    assert_equals(getComputedStyle(dialog, "::backdrop").overlay, "none",
+                  "Computed overlay for ::backdrop");
+  }, "Opening and closing a modal dialog changes computed overlay to 'auto' and back to 'none'");
+</script>