Skip to content
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

[css-sizing] How to transfer intrinsic keywords via aspect ratio? #11236

Open
Loirooriol opened this issue Nov 18, 2024 · 6 comments
Open

[css-sizing] How to transfer intrinsic keywords via aspect ratio? #11236

Loirooriol opened this issue Nov 18, 2024 · 6 comments
Labels
Agenda+ F2F Agenda+ css-sizing-4

Comments

@Loirooriol
Copy link
Contributor

Loirooriol commented Nov 18, 2024 •
edited
Loading

Are these canvases supposed to have different heights? How/why?

<!DOCTYPE html>
<style>canvas { background: cyan; aspect-ratio: 1; vertical-align: top }</style>
<table><tr>
  <td><canvas width="20" height="10" style="height: auto; width: auto"></canvas></td>
  <td><canvas width="20" height="10" style="height: auto; width: min-content"></canvas></td>
  <td><canvas width="20" height="10" style="height: auto; width: fit-content"></canvas></td>
  <td><canvas width="20" height="10" style="height: auto; width: max-content"></canvas></td>
</tr><tr>
  <td><canvas width="20" height="10" style="height: min-content; width: auto"></canvas></td>
  <td><canvas width="20" height="10" style="height: min-content; width: min-content"></canvas></td>
  <td><canvas width="20" height="10" style="height: min-content; width: fit-content"></canvas></td>
  <td><canvas width="20" height="10" style="height: min-content; width: max-content"></canvas></td>
</tr><tr>
  <td><canvas width="20" height="10" style="height: fit-content; width: auto"></canvas></td>
  <td><canvas width="20" height="10" style="height: fit-content; width: min-content"></canvas></td>
  <td><canvas width="20" height="10" style="height: fit-content; width: fit-content"></canvas></td>
  <td><canvas width="20" height="10" style="height: fit-content; width: max-content"></canvas></td>
</tr><tr>
  <td><canvas width="20" height="10" style="height: max-content; width: auto"></canvas></td>
  <td><canvas width="20" height="10" style="height: max-content; width: min-content"></canvas></td>
  <td><canvas width="20" height="10" style="height: max-content; width: fit-content"></canvas></td>
  <td><canvas width="20" height="10" style="height: max-content; width: max-content"></canvas></td>
</tr></table>
Blink, Servo WebKit Gecko

For Servo it would be simpler to treat width: auto as fit-content and make them all 20x20.
But having an exception to avoid transferring an auto preferred inline size isn't a big deal.

I don't understand what Gecko is doing. Is it trying to be consistent with table-layout, which handles auto and max-content different than the others?

Webkit seems to transfer the natural block size when the preferred block size is intrinsic but not auto. Seems a bit weird since typically the inline intrinsic sizes only depend on extrinsic block sizes, not intrinsic block sizes.
@Loirooriol Loirooriol mentioned this issue Nov 18, 2024
Merged
3 tasks
@Loirooriol
Copy link
Contributor Author

Loirooriol commented Dec 11, 2024 •
edited
Loading

Actually, there is interoperability in the non-replaced case:

<!DOCTYPE html>
<style>
div { background: cyan; aspect-ratio: 1; vertical-align: top }
div::before { content: ""; display: block; width: 20px; height: 10px }
</style>
<table><tr>
  <td><div style="height: auto; width: auto"></div></td>
  <td><div style="height: auto; width: min-content"></div></td>
  <td><div style="height: auto; width: fit-content"></div></td>
  <td><div style="height: auto; width: max-content"></div></td>
</tr><tr>
  <td><div style="height: min-content; width: auto"></div></td>
  <td><div style="height: min-content; width: min-content"></div></td>
  <td><div style="height: min-content; width: fit-content"></div></td>
  <td><div style="height: min-content; width: max-content"></div></td>
</tr><tr>
  <td><div style="height: fit-content; width: auto"></div></td>
  <td><div style="height: fit-content; width: min-content"></div></td>
  <td><div style="height: fit-content; width: fit-content"></div></td>
  <td><div style="height: fit-content; width: max-content"></div></td>
