Allow anchor-size on margin and inset properties #309
Merged
+82
−9
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for anchor-polyfill ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for anchor-position-wpt canceled.
|
jamesnw
commented
Apr 4, 2025
jgerigmeyer
requested changes
Apr 7, 2025
Member
jgerigmeyer
left a comment
There was a problem hiding this comment.
This works well!
I alternatively could define a subset of the @position-try declarations that actually accept lengths.
My reading of the spec is actually that anchor-size only accepts a subset of the valid @position-try declarations that do accept lengths:
It’s being used in a sizing property, an inset property, or a margin property on an absolutely positioned box. (These are the accepted @position-try properties that allow lengths.)
So I'd recommend we split ACCEPTED_POSITION_TRY_PROPERTIES from ACCEPTED_ANCHOR_SIZE_PROPERTIES.
| @@ -0,0 +1,12 @@ | |||
| #my-anchor-anchor-size-extended { | |||
| anchor-name: --my-anchor-size-extended; | |||
| resize: both; | |||
jgerigmeyer
approved these changes
Apr 7, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
https://drafts.csswg.org/css-anchor-position-1/#anchor-size-fn
Spec changed in w3c/csswg-drafts#9827 to allow
anchor-sizeon all properties that are allowed in@position-tryblocks. This includes some nonsensical ones likealign-self, which don't take lengths. I went with the "technically correct" tact of allowing anchor size to be used on those, but I alternatively could define a subset of the@position-trydeclarations that actually accept lengths.Related Issue(s)
Fixes #288
Steps to test/reproduce
https://deploy-preview-309--anchor-polyfill.netlify.app/#anchor-size-extended