commit 7944c6eaa7472f77fd0ab19dc7c9af82f179deda parent 38668264e9005d3357ee6194320004249b5450ed Author: fantasai <fantasai.bugs@inkedblade.net> Date: Thu, 6 Nov 2025 21:32:46 +0000 Bug 1994521 [wpt PR 55460] - [css-anchor-position-1] Ignore auto margins in combination with position-area and anchor-center, a=testonly Automatic update from web-platform-tests [css-anchor-position-1] Ignore auto margins in combination with position-area and anchor-center Because the HTML stylesheet for popovers used margins instead of alignment in order to do centering, margin: auto had to be sacrificed. See https://github.com/w3c/csswg-drafts/issues/10258 -- wpt-commits: e2c9adc393495c4a3c818dad7ba04c4b9d969dc6 wpt-pr: 55460 Diffstat:
| A | testing/web-platform/tests/css/css-anchor-position/auto-margins-position-area-ref.html | | | 43 | +++++++++++++++++++++++++++++++++++++++++++ |
| M | testing/web-platform/tests/css/css-anchor-position/auto-margins-position-area.html | | | 74 | ++++++++++++++++++++++++++++++++++++++++++-------------------------------- |
2 files changed, 85 insertions(+), 32 deletions(-)
diff --git a/testing/web-platform/tests/css/css-anchor-position/auto-margins-position-area-ref.html b/testing/web-platform/tests/css/css-anchor-position/auto-margins-position-area-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: position-area vs margins</title> +<style> + .container { + position: absolute; + width: 400px; + height: 400px; + margin: 0 auto; + border: 2px solid; + } + .anchor { + margin-top: 100px; + margin-left: 100px; + width: 150px; + height: 75px; + anchor-name: --anchor; + border: solid 1px; + } + + .anchored { + position: absolute; + position-anchor: --anchor; + width: 20px; + height: 20px; + border: solid 1px; + opacity: 30%; + margin: 0; + } +</style> +<div class="container"> + <div class="anchored" style="background: silver; inset: auto 0 0 auto;"></div> + <div class="anchored" style="position-area: span-all; background: maroon"></div> + <div class="anchored" style="position-area: top center; background: orange"></div> + <div class="anchored" style="position-area: left center; background: yellow"></div> + <div class="anchored" style="position-area: bottom right; background: lime"></div> + <div class="anchored" style="position-area: span-right; background: green"></div> + <div class="anchored" style="position-area: span-bottom; background: teal"></div> + <div class="anchored" style="position-area: right; background: blue"></div> + <div class="anchored" style="position-area: bottom; background: purple"></div> + <div class="anchored" style="align-self: anchor-center; background: fuchsia; right: 0"></div> + <div class="anchored" style="justify-self: anchor-center; background: aqua; bottom: 0"></div> + <div class="anchor"></div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/auto-margins-position-area.html b/testing/web-platform/tests/css/css-anchor-position/auto-margins-position-area.html @@ -1,39 +1,49 @@ <!DOCTYPE html> -<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/"> -<style> -.container { - position: relative; - width: 100px; - height: 100px; - border: solid 3px; -} +<title>CSS Anchor Positioning: position-area vs margins</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area"> +<link rel="help" href="https://www.w3.org/TR/css-anchor-position/#anchor-center"> -.anchor { - anchor-name: --a; - background: lime; - width: 20px; - height: 20px; - position: relative; - left: 20px; - top: 30px; -} +<link rel="match" href="auto-margins-position-area-ref.html"> -.abspos { - background: cornflowerblue; - margin: auto; - position: absolute; - position-area: bottom; - position-anchor: --a; -} -</style> +<style> + .container { + position: absolute; + width: 400px; + height: 400px; + margin: 0 auto; + border: 2px solid; + } + .anchor { + margin-top: 100px; + margin-left: 100px; + width: 150px; + height: 75px; + anchor-name: --anchor; + border: solid 1px; + } -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/resources/check-layout-th.js"></script> -<body onload="checkLayout('.abspos')"> + .anchored { + position: absolute; + position-anchor: --anchor; + inset: 0; + width: 20px; + height: 20px; + border: solid 1px; + opacity: 30%; + margin: auto 0 0 auto; + } +</style> <div class="container"> + <div class="anchored" style="background: silver"></div> + <div class="anchored" style="position-area: span-all; background: maroon"></div> + <div class="anchored" style="position-area: top center; background: orange"></div> + <div class="anchored" style="position-area: left center; background: yellow"></div> + <div class="anchored" style="position-area: bottom right; background: lime"></div> + <div class="anchored" style="position-area: span-right; background: green"></div> + <div class="anchored" style="position-area: span-bottom; background: teal"></div> + <div class="anchored" style="position-area: right; background: blue"></div> + <div class="anchored" style="position-area: bottom; background: purple"></div> + <div class="anchored" style="align-self: anchor-center; background: fuchsia"></div> + <div class="anchored" style="justify-self: anchor-center; background: aqua"></div> <div class="anchor"></div> - <div class="abspos" data-offset-x=10 data-offset-y=65> - <div style="width: 80px; height: 20px;"></div> - </div> </div>