Skip to content

[css-align][css-sizing] Should place-self: stretch and width: stretch result in different size for abspos? #11293

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
Loirooriol opened this issue Nov 28, 2024 · 1 comment
Open

[css-align][css-sizing] Should place-self: stretch and width: stretch result in different size for abspos? #11293

Loirooriol opened this issue Nov 28, 2024 · 1 comment
Labels
css-align-3 Current Work css-sizing-4

Comments

@Loirooriol
Copy link
Contributor

Loirooriol commented Nov 28, 2024 •
edited
Loading 

<!DOCTYPE html>
<style>
article { display: inline-block; border: solid; width: 50px; height: 50px; position: relative }
article > * { background: cyan; display: block; position: absolute; top: 10px; left: 10px; }
article > *::before { content: ""; display: block; width: 20px; height: 20px }
.stretch-legacy { width: -webkit-fill-available; width: -moz-available; height: -webkit-fill-available; height: -moz-available }
</style>
<article><canvas width="20" height="20" style="place-self: start"></canvas></article>
<article><canvas width="20" height="20" style="place-self: stretch"></canvas></article>
<article><canvas width="20" height="20" style="place-self: end"></canvas></article>
<article><canvas width="20" height="20" style="width: stretch; height: stretch"></canvas></article>
<article><canvas width="20" height="20" class="stretch-legacy"></canvas></article>
<br>
<article><div style="place-self: start"></div></article>
<article><div style="place-self: stretch"></div></article>
<article><div style="place-self: end"></div></article>
<article><div style="width: stretch; height: stretch"></div></article>
<article><div class="stretch-legacy"></div></article>
Blink
WebKit
Gecko
Servo

All browsers exhibit some differences between a stretch self-alignment vs a stretch size (or vendor-prefixed equivalent).

But the spec implies otherwise: https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing

Formally, its behavior is the same as specifying an automatic size together with a self-alignment property value of stretch (in the relevant axis), except that the resulting box, which can end up not exactly fitting its alignment container, can be subsequently aligned by its actual self-alignment property value.

I plan to implement the spec in Servo, it's easier to have a single stretch behavior rather than doing different things depending on the property.
@Loirooriol
Copy link
Contributor Author

So after thinking more, what browsers do actually makes sense. As per the steps I described in #11242 (comment)

  • For width: stretch

    1. Resolve right: auto to 0px to get a tentative IMCB which is 40px wide
    2. Size the abspos into that tentative IMCB, treating an automatic size as fit-content. So in this case, we stretch to the 40px.
    3. Get rid of the tentative IMCB
    4. Resolve right: auto to whatever makes the actual IMCB be as big as (2), i.e. right: 0px
    5. Assert: sizing the abspos into the actual IMCB from (4), treating an automatic size as fit-content, produces the same size as (2)

  • For justify-self: stretch

    1. Resolve right: auto to 0px to get a tentative IMCB which is 40px wide
    2. Size the abspos into that tentative IMCB, treating an automatic size as fit-content. So in this case, clamp(20px, 40px, 20px) = 20px wide.
    3. Get rid of the tentative IMCB
    4. Resolve right: auto to whatever makes the actual IMCB be as big as (2), i.e. right: 20px
    5. Assert: sizing the abspos into the actual IMCB from (4), treating an automatic size as fit-content, produces the same size as (2). Effectively, clamp(20px, 20px, 20px) = 20px.

@Loirooriol Loirooriol mentioned this issue Mar 10, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-align-3 Current Work css-sizing-4
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Loirooriol