commit 25ec4e153be04942b22fdd314f82225dea7b72a1
parent c07053955d9161ca4f7881c830d8d877a0914530
Author: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Thu, 9 Oct 2025 16:28:52 +0000
Bug 1991225 [wpt PR 55116] - Add place-self:dialog tests, and verify that popover uses that., a=testonly
Automatic update from web-platform-tests
Add place-self:dialog tests, and verify that popover uses that. (#55116)
https://github.com/whatwg/html/pull/11656
https://github.com/w3c/csswg-drafts/issues/10258
--
wpt-commits: a8f6dbc90606af3a4d8776690f151c44faa26648
wpt-pr: 55116
Diffstat:
7 files changed, 215 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-anchor-position/align-dialog-001.html b/testing/web-platform/tests/css/css-anchor-position/align-dialog-001.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>Tests the dialog keyword is parsed and computed as specified</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#conditional-centering">
+<link rel="author" href="mailto:tabatkins@google.com">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+
+<div id="container">
+ <div id="target"></div>
+</div>
+
+<script>
+test_valid_value('align-self', 'dialog');
+test_valid_value('align-items', 'dialog');
+test_valid_value('justify-self', 'dialog');
+test_valid_value('justify-items', 'dialog');
+
+test_computed_value('align-self', 'dialog');
+test_computed_value('align-items', 'dialog');
+test_computed_value('justify-self', 'dialog');
+test_computed_value('justify-items', 'dialog');
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/align-dialog-002-ref.html b/testing/web-platform/tests/css/css-anchor-position/align-dialog-002-ref.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<title>Tests the dialog keyword is parsed and computed as specified</title>
+<link rel="author" href="mailto:tabatkins@google.com">
+
+<style>
+.container {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ border: 1px solid;
+ margin: 1em;
+ anchor-scope: all;
+}
+.anchor {
+ border: solid blue 15px;
+ width: 0;
+ margin: 25px;
+ anchor-name: --foo;
+}
+.abspos {
+ position: absolute;
+ position-anchor: --foo;
+ border: solid orange 10px;
+ inset: 0;
+}
+</style>
+
+/* Should be centered, no position-area */
+<div class="container">
+ <div class="anchor"></div>
+ <div class="abspos" style="place-self: center"></div>
+</div>
+
+/* Centered in an offset box */
+<div class="container">
+ <div class="anchor"></div>
+ <div class="abspos" style="place-self: center; left: anchor(left); top: anchor(top)"></div>
+</div>
+
+/* Anchor-centered on the left side. */
+<div class="container">
+ <div class="anchor"></div>
+ <div class="abspos" style="place-self: normal; position-area: left span-all"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-anchor-position/align-dialog-002.html b/testing/web-platform/tests/css/css-anchor-position/align-dialog-002.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>Tests the dialog keyword is parsed and computed as specified</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#conditional-centering">
+<link rel="match" href="align-dialog-002-ref.html">
+<link rel="author" href="mailto:tabatkins@google.com">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+
+<style>
+.container {
+ position: relative;
+ width: 100px;
+ height: 100px;
+ border: 1px solid;
+ margin: 1em;
+ anchor-scope: all;
+}
+.anchor {
+ border: solid blue 15px;
+ width: 0;
+ margin: 25px;
+ anchor-name: --foo;
+}
+.abspos {
+ position: absolute;
+ position-anchor: --foo;
+ border: solid orange 10px;
+ place-self: dialog;
+ inset: 0;
+}
+</style>
+
+/* Should be centered, no position-area */
+<div class="container">
+ <div class="anchor"></div>
+ <div class="abspos"></div>
+</div>
+
+/* Centered in an offset box */
+<div class="container">
+ <div class="anchor"></div>
+ <div class="abspos" style="left: anchor(left); top: anchor(top)"></div>
+</div>
+
+/* Anchor-centered on the left side. */
+<div class="container">
+ <div class="anchor"></div>
+ <div class="abspos" style="position-area: left span-all"></div>
+</div>
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-alignment-001-ref.html b/testing/web-platform/tests/html/semantics/popovers/popover-alignment-001-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>Tests that popover alignment responds to anchor positioning</title>
+<link rel="author" href="mailto:tabatkins@google.com">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+
+<style>
+button {
+ border: solid blue 15px;
+ margin: 25px;
+}
+div {
+ position: absolute;
+ border: solid orange 10px;
+ inset: 0;
+ margin: 0;
+ place-self: center;
+ padding: .25em;
+}
+</style>
+
+Orange box should be centered on the screen.
+<button></button>
+<div id="p1"></div>
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-alignment-001.html b/testing/web-platform/tests/html/semantics/popovers/popover-alignment-001.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>Tests that popover alignment responds to anchor positioning</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#conditional-centering">
+<link rel="match" href="popover-alignment-001-ref.html">
+<link rel="author" href="mailto:tabatkins@google.com">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+
+<style>
+button {
+ border: solid blue 15px;
+ margin: 25px;
+}
+[popover] {
+ border: solid orange 10px;
+}
+</style>
+
+Orange box should be centered on the screen.
+<button popovertarget=p1></button>
+<div id="p1" popover></div>
+
+<script>
+document.querySelector("[popover]").showPopover();
+document.documentElement.removeAttribute("class");
+</script>
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-alignment-002-ref.html b/testing/web-platform/tests/html/semantics/popovers/popover-alignment-002-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>Tests that popover alignment responds to anchor positioning</title>
+<link rel="author" href="mailto:tabatkins@google.com">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+<style>
+button {
+ border: solid blue 15px;
+ margin: 25px;
+ anchor-name: --foo;
+}
+div {
+ position: absolute;
+ border: solid orange 10px;
+ inset: 0;
+ margin: 0;
+ padding: .25em;
+ place-self: normal;
+ position-anchor: --foo;
+}
+</style>
+
+Orange box should be centered vertically against the left edge of the blue box.
+<button></button>
+<div style="position-area: left span-all"></div>
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-alignment-002.html b/testing/web-platform/tests/html/semantics/popovers/popover-alignment-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>Tests that popover alignment responds to anchor positioning</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#conditional-centering">
+<link rel="match" href="popover-alignment-002-ref.html">
+<link rel="author" href="mailto:tabatkins@google.com">
+<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
+
+<style>
+button {
+ border: solid blue 15px;
+ margin: 25px;
+}
+[popover] {
+ border: solid orange 10px;
+}
+</style>
+
+Orange box should be centered vertically against the left edge of the blue box.
+<button popovertarget=p3></button>
+<div id="p3" popover style="position-area: left span-all"></div>
+
+<script>
+document.querySelector("[popover]").showPopover();
+document.documentElement.removeAttribute("class");
+</script>
