commit 2679506784c515a7c63973ce788ca94e613d5274 parent 970699bd70129261357b00a2ce91e4782dd7bd95 Author: Ian Kilpatrick <ikilpatrick@chromium.org> Date: Fri, 7 Nov 2025 08:47:37 +0000 Bug 1998481 [wpt PR 55863] - [anchor] Switch position-try-order to use containing-block writing-mode., a=testonly Automatic update from web-platform-tests [anchor] Switch position-try-order to use containing-block writing-mode. It was resolved in: https://github.com/w3c/csswg-drafts/issues/12869#issuecomment-3406959070 That position-try-order should work in the containing-block writing-mode and not the candidate writing-mode. Fixed: 452327359 Change-Id: I60984e57cda1dd57dfcb70e10cbd14a272d972c2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7120318 Commit-Queue: David Grogan <dgrogan@chromium.org> Auto-Submit: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1540244} -- wpt-commits: 9706477c44d77d758b9e642982030d61db284548 wpt-pr: 55863 Diffstat:
| A | testing/web-platform/tests/css/css-anchor-position/position-try-order-logical-ref.html | | | 115 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
| A | testing/web-platform/tests/css/css-anchor-position/position-try-order-logical.html | | | 166 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ |
2 files changed, 281 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-order-logical-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-try-order-logical-ref.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<style> +.container { + position: relative; + display: inline-block; + width: 100px; + height: 100px; + margin: 10px; + border: solid 3px; +} + +.anchor { + position: absolute; + anchor-name: --a; + width: 25px; + height: 25px; + left: 50px; + top: 25px; + background: dodgerblue; +} + +.anchored { + position: absolute; + position-anchor: --a; + position-try-fallbacks: flip-block flip-inline; + width: 15px; + height: 15px; + background: green; +} +</style> +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: top left;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: top left;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: bottom right;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: bottom right;"></div> +</div> + +<br> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: top left;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: top left;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: bottom right;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: bottom right;"></div> +</div> + +<br> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: bottom right;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: bottom right;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: top left;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: top left;"></div> +</div> + +<br> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: bottom right;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: bottom right;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: top left;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style="position-area: top left;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-order-logical.html b/testing/web-platform/tests/css/css-anchor-position/position-try-order-logical.html @@ -0,0 +1,166 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/12869#issuecomment-3406959070"> +<link rel="match" href="position-try-order-logical-ref.html"> +<style> +.container { + position: relative; + display: inline-block; + width: 100px; + height: 100px; + margin: 10px; + border: solid 3px; +} + +.anchor { + position: absolute; + anchor-name: --a; + width: 25px; + height: 25px; + left: 50px; + top: 25px; + background: dodgerblue; +} + +.anchored { + position: absolute; + position-anchor: --a; + position-try-fallbacks: flip-block flip-inline; + width: 15px; + height: 15px; + background: green; +} +</style> +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style=" + position-area: top left; + position-try-order: most-inline-size; + writing-mode: vertical-rl;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style=" + position-area: top left; + position-try-order: most-inline-size; + writing-mode: horizontal-tb;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style=" + position-area: top left; + position-try-order: most-block-size; + writing-mode: vertical-rl;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style=" + position-area: top left; + position-try-order: most-block-size; + writing-mode: horizontal-tb;"></div> +</div> + +<br> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style=" + right: anchor(left); bottom: anchor(top); + position-try-order: most-inline-size; + writing-mode: vertical-rl;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style=" + right: anchor(left); bottom: anchor(top); + position-try-order: most-inline-size; + writing-mode: horizontal-tb;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style=" + right: anchor(left); bottom: anchor(top); + position-try-order: most-block-size; + writing-mode: vertical-rl;"></div> +</div> + +<div class="container"> + <div class="anchor"></div> + <div class="anchored" style=" + right: anchor(left); bottom: anchor(top); + position-try-order: most-block-size; + writing-mode: horizontal-tb;"></div> +</div> + +<br> + +<!-- vertical containing block. --> +<div class="container" style="writing-mode: vertical-rl;"> + <div class="anchor"></div> + <div class="anchored" style=" + position-area: top left; + position-try-order: most-inline-size; + writing-mode: vertical-rl;"></div> +</div> + +<div class="container" style="writing-mode: vertical-rl;"> + <div class="anchor"></div> + <div class="anchored" style=" + position-area: top left; + position-try-order: most-inline-size; + writing-mode: horizontal-tb;"></div> +</div> + +<div class="container" style="writing-mode: vertical-rl;"> + <div class="anchor"></div> + <div class="anchored" style=" + position-area: top left; + position-try-order: most-block-size; + writing-mode: vertical-rl;"></div> +</div> + +<div class="container" style="writing-mode: vertical-rl;"> + <div class="anchor"></div> + <div class="anchored" style=" + position-area: top left; + position-try-order: most-block-size; + writing-mode: horizontal-tb;"></div> +</div> + +<br> + +<div class="container" style="writing-mode: vertical-rl;"> + <div class="anchor"></div> + <div class="anchored" style=" + right: anchor(left); bottom: anchor(top); + position-try-order: most-inline-size; + writing-mode: vertical-rl;"></div> +</div> + +<div class="container" style="writing-mode: vertical-rl;"> + <div class="anchor"></div> + <div class="anchored" style=" + right: anchor(left); bottom: anchor(top); + position-try-order: most-inline-size; + writing-mode: horizontal-tb;"></div> +</div> + +<div class="container" style="writing-mode: vertical-rl;"> + <div class="anchor"></div> + <div class="anchored" style=" + right: anchor(left); bottom: anchor(top); + position-try-order: most-block-size; + writing-mode: vertical-rl;"></div> +</div> + +<div class="container" style="writing-mode: vertical-rl;"> + <div class="anchor"></div> + <div class="anchored" style=" + right: anchor(left); bottom: anchor(top); + position-try-order: most-block-size; + writing-mode: horizontal-tb;"></div> +</div>