[css-sizing] How to transfer intrinsic keywords via aspect ratio? #11236
Description
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.