Skip to content

[css-anchor-position] Is anchor() fallback used when outside of inset properties? #10950

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
dshin-moz opened this issue Sep 26, 2024 · 3 comments
Open

[css-anchor-position] Is anchor() fallback used when outside of inset properties? #10950

dshin-moz opened this issue Sep 26, 2024 · 3 comments
Labels
css-anchor-position-1

Comments

@dshin-moz
Copy link

I presumed that the anchor() function is added as a new type to insets e.g. auto | <length-percentage> | <anchor()>.

However, the validity section mentions that the anchor function is valid if, among other things, is used in inset properties, and that if it's invalid, it will resolve to its fallback value (If provided). This could be read as <anchor()> being part of <length-percentage>, I think.

So does it mean something like width: anchor(--foo left, 10px); will resolve to width: 10px or width: initial? Could see this happening through unregistered properties/trying to use these functions outside of the applicable properties (e.g. #9827)

Same question applies to anchor-size() applied outside of sizing/margin/inset properties.
@fantasai
Copy link
Collaborator

Agenda+ to clarify validity of anchor() in non-inset properties.

@dshin-moz dshin-moz mentioned this issue Mar 28, 2025
Open
@dshin-moz
Copy link
Author

To clarify, playing around with a testcase on Chrome Canary 136.0.7095.0:

<!DOCTYPE html>
<style>
/* Statically-positioned, anchor functions invalid */
#static {
  /* Anchor does not exist */
  left: anchor(--foo left, 12345px);
  /* Wrong axis */
  right: anchor(--foo top, 12345px);
  /* Not an inset property, but supports anchor-size() */
  width: anchor(--foo left, 12345px);
  /* Not an inset property, does not support any other anchor function. */
  padding-left: anchor(--foo left, 12345px);

  /* Anchor does not exist */
  top: anchor-size(--foo height, 12345px);
  height: anchor-size(--foo height, 12345px);
  /* Not a sizing, inset, or margin property */
  padding-top: anchor-size(--foo height, 12345px);
}

/* Absolute-positioned, anchor functions may be valid */
#abs {
  position: absolute;

  /* Anchor does not exist */
  left: anchor(--foo left, 12345px);
  /* Wrong axis */
  right: anchor(--foo top, 12345px);
  /* Not an inset property, but supports anchor-size() */
  width: anchor(--foo left, 12345px);
  /* Not an inset property, does not support any other anchor function. */
  padding-left: anchor(--foo left, 12345px);

  /* Anchor does not exist */
  top: anchor-size(--foo height, 12345px);
  height: anchor-size(--foo height, 12345px);
  /* Not a sizing, inset, or margin property */
  padding-top: anchor-size(--foo height, 12345px);
}
</style>
<div id="static"></div>
<div id="abs"></div>
<script>
for (const d of [static, abs]) {
  const cs = getComputedStyle(d);
  console.log(d.id, cs.left, cs.right, cs.width, cs.paddingLeft, cs.top, cs.height, cs.paddingTop);
}
</script>

Outputs

static 12345px 12345px 551px 0px 12345px 12345px 0px
abs 12345px 12345px 0px 0px 12345px 12345px 0px

Current behaviour seems to be that any use of anchor functions outside of supported properties behaves as if the declaration is invalid - Though they show as "Invalid property value," which makes me think they're rejected at parse time.

@css-meeting-bot
Copy link
Member

The CSS Working Group just discussed [css-anchor-position] Is `anchor()` fallback used when outside of inset properties?, and agreed to the following:

  • RESOLVED: anchor() functions are only valid in inset properties, clarify spec
  • RESOLVED: anchor-size() only allowed in properties allowed in @position-try. Clarify spec.
