Re: [csswg-drafts] [css-anchor-position-1] allow anchor() within shape() (#13716)

The CSS Working Group just discussed `[css-anchor-position-1] allow anchor() within shape()`, and agreed to the following:

* `RESOLVED: Work on this, details TBD`

<details><summary>The full IRC log of that discussion</summary>
&lt;emilio> TabAtkins: authors want to refer to anchors within `shape()`<br>
&lt;emilio> ... anchor resolves to horizontal / vertical offset<br>
&lt;lea> q?<br>
&lt;emilio> ... anchor conceptually makes sense for offsets<br>
&lt;emilio> ... not sure about impl perspective<br>
&lt;lea> q+<br>
&lt;emilio> ... that's my big question, is this something we could allow?<br>
&lt;emilio> ... there are good use cases for it here<br>
&lt;Rossen> ack lea<br>
&lt;emilio> lea: agreed there are good use cases but I thought it was per-property<br>
&lt;iank_> q+<br>
&lt;emilio> ... it's mostly to avoid cycles right?<br>
&lt;kizu> q+<br>
&lt;emilio> TabAtkins: there needs to be a particular context where things are allowed<br>
&lt;emilio> ... there needs to be some context<br>
&lt;emilio> fantasai: I think tab is saying that it's not a size<br>
&lt;dshin-moz> q+<br>
&lt;emilio> ... but length fundamentally is a size<br>
&lt;emilio> ... but anchor computes as a position with respect to another<br>
&lt;emilio> ... most things that take lengths<br>
&lt;emilio> ... can't deal with it, anchor() computes to the same thing on left and right<br>
&lt;emilio> ... to different things<br>
&lt;Rossen> ack iank_<br>
&lt;emilio> TabAtkins: it works here because xy are offsets from the area<br>
&lt;emilio> iank_: are there shape values without the origin?<br>
&lt;emilio> TabAtkins: this would only be for x/y<br>
&lt;emilio> ... it wouldn't be allowed in the relative commands in the shape() syntax<br>
&lt;emilio> ... but  would be allowed in the abs commands<br>
&lt;emilio> ... because those are using lengths as a size rather than origin<br>
&lt;Rossen> ack dshin-moz<br>
&lt;dshin-moz> I will just type the question<br>
&lt;smfr> something something the shape will change<br>
&lt;smfr> q+<br>
&lt;dshin-moz> So if the anchor is a scroll compensated, the shape will change?<br>
&lt;emilio> TabAtkins: I think it would, should denote the same point as something anchoring to the same value<br>
&lt;emilio> q+<br>
&lt;Rossen> ack kizu<br>
&lt;kizu> I am trying to unmute<br>
&lt;iank_> i think this depends a lot on the property shape() is used in.<br>
&lt;iank_> e.g. shape-outside should likely just reject as thats only for floating.<br>
&lt;emilio> kizu: +1 to the ask<br>
&lt;emilio> ... for anything where we know offsets of the coordinates we should be able to use anchor()<br>
&lt;emilio> ... this is the case, background-{size,position} could be the case, maybe some transforms though less obvious<br>
&lt;emilio> ... but yeah +1, people have to do weird things<br>
&lt;Rossen> ack smfr<br>
&lt;emilio> smfr: I commented in the issue<br>
&lt;emilio> ... the classic thing would be a speech bubble<br>
&lt;lea> The kinds of hacks authors do today due to these types of limitations… https://frontendmasters.com/blog/perfectly-pointed-tooltips-a-foundation/<br>
&lt;emilio> ... but when that moves around you're going to need a different corner<br>
&lt;emilio> TabAtkins: yeah those would need fallbacks<br>
&lt;emilio> kizu: some things authors do would be to manually check, but if you know the element is always on the right...<br>
&lt;emilio> ... if you have some text box or so ...<br>
&lt;emilio> ... with a background and an avatar and you want a bg to wrap around both<br>
&lt;emilio> ... so you want to draw a shape around them<br>
&lt;emilio> ... so you could use anchor pos for this<br>
&lt;Rossen> q?<br>
&lt;Rossen> ack emilio<br>
&lt;fantasai> emilio: What properties accept shape()? shape-outside would be annoying<br>
&lt;fantasai> iank_: It doesn't make sense on shape-outside<br>
&lt;fantasai> TabAtkins: border-shape would be the cool thing<br>
&lt;smfr> clip-path<br>
&lt;fantasai> TabAtkins: I'm happy if the answer to this is "let's work on the issues". Don't need to resolve on anything here.<br>
&lt;fantasai> TabAtkins: But also if we want to classify paint-time vs layout-time that seems reasonable to me<br>
&lt;fantasai> +1<br>
&lt;fantasai> emilio: Other annoying bit, some of the SVG path commands it gets tricky because exposed to SVG OM<br>
&lt;fantasai> TabAtkins: I wouldn't add it to d-string. Just shape() function.<br>
&lt;Rossen> ack emilio<br>
&lt;Rossen> ack fantasai<br>
&lt;emilio> fantasai: mostly what tab said, restricting it to paint time ops makes sense<br>
&lt;emilio> ... we probably want to get separate coordinates<br>
&lt;emilio> TabAtkins: anchor only provides one direction<br>
&lt;emilio> fantasai: we could consider a shorthand to specify the direction<br>
&lt;emilio> ... but the point of making it conditional on the fallback position is a general problem<br>
&lt;fantasai> emilio: Weren't there proposals for container queries?<br>
&lt;fantasai> emilio: but you can't style the element itself.<br>
&lt;emilio> Rossen: are we going down to fix these around?<br>
&lt;emilio> fantasai: I think we can figure out the details in the issue<br>
&lt;emilio> PROPOSED: Work on this, details TBD<br>
&lt;fantasai> fantasai: wanted to gauge interest and see if any major concerns<br>
&lt;emilio> RESOLVED: Work on this, details TBD<br>
</details>


-- 
GitHub Notification of comment by css-meeting-bot
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13716#issuecomment-4180481300 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 2 April 2026 21:07:24 UTC