Move overlay tests for dialog/popover into wpt
Also add a test for re-adding dialog elements to the top layer during an
overlay transition.
https://github.com/whatwg/html/pull/9093
Bug: 1411264
Change-Id: Ic9dcd45cd2224995c1f64a7ae5caa01e788d17ee
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4431857
Auto-Submit: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Mason Freed <masonf@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1131588}
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 0000000..30d104a
--- /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 0000000..a366f61
--- /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 0000000..6f1a8fd
--- /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 0000000..a607844
--- /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>