</tr><tr>
  <td><div style="height: max-content; width: auto"></div></td>
  <td><div style="height: max-content; width: min-content"></div></td>
  <td><div style="height: max-content; width: fit-content"></div></td>
  <td><div style="height: max-content; width: max-content"></div></td>
</tr></table>

So I propose to so the same in the replaced case.

@astearns astearns moved this to FTF agenda items in CSSWG January 2025 meeting Jan 22, 2025
@astearns astearns moved this from FTF agenda items to Friday morning in CSSWG January 2025 meeting Jan 28, 2025
@bfgeek
Copy link

bfgeek commented Jan 30, 2025

So the reason browsers have the left column behaviour is likely due to SVG.

This issue is more about how to derive the aspect-ratio, which can come from many places.

E.g.
<svg width=20 height=10 viewBox="0 0 1 1">

Here (conceptually) the SVG has an aspect-ratio of 1:1, but then takes the aspect-ratio from the natural-width/height instead.

A rule could be:

The aspect-ratio is derived from:

  • The aspect-ratio property (if specified)
  • else, the natural width/height (if available)
  • else, the natural aspect-ratio (if available)

@Loirooriol
Copy link
Contributor Author

I don't get it, width=20 height=10 sets width: 20px; height: 10px as a presentational hint, so the ratio shouldn't matter?

@bfgeek
Copy link

bfgeek commented Jan 30, 2025

pretend that width/height via. style are set to auto.

@Loirooriol
Copy link
Contributor Author

Do people frequently do that? If the behavior can't change, consider

<!DOCTYPE html>
<style>svg { background: cyan; height: auto }</style>
<svg width=20 height=10 viewBox="0 0 1 1" style="aspect-ratio: auto; width: auto"></svg>
<svg width=20 height=10 viewBox="0 0 1 1" style="aspect-ratio: auto; width: 20px"></svg>
<svg width=20 height=10 viewBox="0 0 1 1" style="aspect-ratio: 1; width: auto"></svg>
<svg width=20 height=10 viewBox="0 0 1 1" style="aspect-ratio: 1; width: 20px"></svg>

I'm getting the same on Gecko, Blink and WebKit:

Given that aspect-ratio: auto and 1 are already different (even if it's a replaced element with a natural ratio of 1), I would tie the special behavior to aspect-ratio being auto (or auto <ratio>?).

@Loirooriol
Copy link
Contributor Author

After further discussion with @emilio , it turns out that <svg width=20 height=10 viewBox="0 0 1 1"> results in a natural aspect ratio of 2, not 1. So when there is a mismatch between aspect-ratio and the natural aspect ratio, it seems fine to obey the former.

@astearns astearns moved this from Friday morning to Friday afternoon in CSSWG January 2025 meeting Jan 31, 2025
Loirooriol added a commit to Loirooriol/servo that referenced this issue Feb 3, 2025
@Loirooriol
layout: Remove special height logic of replaced element with auto width
06dbb66 
When computing the intrinsic block size of a replaced element with a
computed preferred inline size of `auto`, instead of transferring the
final inline size through the aspect ratio, we were only transferring
the min and max constraints.

We did this to match other browsers, but Ian Kilpatrick agreed that this
is a bug and plans to change Blink.

CSSWG issue: w3c/csswg-drafts#11236

Signed-off-by: Oriol Brufau <[email protected]>
@Loirooriol Loirooriol mentioned this issue Feb 3, 2025
Draft
3 tasks
Loirooriol added a commit to Loirooriol/servo that referenced this issue Feb 5, 2025
@Loirooriol
layout: Remove special height logic of replaced element with auto width
cc21f92 
When computing the intrinsic block size of a replaced element with a
computed preferred inline size of `auto`, instead of transferring the
final inline size through the aspect ratio, we were only transferring
the min and max constraints.

We did this to match other browsers, but Ian Kilpatrick agreed that this
is a bug and plans to change Blink.

CSSWG issue: w3c/csswg-drafts#11236

Signed-off-by: Oriol Brufau <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Agenda+ F2F Agenda+ css-sizing-4
Projects
CSSWG January 2025 meeting
Status: Friday afternoon
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bfgeek @Loirooriol