[css-sizing] Nobody follows the spec about cyclic percentages in min sizing properties #10969

Loirooriol · 2024-09-27T22:05:53Z

https://drafts.csswg.org/css-sizing-3/#min-percentage-contribution

For the min size properties, as well as for margins and paddings (and gutters), a cyclic percentage is resolved against zero for determining intrinsic size contributions.

That's a lie, nobody does this for the min size properties, and WebKit doesn't do it either for margins.
Instead, the entire value is treated as the initial value, just like for preferred and max size properties.

<!DOCTYPE html>
<div style="width: 0">
  <div style="display: inline-block; border: 5px solid cyan">
    <div style="min-width: calc(50px + 0%)"></div>
  </div>
  <div style="display: inline-block; border: 5px solid magenta">
    <div style="padding-left: calc(50px + 0%)"></div>
  </div>
  <div style="display: inline-block; border: 5px solid orange">
    <div style="margin-left: calc(50px + 0%)"></div>
  </div>
</div>

Spec & Servo	Gecko	Blink	WebKit

Agenda+ to reflect reality (or change the implementations?).

bfgeek · 2024-09-27T23:31:39Z

We changed our behaviour on purpose to match Firefox due to:
#2297 (comment)

Loirooriol · 2024-10-23T11:24:06Z

To clarify Ian's comment, the change that Blink made was aligning with Firefox in margin percentages, because it used to behave like WebKit.

But presumably, no browser has ever followed the spec for min sizing properties.

This test asserts the browser behavior, not the spec one: https://github.com/web-platform-tests/wpt/blob/master/css/css-values/calc-min-height-block-1.html

This is the second flexbox caching change. It seeks to detect when a relayout can be avoided in the case of a stretching flex item. This heuristic can be combined, because currently we still do relayout sometimes when we do not need to. For instance currently we always relayout when a flex child is itself a column flex. This only needs to happen when the grandchildren themselves grow or shrink. That optimization is perhaps a lower priority as `flex-grow: 1` is the default behavior for flex. Since this change means we more consistenly zero out the percentage part of `calc` expressions when they have circular dependencies, this causes one test to start failing (`/css/css-values/calc-min-height-block-1.html`). This is related to w3c/csswg-drafts#10969, which is pending on further discussion in the working group. Co-authored-by: Oriol Brufau <obrufau@igalia.com> Signed-off-by: Martin Robinson <mrobinson@igalia.com>

Consistent resolution of cyclic percentages in min sizing properties The spec says that cyclic percentages in min sizing properties should be resolved against zero when computing intrinsic contributions. We were already doing that in the inline axis, but we were treating the entire expression as `auto` in the block axis. With this patch we will follow the spec in both axes. But note that browsers don't follo the spec in either axis, so we may have to revisit (see w3c/csswg-drafts#10969). calc-min-height-block-1.html now fails because it tests what browsers do instead of what the spec says.

Consistent resolution of cyclic percentages in min sizing properties The spec says that cyclic percentages in min sizing properties should be resolved against zero when computing intrinsic contributions. We were already doing that in the inline axis, but we were treating the entire expression as `auto` in the block axis. With this patch we will follow the spec in both axes. But note that browsers don't follo the spec in either axis, so we may have to revisit (see w3c/csswg-drafts#10969). calc-min-height-block-1.html now fails because it tests what browsers do instead of what the spec says. Signed-off-by: Oriol Brufau <obrufau@igalia.com>

The spec says that cyclic percentages in min sizing properties should be resolved against zero when computing intrinsic contributions. We were already doing that in the inline axis, but we were treating the entire expression as `auto` in the block axis. With this patch we will follow the spec in both axes. But note that browsers don't follo the spec in either axis, so we may have to revisit (see w3c/csswg-drafts#10969). calc-min-height-block-1.html now fails because it tests what browsers do instead of what the spec says. Signed-off-by: Oriol Brufau <obrufau@igalia.com>

Consistent resolution of cyclic percentages in min sizing properties The spec says that cyclic percentages in min sizing properties should be resolved against zero when computing intrinsic contributions. We were already doing that in the inline axis, but we were treating the entire expression as `auto` in the block axis. With this patch we will follow the spec in both axes. But note that browsers don't follo the spec in either axis, so we may have to revisit (see w3c/csswg-drafts#10969). calc-min-height-block-1.html now fails because it tests what browsers do instead of what the spec says. Signed-off-by: Oriol Brufau <obrufau@igalia.com>

