commit 6513ccf817e594e82b142702f6927ec88ee6231d
parent 3e955407bd4834dfb81cf537a7f9387f9bf993fd
Author: fantasai <fantasai.bugs@inkedblade.net>
Date: Thu, 9 Oct 2025 20:37:04 +0000
Bug 1992367 [wpt PR 55217] - [css-anchor-position-1] Add tests for position-area expansion to scrollable ICB, a=testonly
Automatic update from web-platform-tests
[css-anchor-position-1] Add tests for position-area expansion to scrollable ICB
See https://github.com/w3c/csswg-drafts/issues/10861
--
wpt-commits: 19250d046daa69748ece904fb05c768713e045aa
wpt-pr: 55217
Diffstat:
4 files changed, 130 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-overflow-icb-001-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-area-overflow-icb-001-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html dir=rtl>
+<title>Reference: position-area overflow alignment against ICB - non-scrollable RTL</title>
+<style>
+.anchor {
+ border: solid orange 20px;
+ position: absolute;
+ margin: auto;
+ top: 50%;
+ left: 50%;
+}
+.above, .below, .left, .right {
+ border: solid blue 3px;
+ padding: 2px;
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+.above { top: 0; left: 50%; height: 60vh; margin-left: 25px; }
+.below { bottom: 0; left: 50%; height: 60vh; margin-left: 5px; }
+.left { left: 0; top: 50%; width: 60vw; margin-top: 25px; }
+.right { right: 0; top: 50%; width: 60vw; margin-top: 5px; }
+</style>
+
+<div class=anchor></div>
+<div class=above></div>
+<div class=below></div>
+<div class=left></div>
+<div class=right></div>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-overflow-icb-001.html b/testing/web-platform/tests/css/css-anchor-position/position-area-overflow-icb-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html dir=rtl>
+<title>position-area overflow alignment against ICB - non-scrollable RTL</title>
+<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#auto-safety-position">
+<meta name=assert content="Test passes if the positioned box is aligned as specified to the extent possible within the scrollable area.">
+
+<link rel="match" href="position-area-overflow-icb-001-ref.html">
+<style>
+.anchor {
+ anchor-name: --foo;
+ border: solid orange 20px;
+ position: absolute;
+ margin: auto;
+ top: 50%;
+ left: 50%;
+}
+.above, .below, .left, .right {
+ border: solid blue 3px;
+ padding: 2px;
+ position: absolute;
+ position-anchor: --foo;
+}
+.above { position-area: top center; height: 60vh; margin-left: 20px; }
+.below { position-area: bottom center; height: 60vh; margin-right: 20px; }
+.left { position-area: left center; width: 60vw; margin-top: 20px; }
+.right { position-area: right center; width: 60vw; margin-bottom: 20px; }
+</style>
+
+<div class=anchor></div>
+<div class=above></div>
+<div class=below></div>
+<div class=left></div>
+<div class=right></div>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-overflow-icb-002-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-area-overflow-icb-002-ref.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html dir=rtl>
+<title>Reference: position-area overflow alignment against ICB - scrollable RTL</title>
+<style>
+.anchor {
+ border: solid orange 20px;
+ position: absolute;
+ margin: auto;
+ top: 50%;
+ left: 50%;
+}
+.above, .below, .left, .right {
+ border: solid blue 3px;
+ padding: 2px;
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+.above { top: 0; left: 50%; height: 60vh; margin-left: 25px; }
+.below { top: 50%; left: 50%; height: 60vh; margin-left: 5px; margin-top: 40px; }
+.left { right: 50%; top: 50%; width: 60vw; margin-top: 25px; }
+.right { right: 0; top: 50%; width: 60vw; margin-top: 5px; }
+
+html { height: 150vh; width: 150vw; }
+</style>
+
+<div class=anchor></div>
+<div class=above></div>
+<div class=below></div>
+<div class=left></div>
+<div class=right></div>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-overflow-icb-002.html b/testing/web-platform/tests/css/css-anchor-position/position-area-overflow-icb-002.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html dir=rtl>
+<title>position-area overflow alignment against ICB - scrollable RTL</title>
+<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#position-area">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#auto-safety-position">
+<meta name=assert content="Test passes if the positioned box is aligned as specified to the extent possible within the scrollable area.">
+
+<link rel="match" href="position-area-overflow-icb-002-ref.html">
+<style>
+.anchor {
+ anchor-name: --foo;
+ border: solid orange 20px;
+ position: absolute;
+ margin: auto;
+ top: 50%;
+ left: 50%;
+}
+.above, .below, .left, .right {
+ border: solid blue 3px;
+ padding: 2px;
+ position: absolute;
+ position-anchor: --foo;
+}
+.above { position-area: top center; height: 60vh; margin-left: 20px; }
+.below { position-area: bottom center; height: 60vh; margin-right: 20px; }
+.left { position-area: left center; width: 60vw; margin-top: 20px; }
+.right { position-area: right center; width: 60vw; margin-bottom: 20px; }
+
+html { height: 150vh; width: 150vw; }
+</style>
+
+<div class=anchor></div>
+<div class=above></div>
+<div class=below></div>
+<div class=left></div>
+<div class=right></div>
