- From: dshin-moz via GitHub <sysbot+gh@w3.org>
- Date: Fri, 17 Jan 2025 16:54:46 +0000
- To: public-css-archive@w3.org
A testcase for my previous comment:
```
<!DOCTYPE html>
<style>
.container {
position: relative;
width: 100px;
height: 100px;
border: 1px solid;
}
.anchor {
anchor-name: --foo;
width: 100px;
height: 10px;
background: purple;
}
.positioned {
position: absolute;
width: 100px;
height: 10px;
background: pink;
top: anchor(--foo bottom);
}
.recursive {
left: anchor(--foo right, anchor(--foo left));
}
.fallback {
left: anchor(--foo right);
position-try-fallbacks: --fb;
}
@position-try --fb {
left: anchor(--foo left);
}
</style>
<div class="container">
<div class="anchor"></div>
<div class="positioned recursive"></div>
</div>
<div class="container">
<div class="anchor"></div>
<div class="positioned fallback"></div>
</div>
```
On Chrome Version 134.0.6958.2 (Official Build) dev (64-bit), the first pink element positions to the lower right, where the second one positions directly below the anchor.
Both are fallbacks, but `anchor()` fallback does not consider overflow, where `position-try-fallback` does. That seems like a potential point of confusion.
--
GitHub Notification of comment by dshin-moz
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10831#issuecomment-2598783934 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 17 January 2025 16:54:47 UTC