Skip to content

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

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 Sep 27, 2024 · 4 comments
Labels
css-sizing-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

Loirooriol commented Sep 27, 2024

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
Copy link

bfgeek commented Sep 27, 2024

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

@Loirooriol
Copy link
Contributor Author

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

mrobinson added a commit to mrobinson/servo that referenced this issue Oct 23, 2024
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>
mrobinson added a commit to mrobinson/servo that referenced this issue Oct 23, 2024
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>
Loirooriol added a commit to Loirooriol/servo that referenced this issue Oct 24, 2024
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.
servo-wpt-sync pushed a commit to servo/wpt that referenced this issue Oct 24, 2024
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.
Loirooriol added a commit to Loirooriol/servo that referenced this issue Oct 24, 2024
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>
Loirooriol added a commit to Loirooriol/servo that referenced this issue Oct 24, 2024
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>
servo-wpt-sync pushed a commit to servo/wpt that referenced this issue Oct 24, 2024
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>
servo-wpt-sync pushed a commit to servo/wpt that referenced this issue Oct 24, 2024
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>
github-merge-queue bot pushed a commit to servo/servo that referenced this issue Oct 24, 2024
…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>
github-merge-queue bot pushed a commit to servo/servo that referenced this issue Oct 24, 2024
…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>
servo-wpt-sync pushed a commit to web-platform-tests/wpt that referenced this issue Oct 24, 2024
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>
mrobinson added a commit to mrobinson/servo that referenced this issue Oct 24, 2024
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>
github-merge-queue bot pushed a commit to servo/servo that referenced this issue Oct 24, 2024
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>
github-merge-queue bot pushed a commit to servo/servo that referenced this issue Oct 24, 2024
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>
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Oct 26, 2024
…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
i3roly pushed a commit to i3roly/firefox-dynasty that referenced this issue Oct 27, 2024
…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
jamienicol pushed a commit to jamienicol/gecko that referenced this issue Oct 30, 2024
…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
Copy link
Contributor Author

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
image

@Loirooriol Loirooriol moved this from Regular agenda items to FTF agenda items in CSSWG January 2025 meeting Jan 23, 2025
@astearns astearns moved this from FTF agenda items to Friday morning in CSSWG January 2025 meeting Jan 28, 2025
@astearns
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-sizing-3 Current Work
Projects
Status: Friday morning
Development

No branches or pull requests

3 participants