diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-overlay-re-add-during-transition.html b/html/semantics/interactive-elements/the-dialog-element/dialog-overlay-re-add-during-transition.html
new file mode 100644
index 000000000000000..30d104a973a6007
--- /dev/null
+++ b/html/semantics/interactive-elements/the-dialog-element/dialog-overlay-re-add-during-transition.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>dialog: close and re-add modal dialog during overlay transition</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">
+<link rel="match" href="pass-dialog-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<dialog id="dialog1">PASS</dialog>
+<dialog id="dialog2">FAIL</dialog>
+<style>
+  dialog::backdrop { background-color: black; }
+  #dialog1 {
+    transition-property: overlay, display;
+    transition-duration: 100s;
+  }
+</style>
+<script>
+  const dialog1 = document.getElementById("dialog1");
+  const dialog2 = document.getElementById("dialog2");
+
+  dialog1.showModal();
+  dialog2.showModal();
+  dialog1.close();
+  requestAnimationFrame(() =>
+    requestAnimationFrame(() => {
+      // dialog1 no longer "in top layer" even if rendered in top-layer, should
+      // be added as last top layer element.
+      dialog1.showModal();
+      takeScreenshot();
+    })
+  );
+</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-overlay.html b/html/semantics/interactive-elements/the-dialog-element/dialog-overlay.html
new file mode 100644
index 000000000000000..a366f61a355e639
--- /dev/null
+++ b/html/semantics/interactive-elements/the-dialog-element/dialog-overlay.html
@@ -0,0 +1,37 @@
+<!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");
+    // dialog::backdrop {} UA rule always sets overlay to 'auto' even if
+    // ::backdrop pseudo is not generated. ::backdrop is only generated when the
+    // dialog is in the top layer.
+    assert_equals(getComputedStyle(dialog, "::backdrop").overlay, "auto",
+                  "Computed overlay for ::backdrop");
+  }, "dialog computed overlay initially 'none'");
+
+  test(() => {
+    dialog.showModal();
+
+    assert_equals(getComputedStyle(dialog).overlay, "auto",
+                  "Computed overlay on open dialog");
+    assert_equals(getComputedStyle(dialog, "::backdrop").overlay, "auto",
+                  "Computed overlay for ::backdrop");
+
+    dialog.close();
+
+    assert_equals(getComputedStyle(dialog).overlay, "none",
+                  "Computed overlay on closed dialog");
+    // ::backdrop is always overlay:auto. See comment above.
+    assert_equals(getComputedStyle(dialog, "::backdrop").overlay, "auto",
+                  "Computed overlay for ::backdrop");
+  }, "Opening and closing a modal dialog changes computed overlay to 'auto' and back to 'none'");
+</script>
diff --git a/html/semantics/interactive-elements/the-dialog-element/pass-dialog-ref.html b/html/semantics/interactive-elements/the-dialog-element/pass-dialog-ref.html
new file mode 100644
index 000000000000000..6f1a8fde211e874
--- /dev/null
+++ b/html/semantics/interactive-elements/the-dialog-element/pass-dialog-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<title>CSS Test Reference</title>
+<style>
+  dialog::backdrop { background-color: black; }
+</style>
+<dialog id="dialog">PASS</dialog>
+<script>
+  dialog.showModal();
+</script>
diff --git a/html/semantics/popovers/popover-overlay.html b/html/semantics/popovers/popover-overlay.html
new file mode 100644
index 000000000000000..a607844aee4f59e
--- /dev/null
+++ b/html/semantics/popovers/popover-overlay.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<title>popover: overlay</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribute">
+<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 popover id="popover-show-dialog"></dialog>
+<dialog popover id="popover-show-modal-dialog"></dialog>
+<dialog popover id="popover-dialog"></dialog>
+<div popover id="popover-div"></div>
+<script>
+  test(() => {
+    const popover_show_dialog = document.getElementById("popover-show-dialog");
+    assert_equals(getComputedStyle(popover_show_dialog).overlay, "none",
+                  "Computed overlay");
+    popover_show_dialog.show();
+    assert_equals(getComputedStyle(popover_show_dialog).overlay, "none",
+                  "Computed overlay after show()");
+    popover_show_dialog.close();
+  }, "dialog.show() should not put popover dialog in top layer");
+
+  test(() => {
+    const popover_show_modal_dialog = document.getElementById("popover-show-modal-dialog");
+    assert_equals(getComputedStyle(popover_show_modal_dialog).overlay, "none",
+                  "Computed overlay");
+    popover_show_modal_dialog.showModal();
+    assert_equals(getComputedStyle(popover_show_modal_dialog).overlay, "auto",
+                  "Computed overlay after showModal()");
+    popover_show_modal_dialog.close();
+  }, "dialog.showModal() should put popover dialog in top layer");
+
+  test(() => {
+    const popover_dialog = document.getElementById("popover-dialog");
+    assert_equals(getComputedStyle(popover_dialog).overlay, "none",
+                  "Computed overlay");
+    popover_dialog.showPopover();
+    assert_equals(getComputedStyle(popover_dialog).overlay, "auto",
+                  "Computed overlay after showPopover()");
+    popover_dialog.hidePopover();
+  }, "dialog.showPopover() should put popover dialog in top layer");
+
+  test(() => {
+    const popover_div = document.getElementById("popover-div");
+    assert_equals(getComputedStyle(popover_div).overlay, "none",
+                  "Computed overlay");
+    popover_div.showPopover();
+    assert_equals(getComputedStyle(popover_div).overlay, "auto",
+                  "Computed overlay after showPopover()");
+    popover_div.hidePopover();
+  }, "div.showPopover() should put popover div in top layer");
+</script>