The spec says that cyclic percentages in min sizing properties should be resolved against zero when computing intrinsic contributions. We were already doing that in the inline axis, but we were treating the entire expression as `auto` in the block axis. With this patch we will follow the spec in both axes. But note that browsers don't follo the spec in either axis, so we may have to revisit (see w3c/csswg-drafts#10969). calc-min-height-block-1.html now fails because it tests what browsers do instead of what the spec says. Signed-off-by: Oriol Brufau <obrufau@igalia.com>

…33988) The spec says that cyclic percentages in min sizing properties should be resolved against zero when computing intrinsic contributions. We were already doing that in the inline axis, but we were treating the entire expression as `auto` in the block axis. With this patch we will follow the spec in both axes. But note that browsers don't follo the spec in either axis, so we may have to revisit (see w3c/csswg-drafts#10969). calc-min-height-block-1.html now fails because it tests what browsers do instead of what the spec says. Signed-off-by: Oriol Brufau <obrufau@igalia.com>

The spec says that cyclic percentages in min sizing properties should be resolved against zero when computing intrinsic contributions. We were already doing that in the inline axis, but we were treating the entire expression as `auto` in the block axis. With this patch we will follow the spec in both axes. But note that browsers don't follo the spec in either axis, so we may have to revisit (see w3c/csswg-drafts#10969). calc-min-height-block-1.html now fails because it tests what browsers do instead of what the spec says. Signed-off-by: Oriol Brufau <obrufau@igalia.com>

This is the second flexbox caching change. It seeks to detect when a relayout can be avoided in the case of a stretching flex item. This heuristic can be combined, because currently we still do relayout sometimes when we do not need to. For instance currently we always relayout when a flex child is itself a column flex. This only needs to happen when the grandchildren themselves grow or shrink. That optimization is perhaps a lower priority as `flex-grow: 0 / flex-shrink: 1` is the default behavior for flex. Since this change means we more consistenly zero out the percentage part of `calc` expressions when they have circular dependencies, this causes one test to start failing (`/css/css-values/calc-min-height-block-1.html`). This is related to w3c/csswg-drafts#10969, which is pending on further discussion in the working group. Co-authored-by: Oriol Brufau <obrufau@igalia.com> Signed-off-by: Martin Robinson <mrobinson@igalia.com>

This is the second flexbox caching change. It seeks to detect when a relayout can be avoided in the case of a stretching flex item. This heuristic can be combined, because currently we still do relayout sometimes when we do not need to. For instance currently we always relayout when a flex child is itself a column flex. This only needs to happen when the grandchildren themselves grow or shrink. That optimization is perhaps a lower priority as `flex-grow: 0 / flex-shrink: 1` is the default behavior for flex. Since this change means we more consistenly zero out the percentage part of `calc` expressions when they have circular dependencies, this causes one test to start failing (`/css/css-values/calc-min-height-block-1.html`). This is related to w3c/csswg-drafts#10969, which is pending on further discussion in the working group. Signed-off-by: Martin Robinson <mrobinson@igalia.com> Co-authored-by: Oriol Brufau <obrufau@igalia.com>

…ges in min sizing properties, a=testonly Automatic update from web-platform-tests Consistent resolution of cyclic percentages in min sizing properties The spec says that cyclic percentages in min sizing properties should be resolved against zero when computing intrinsic contributions. We were already doing that in the inline axis, but we were treating the entire expression as `auto` in the block axis. With this patch we will follow the spec in both axes. But note that browsers don't follo the spec in either axis, so we may have to revisit (see w3c/csswg-drafts#10969). calc-min-height-block-1.html now fails because it tests what browsers do instead of what the spec says. Signed-off-by: Oriol Brufau <obrufau@igalia.com> -- wpt-commits: 5496cb2f9bef23f0d34cc9de7e8c53381bde9ab5 wpt-pr: 48798

Loirooriol · 2024-12-24T15:34:39Z

Instead, the entire value is treated as the initial value, just like for preferred and max size properties.

Apparently browsers don't use the initial value, they just use 0px. Except for WebKit on the inline axis of grid layout, which follows the spec and resolves the percentage against 0 🤦

