commit 819f2165c3c9303531a61ad6894101a102186452 parent 326431509879e00fc49a1040c76e6416ea4866b3 Author: Jonathan Kew <jkew@mozilla.com> Date: Mon, 5 Jan 2026 17:56:37 +0000 Bug 2008537 - Add a simple reftest to confirm default anchor-center justification is 'safe'. r=layout-anchor-positioning-reviewers,emilio This fails in current Nightly (without the patch here). It renders as expected in Chrome. Differential Revision: https://phabricator.services.mozilla.com/D277893 Diffstat:
| A | testing/web-platform/tests/css/css-anchor-position/position-area-justify-self-safe-001-ref.html | | | 55 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | testing/web-platform/tests/css/css-anchor-position/position-area-justify-self-safe-001.html | | | 64 | ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
2 files changed, 119 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-justify-self-safe-001-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-area-justify-self-safe-001-ref.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Anchor Positioning reference</title> + +<style> +.container { + width: 100px; + height: 50px; + border: 1px solid gray; + margin: 10px; + position: relative; +} + +.anchor { + width: 10px; + height: 10px; + top: 30px; + position: absolute; + background: blue; +} + +.anchored { + width: 50px; + height: 20px; + top: 10px; + position: absolute; + background: green; +} +</style> + +<div class=container> + <div class=anchor style="left: 10px"></div> + <div class=anchored style="left: 0px"></div> +</div> + +<div class=container> + <div class=anchor style="left: 45px"></div> + <div class=anchored style="left: 25px"></div> +</div> + +<div class=container> + <div class=anchor style="left: 80px"></div> + <div class=anchored style="left: 50px"></div> +</div> + +<div class=container> + <div class=anchor style="left: 5px"></div> + <div class=anchored style="left: 10px"></div> +</div> + +<div class=container> + <div class=anchor style="left: 85px"></div> + <div class=anchored style="left: 40px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-justify-self-safe-001.html b/testing/web-platform/tests/css/css-anchor-position/position-area-justify-self-safe-001.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<meta charset="utf-8"> + +<title>CSS Anchor Positioning: default anchor-center alignment is safe</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-area-alignment"> +<link rel="help" href="https://www.w3.org/TR/css-align-3/#auto-safety"> +<link rel="match" href="position-area-justify-self-safe-001-ref.html"> + +<style> +.container { + width: 100px; + height: 50px; + border: 1px solid gray; + margin: 10px; + position: relative; +} + +.anchor { + width: 10px; + height: 10px; + top: 30px; + position: absolute; + background: blue; + anchor-name: --a; +} + +.anchored, .anchored2 { + width: 50px; + height: 20px; + position: absolute; + position-area: top; + position-anchor: --a; + background: green; +} + +.anchored2 { + margin: 0 10px; +} +</style> + +<div class=container> + <div class=anchor style="left: 10px"></div> + <div class=anchored></div> +</div> + +<div class=container> + <div class=anchor style="left: 45px"></div> + <div class=anchored></div> +</div> + +<div class=container> + <div class=anchor style="left: 80px"></div> + <div class=anchored></div> +</div> + +<div class=container> + <div class=anchor style="left: 5px"></div> + <div class=anchored2></div> +</div> + +<div class=container> + <div class=anchor style="left: 85px"></div> + <div class=anchored2></div> +</div>