Skip to content

[css-sizing] Intrinsic contribution of fit-content() with cyclic percentages #11805

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.

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

Open
Loirooriol opened this issue Mar 2, 2025 · 0 comments
Labels

Comments

@Loirooriol
Copy link
Contributor

<div id="a" style="width: max-content">
  <div id="b" style="display: flow-root; width: 1000px; max-width: fit-content(100px + 100%)">
    <div style="float: left; width: 25px"></div>
    <div style="float: left; width: 25px"></div>
  </div>
</div>

According to https://drafts.csswg.org/css-sizing-3/#cyclic-percentage-contribution

If the box is non-replaced, then the entire value of any max size property or preferred size property (width/max-width/height/max-height) specified as an expression containing a percentage (such as 10% or calc(10px + 0%)) that is cyclic is treated for the purpose of calculating the box’s intrinsic size contributions only as that property’s initial value.

This means that the intrinsic min/max-content contributions of #b are 1000px.

But does this make sense? Once #b is laid out with a 1000px wide containing block, its size will resolve to 50px. It's normal for the intrinsic contributions to not match the final size, but here it looks weird since we know 50px will be an upper limit. Also, in #10721 there are 2 proposals under consideration, but both treat max-width: fit-content as max-content when computing the max-content contribution. So if we do that for fit-content, it seems we should do the same for a cyclic fit-content().

Then, proposal:

  • If a <length-percentage> would resolve cyclic percentages against zero, then fit-content(<length-percentage>) resolves cyclic percentages against zero.
    Note: the condition never holds in browsers, but it does in the spec. See [css-sizing] Nobody follows the spec about cyclic percentages in min sizing properties #10969 and [css-sizing] Nobody follows the spec about cyclic percentages in preferred&max sizing properties of replaced element #11452.
  • If a <length-percentage> with cyclic percentages is treated as 0px, then fit-content(<length-percentage>) with cyclic percentages is treated as fit-content(0px) i.e. min-content.
    Note: the condition never holds in the spec, but it does in browsers.
  • If a <length-percentage> with cyclic percentages is treated as none, then fit-content(<length-percentage>) with cyclic percentages is treated as fit-content(calc(1px * infinity)) i.e. max-content.
  • If a <length-percentage> with cyclic percentages is treated as the automatic size, then fit-content(<length-percentage>) with cyclic percentages is treated as fit-content, i.e. min-content for the min-content contribution and max-content for the max-content contribution.
  • If a <length-percentage> with cyclic percentages is treated as the automatic minimum size, then fit-content(<length-percentage>) with cyclic percentages is treated as min-content.
    Note: the condition never holds in the spec, and almost never holds in browsers.
Loirooriol added a commit to Loirooriol/servo that referenced this issue Mar 19, 2025
Spec: https://drafts.csswg.org/css-sizing-3/#funcdef-width-fit-content

It's similar to the `fit-content` keyword but, instead of clamping the
stretch size between `min-content` and `max-content`, it clamps the
provided argument.

So now that we support `fit-content`, it's quite straightforward to add.
It's just not completely clear what should happen when the argument has
a cyclic percentage, so this may need some further adjustments depending
on the outcome of w3c/csswg-drafts#11805

Signed-off-by: Oriol Brufau <[email protected]>
Loirooriol added a commit to Loirooriol/servo that referenced this issue Mar 21, 2025
Spec: https://drafts.csswg.org/css-sizing-3/#funcdef-width-fit-content

It's similar to the `fit-content` keyword but, instead of clamping the
stretch size between `min-content` and `max-content`, it clamps the
provided argument.

So now that we support `fit-content`, it's quite straightforward to add.
It's just not completely clear what should happen when the argument has
a cyclic percentage, so this may need some further adjustments depending
on the outcome of w3c/csswg-drafts#11805

Signed-off-by: Oriol Brufau <[email protected]>
Loirooriol added a commit to Loirooriol/servo that referenced this issue Mar 23, 2025
Spec: https://drafts.csswg.org/css-sizing-3/#funcdef-width-fit-content

It's similar to the `fit-content` keyword but, instead of clamping the
stretch size between `min-content` and `max-content`, it clamps the
provided argument.

So now that we support `fit-content`, it's quite straightforward to add.
It's just not completely clear what should happen when the argument has
a cyclic percentage, so this may need some further adjustments depending
on the outcome of w3c/csswg-drafts#11805

Signed-off-by: Oriol Brufau <[email protected]>
github-merge-queue bot pushed a commit to servo/servo that referenced this issue Mar 23, 2025
Spec: https://drafts.csswg.org/css-sizing-3/#funcdef-width-fit-content

It's similar to the `fit-content` keyword but, instead of clamping the
stretch size between `min-content` and `max-content`, it clamps the
provided argument.

So now that we support `fit-content`, it's quite straightforward to add.
It's just not completely clear what should happen when the argument has
a cyclic percentage, so this may need some further adjustments depending
on the outcome of w3c/csswg-drafts#11805

Signed-off-by: Oriol Brufau <[email protected]>
@astearns astearns moved this to Regular agenda in CSSWG April 2025 meeting agenda Mar 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Regular agenda
Development

No branches or pull requests

1 participant