<!DOCTYPE html>
<style>
.grid { display: grid; position: relative; gap: 5px; margin: 5px; }
.grid.width {  width: 0px;  grid-template: 25px / minmax(auto, min-content); }
.grid.height { height: 0px; grid-template: minmax(auto, min-content) / 25px; margin-bottom: 60px }
.grid > div::before { content: ""; display: block; width: 50px; height: 50px; }
.grid::after { content: ""; position: absolute; grid-area: 1 / 1 / 2 / 2; inset: 0; outline: 5px solid magenta; }
</style>
min-width: auto             <div class="grid width "><div style="min-width:  auto            "></div></div>
min-width: 0px              <div class="grid width "><div style="min-width:  0px             "></div></div>
min-width: calc(100px + 0%) <div class="grid width "><div style="min-width:  calc(100px + 0%)"></div></div>
min-height: auto            <div class="grid height"><div style="min-height: auto            "></div></div>
min-height: 0px             <div class="grid height"><div style="min-height: 0px             "></div></div>
min-height: calc(100px + 0%)<div class="grid height"><div style="min-height: calc(100px + 0%)"></div></div>

Gecko	Blink	WebKit

For flex I'm not sure if it can be tested in the inline axis (it would need to rely on the min/max-content size of the flex container, where nobody follows the spec). But for the block axis, browsers agree it's 0:

<!DOCTYPE html>
<style>
.flex { display: flex; flex-direction: column; width: 100px; margin: 5px }
.flex > div { flex-basis: 0; border: solid magenta }
.flex > div::before { content: ""; display: block; width: 50px; height: 50px }
</style>
min-height: auto            <div class="flex"><div style="min-height: auto            "></div></div>
min-height: 0px             <div class="flex"><div style="min-height: 0px             "></div></div>
min-height: calc(100px + 0%)<div class="flex"><div style="min-height: calc(100px + 0%)"></div></div>

Gecko	Blink	WebKit

astearns · 2025-02-19T17:02:58Z

Waiting to see whether we can get implementations to match the spec, same as #11452 (comment)

Loirooriol added Agenda+ css-sizing-3 Current Work labels Sep 27, 2024

Loirooriol mentioned this issue Oct 9, 2024

[css-sizing] Does indefinite stretch behave as automatic size or as initial value? #11006

Open

Loirooriol mentioned this issue Oct 24, 2024

Consistent resolution of cyclic percentages in min sizing properties servo/servo#33988

Merged

3 tasks

servo-wpt-sync mentioned this issue Oct 24, 2024

Consistent resolution of cyclic percentages in min sizing properties web-platform-tests/wpt#48798

Merged

mrobinson mentioned this issue Oct 24, 2024

layout: Avoid flex item relayout sometimes when stretching servo/servo#33967

Merged

3 tasks

Loirooriol mentioned this issue Jan 7, 2025

[css-sizing] Nobody follows the spec about cyclic percentages in preferred&max sizing properties of replaced element #11452

Open

astearns moved this to FTF agenda items in CSSWG January 2025 meeting Jan 22, 2025

astearns added this to CSSWG January 2025 meeting Jan 22, 2025

astearns moved this from FTF agenda items to Regular agenda items in CSSWG January 2025 meeting Jan 22, 2025

Loirooriol added the Agenda+ F2F label Jan 23, 2025

Loirooriol moved this from Regular agenda items to FTF agenda items in CSSWG January 2025 meeting Jan 23, 2025

astearns moved this from FTF agenda items to Friday morning in CSSWG January 2025 meeting Jan 28, 2025

astearns removed Agenda+ Agenda+ F2F labels Feb 19, 2025

Loirooriol mentioned this issue Mar 2, 2025

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

Open

andrewbaxter mentioned this issue Apr 16, 2025

[css-sizing] Cyclical definition of min-content size #12081

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[css-sizing] Nobody follows the spec about cyclic percentages in min sizing properties #10969

[css-sizing] Nobody follows the spec about cyclic percentages in min sizing properties #10969

Loirooriol commented Sep 27, 2024 •

edited

Loading

bfgeek commented Sep 27, 2024

Uh oh!

Loirooriol commented Oct 23, 2024

Uh oh!

Loirooriol commented Dec 24, 2024

Uh oh!

astearns commented Feb 19, 2025

Uh oh!

[css-sizing] Nobody follows the spec about cyclic percentages in min sizing properties #10969

[css-sizing] Nobody follows the spec about cyclic percentages in min sizing properties #10969

Comments

Loirooriol commented Sep 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

bfgeek commented Sep 27, 2024

Uh oh!

Loirooriol commented Oct 23, 2024

Uh oh!

Loirooriol commented Dec 24, 2024

Uh oh!

astearns commented Feb 19, 2025

Uh oh!

Loirooriol commented Sep 27, 2024 •

edited

Loading