commit 6c8d7fe5b49b127c86ab4221d718ed326b5bdbc1
parent 859db7d738b925636b7c277d740ab4fbdf83e94d
Author: Tim Nguyen <nt1m@users.noreply.github.com>
Date: Wed, 15 Oct 2025 08:44:31 +0000
Bug 1993936 [wpt PR 55373] - WebKit export of https://bugs.webkit.org/show_bug.cgi?id=295503, a=testonly
Automatic update from web-platform-tests
WebKit export: [css-anchor-position-1] Support safe and unsafe with anchor-center (#55373)
https://bugs.webkit.org/show_bug.cgi?id=295503
Co-authored-by: Alexsander Borges Damaceno <aborges@igalia.com>
--
wpt-commits: 6fe9e6f634fa65448ecdcb840adccce35ba92a64
wpt-pr: 55373
Diffstat:
4 files changed, 216 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-safe-ref.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-safe-ref.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<title>Tests whether safe alignment works correctly on the anchor element.</title>
+<style>
+.anchor {
+ position: fixed;
+ left: 0px;
+ top: 0px;
+ height: 30px;
+ color: white;
+ background-color: green;
+}
+.infobox {
+ color: darkblue;
+ background-color: azure;
+ border: 1px solid #ddd;
+ padding: 10px;
+ position: fixed;
+ top: 35px;
+ left: 0px;
+}
+.anchor2 {
+ position: fixed;
+ left: 340px;
+ top: 0px;
+ height: 30px;
+ width: 100px;
+ color: white;
+ background-color: green;
+}
+.infobox2 {
+ color: darkblue;
+ background-color: azure;
+ border: 1px solid #ddd;
+ padding: 10px;
+ position: fixed;
+ top: 0px;
+ left: 445px; /* This value is calculated from the left position value of .anchor2 plus its width, plus an additional 5 px of padding */
+}
+</style>
+<div style="position: relative;">
+ <div class="anchor">Anchor</div>
+ <div class="infobox">
+ <p>Anchored element with justify-self</p>
+ </div>
+ <div class="anchor2">Anchor2</div>
+ <div class="infobox2">
+ <p>Anchored element with align-self</p>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-safe-rtl-ref.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-safe-rtl-ref.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<title>Tests whether safe alignment works correctly on the anchor element.</title>
+<style>
+body {
+ direction: rtl;
+ display: inline;
+}
+.anchor {
+ position: fixed;
+ top: 0px;
+ right: 0px;
+ height: 30px;
+ color: white;
+ background-color: green;
+}
+.infobox {
+ color: darkblue;
+ background-color: azure;
+ border: 1px solid #ddd;
+ padding: 10px;
+ position: fixed;
+ top: 35px;
+ right: 0px;
+}
+.anchor2 {
+ position: fixed;
+ top: 0px;
+ right: 390px;
+ width: 100px;
+ height: 30px;
+ color: white;
+ background-color: green;
+}
+.infobox2 {
+ color: darkblue;
+ background-color: azure;
+ border: 1px solid #ddd;
+ padding: 10px;
+ position: fixed;
+ top: 0px;
+ right: 495px; /* This value is calculated from the right position value of .anchor2 plus its width, plus an additional 5 px of padding */
+}
+</style>
+<div style="position: relative;">
+ <div class="anchor">Anchor</div>
+ <div class="infobox">
+ <p>Anchored element with justify-self</p>
+ </div>
+ <div class="anchor2">Anchor</div>
+ <div class="infobox2">
+ <p>Anchored element with align-self</p>
+ </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-safe-rtl.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-safe-rtl.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<title>Tests whether safe alignment works correctly on the anchor element.</title>
+<link rel="match" href="anchor-center-safe-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-center">
+<style>
+body {
+ direction: rtl;
+ display: inline;
+}
+.anchor {
+ position: fixed;
+ top: 0px;
+ right: 0px;
+ height: 30px;
+ color: white;
+ background-color: green;
+ anchor-name: --myAnchor;
+}
+.infobox {
+ color: darkblue;
+ background-color: azure;
+ border: 1px solid #ddd;
+ padding: 10px;
+ position: fixed;
+ position-anchor: --myAnchor;
+ top: calc(anchor(bottom) + 5px);
+ right: 0px;
+ justify-self: safe anchor-center;
+}
+.anchor2 {
+ position: fixed;
+ top: 0px;
+ right: 390px;
+ width: 100px;
+ height: 30px;
+ color: white;
+ background-color: green;
+ anchor-name: --myAnchor2;
+}
+.infobox2 {
+ color: darkblue;
+ background-color: azure;
+ border: 1px solid #ddd;
+ padding: 10px;
+ position: fixed;
+ position-anchor: --myAnchor2;
+ top: calc(anchor(right) + 5px);
+ right: calc(anchor(left) + 5px);
+ align-self: safe anchor-center;
+}
+</style>
+<div class="anchor">Anchor</div>
+<div class="infobox">
+ <p>Anchored element with justify-self</p>
+</div>
+<div class="anchor2">Anchor</div>
+<div class="infobox2">
+ <p>Anchored element with align-self</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-center-safe.html b/testing/web-platform/tests/css/css-anchor-position/anchor-center-safe.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<title>Tests whether safe alignment works correctly on the anchor element.</title>
+<link rel="match" href="anchor-center-safe-ref.html">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-center">
+<style>
+.anchor {
+ position: fixed;
+ left: 0px;
+ top: 0px;
+ height: 30px;
+ color: white;
+ background-color: green;
+ anchor-name: --myAnchor;
+}
+.infobox {
+ color: darkblue;
+ background-color: azure;
+ border: 1px solid #ddd;
+ padding: 10px;
+ position: fixed;
+ position-anchor: --myAnchor;
+ top: calc(anchor(bottom) + 5px);
+ left: 0px;
+ justify-self: safe anchor-center;
+}
+
+.anchor2 {
+ position: fixed;
+ top: 0px;
+ left: 340px;
+ height: 30px;
+ width: 100px;
+ color: white;
+ background-color: green;
+ anchor-name: --myAnchor2;
+}
+.infobox2 {
+ color: darkblue;
+ background-color: azure;
+ border: 1px solid #ddd;
+ padding: 10px;
+ position: fixed;
+ position-anchor: --myAnchor2;
+ left: calc(anchor(right) + 5px);
+ align-self: safe anchor-center;
+}
+</style>
+<div class="anchor">Anchor</div>
+<div class="infobox">
+ <p>Anchored element with justify-self</p>
+</div>
+<div class="anchor2">Anchor2</div>
+<div class="infobox2">
+ <p>Anchored element with align-self</p>
+</div>
