Skip to content

Commit d0cd5f5

Browse files
committed
[css-sizing-4] Define some reasonable handling for aspect ratios and intrinsic heights.
1 parent af6f74b commit d0cd5f5

File tree

1 file changed

+31
-2
lines changed

1 file changed

+31
-2
lines changed

css-sizing-4/Overview.bs

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,8 +101,6 @@ Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
101101
at least one of these sizes must be ''width/auto''
102102
for the aspect ratio to have an impact on sizing.
103103

104-
ISSUE: Clarify interaction with intrinsic size keywords like ''width/min-content'' etc.
105-
106104
<div class="example">
107105
This example sets each item in the grid to render as a square,
108106
determining the number of items and their widths by the available space.
@@ -155,6 +153,37 @@ Intrinsic Aspect Ratios: the 'aspect-ratio' property</h3>
155153
This would avoid the need for extra reflows after loading.
156154
</div>
157155

156+
On non-replaced elements with an ''width/auto'' <a>inline size</a>
157+
(or any replaced element whose intrinsic <a>block size</a>
158+
depends on its <a>inline size</a>),
159+
the intrinsic <a>block sizes</a> of the box
160+
are assumed to be zero
161+
when applying 'min-block-size' to the aspect ratio calculations,
162+
and assumed to be infinity
163+
when applying 'max-block-size' to the aspect ratio calculations.
164+
These limits take effect as usual for non-replaced elements
165+
once the <a>inline size</a> is resolved.
166+
167+
<div class="example">
168+
For example, given a (<a>horizontal writing mode</a>) element with
169+
<pre>
170+
width: auto;
171+
min-height: min-content;
172+
aspect-ratio: 1/1;
173+
</pre>
174+
175+
using the aspect ratio to resolve the width
176+
would require knowing the min-content height of the element.
177+
178+
Since for a non-replaced element,
179+
this value is not known until the width is resolved,
180+
we assume the 'min-height' value is zero
181+
while resolving the width.
182+
183+
Then, once the width is known, we resolve the height,
184+
taking into account the ''height/min-content'' minimum.
185+
</div>
186+
158187
<h3 id="from-ratio">
159188
Aspect Ratio Limits Option A: the ''from-ratio''</h3>
160189

0 commit comments

Comments
 (0)