The full IRC log of that discussion <TabAtkins> fantasai: so there's a question of where anchor() is "valid"
<TabAtkins> fantasai: there's parse validity, and there's "does it have a value, or does it use the fallback"
<kizu> q+
<TabAtkins> fantasai: I think what we mean is that it's only parse-valid in the inset properties
<TabAtkins> fantasai: but some of the text in the spec is confusing on that point
<TabAtkins> fantasai: so want to double check that's the intention
<fantasai> fantasai: and if so, we need to clarify spec
<fantasai> TabAtkins: yes that was the intention
<astearns> ack kizu
<TabAtkins> TabAtkins: they fundamentally don't make sense outside of the inset property
<TabAtkins> kizu: in my exploration i found some use-cases for using them outside of those
<TabAtkins> kizu: wonder if we could say that an explicit side like "left" is okay outside?
<TabAtkins> kizu: there are use-cases both for anchor() and anchor-size() where you might wnat to compute something intersting based on them
<TabAtkins> kizu: right now it's very limited. there are workarounds
<fantasai> TabAtkins: The reason they're not usable outside 'inset' properties is because they compute to the value that the 'inset' property needs to hit a paricular position
<fantasai> TabAtkins: so you need to know which inset property you're in (e.g. left vs top)
<fantasai> TabAtkins: and outside the inset properties, we have no context
<fantasai> s/top/right/
<iank_> `right: anchor(left)` != `left: anchor(left)`
<fantasai> TabAtkins: so if you could elaborate on use cases ..?
<TabAtkins> kizu: really i just wanted ot use the difference between two anchor positions
<TabAtkins> kizu: the acutal value doesn't amtter, just he difference
<fantasai> TabAtkins: What you described, diff between two position, is not contextual
<bkardell> s/mtter, just he difference/matter, just the difference
<fantasai> TabAtkins: if we wanted to do that, we could address it via new function
<fantasai> TabAtkins: anchor-distance() or something
<fantasai> TabAtkins: similar to anchor-size()
<fantasai> TabAtkins: So i think we should reject using anchor() outside insets, but could explore using another anchor function
<fantasai> fantasai: separate issue
<fantasai> kizu: anchor-size() ?
<fantasai> TabAtkins: anchor-size() is already usable more widely
<dshin> I think the main reason for rejecting general-use is https://github.com//issues/9827
<fantasai> iank_: it's allowed on the size properties, whereas anchor() isn't
<TabAtkins> anchor-size() is allowed in a sizing property, an inset property, or a margin property
<fantasai> kizu: Background size shadow on the ground would be very useful
<TabAtkins> (aka the properties you can adjust in position-try, iirc)
<fantasai> kizu: but not allowed currently
<fantasai> astearns: not expanding where it's valid, but could add a different function for those use cases
<fantasai> astearns: anyone who would object to resolving that the anchor() function is not applicable elsewhere than insets?
<fantasai> RESOLVED: anchor() functions are only valid in inset properties, clarify spec
<fantasai> astearns: original post here asks about anchor-size()
<fantasai> astearns: Is that something to discus snow
<fantasai> TabAtkins: Limitation on anchor-size() was due to some processing pipeline timing restrictions
<fantasai> TabAtkins: limited to properties allowed in position-try
<fantasai> TabAtkins: I should check that lists are synced
<fantasai> TabAtkins: I think that's the restriction
<fantasai> iank_: We want to avoid stuff that changes element in general
<fantasai> iank_: e.g. border isn't allowed, has substantial effects on e.g. tables
<fantasai> iank_: margins and size properteis are fine
<astearns> ack fantasai
<fantasai> PROPOSED: anchor-size() only allowed in properties allowed in @position-try. Clarify spec.
<fantasai> astearns: any objections?
<fantasai> RESOLVED: anchor-size() only allowed in properties allowed in @position-try. Clarify spec.

@mozilla-apprentice mozilla-apprentice mentioned this issue Apr 3, 2025
Open
@chromium-helper chromium-helper mentioned this issue Apr 3, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-anchor-position-1
Projects
CSSWG April 2025 meeting agenda
Status: Thursday Afternoon
Milestone
No milestone
Development

No branches or pull requests
4 participants
@tabatkins @fantasai @css-meeting-bot @dshin-moz