commit f15c4511b936e54b51dfe89945b4dd65b387e80a
parent d82c74ec452de160807e56da6c1fde677edd6232
Author: Jonathan Kew <jkew@mozilla.com>
Date: Fri, 2 Jan 2026 17:22:04 +0000
Bug 2006513 - Add a reftest verifying that the target element is finally reflowed with the proper width, after trying fallbacks with different widths. r=layout-anchor-positioning-reviewers,emilio
Differential Revision: https://phabricator.services.mozilla.com/D277757
Diffstat:
2 files changed, 103 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-005-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-try-005-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="author" href="mailto:jkew@mozilla.com">
+
+<style>
+.cb {
+ position: relative;
+ width: 250px;
+ height: 100px;
+ background: yellow;
+}
+.anchor {
+ position: absolute;
+ top: 25px;
+ left: 50px;
+ width: 50px;
+ height: 50px;
+ background: blue;
+}
+.target {
+ position: absolute;
+ top: 35px;
+ left: 110px;
+ width: 140px;
+ background: #0004;
+}
+</style>
+<body>
+ <div class="cb">
+ <div class="anchor"></div>
+ <div class="target">This text should wrap and overflow the yellow containing block vertically (and not horizontally).</div>
+ </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-005.html b/testing/web-platform/tests/css/css-anchor-position/position-try-005.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback">
+<link rel="author" href="mailto:jkew@mozilla.com">
+<link rel="match" href="position-try-005-ref.html">
+
+<style>
+.cb {
+ position: relative;
+ width: 250px;
+ height: 100px;
+ background: yellow;
+}
+.anchor {
+ position: relative;
+ anchor-name: --a;
+ top: 25px;
+ left: 50px;
+ width: 50px;
+ height: 50px;
+ background: blue;
+}
+.target {
+ position: absolute;
+ position-try-fallbacks: --f1, --f2, --f3, --f4;
+ width: 140px;
+ margin: 10px;
+ background: #0004;
+ /* Position to the right of the anchor. */
+ left: anchor(--a right);
+ top: anchor(--a top);
+}
+/* fallback positions with various widths, none of which actually fit */
+@position-try --f1 {
+ inset: auto;
+ /* Position to the left of the anchor. */
+ right: anchor(--a left);
+ top: anchor(--a top);
+ width: 300px;
+}
+@position-try --f2 {
+ inset: auto;
+ /* Position to the bottom of the anchor. */
+ left: anchor(--a left);
+ top: anchor(--a bottom);
+ width: 250px;
+}
+@position-try --f3 {
+ inset: auto;
+ /* Position to the top of the anchor. */
+ left: anchor(--a left);
+ bottom: anchor(--a top);
+ width: 150px;
+}
+@position-try --f4 {
+ inset: auto;
+ /* Position to the right of the anchor, with a larger width. */
+ left: anchor(--a right);
+ top: anchor(--a top);
+ width: 200px;
+}
+</style>
+<body>
+ <!-- None of the fallback rules fit. The base style is used. -->
+ <div class="cb">
+ <div class="anchor"></div>
+ <!-- target element includes wrapped text, to check that its content is reflowed appropriately for the chosen position -->
+ <div class="target">This text should wrap and overflow the yellow containing block vertically (and not horizontally).</div>
+ </div>
+</body>
