Skip to content

Commit c372e95

Browse files
committed
[css-sizing] Rename fill-available sizing to stretch-fit sizing, to match new keyword.
1 parent 2eda98a commit c372e95

File tree

7 files changed

+41
-42
lines changed

7 files changed

+41
-42
lines changed

css-align/Overview.bs

+2-2
Original file line numberDiff line numberDiff line change
@@ -991,7 +991,7 @@ Inline/Main-Axis Alignment: the 'justify-self' property</h3>
991991

992992
If the box has non-''top/auto'' offsets in this axis,
993993
and either 'margin' in this axis is ''margin/auto'',
994-
an ''width/auto'' 'width' ('height', for <a>vertical writing modes</a>) is treated as ''fill-available''
994+
an ''width/auto'' 'width' ('height', for <a>vertical writing modes</a>) is treated as ''stretch''
995995
and ''margin/auto'' margins are treated as zero.
996996
(Otherwise, when 'justify-self' is not ''justify-self/normal'',
997997
''width: auto'' (''height: auto'') is treated as ''width/fit-content''
@@ -1139,7 +1139,7 @@ Block/Cross-Axis Alignment: the 'align-self' property</h3>
11391139
If the box has non-''top/auto'' offsets in this axis,
11401140
and either 'margin' in this axis is ''margin/auto'',
11411141
an ''width/auto'' 'height' ('width', for <a>vertical writing modes</a>)
1142-
is treated as ''fill-available''
1142+
is treated as ''stretch''
11431143
and ''margin/auto'' margins are treated as zero.
11441144
(Otherwise, when 'align-self' is not ''align-self/normal'',
11451145
''height: auto'' (''width: auto'') is treated as ''height/fit-content''

css-break/Overview.bs

+1-1
Original file line numberDiff line numberDiff line change
@@ -834,7 +834,7 @@ Breaking into Varying-size Fragmentainers</h3>
834834
<ul>
835835
<li>
836836
Boxes (including tables) fullfilling layout constraints at their
837-
<i lt='fill-available size'>fill-available</i> or percentage-based size
837+
<i lt='stretch-fit size'>stretch-fit</i> or percentage-based size
838838
may change <i>inline size</i> across pages.
839839
</li>
840840
<li>

css-grid/Overview.bs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1075,7 +1075,7 @@ Grid Items</h2>
10751075
However, the <a>box alignment properties</a> have special effects:
10761076
when 'align-self'/'justify-self' is neither ''justify-self/normal'' nor ''justify-self/stretch'',
10771077
an ''width/auto'' size for the <a>grid item</a> in that axis
1078-
is treated as ''width/fit-content'' instead of as the <a>fill-available size</a>.
1078+
is treated as ''width/fit-content'' instead of as the <a>stretch-fit size</a>.
10791079
See [[#alignment]].
10801080

10811081
Items with an intrinsic ratio follow the same rules,

css-sizing-3/Overview.bs

+16-16
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ Terminology</h2>
8989
a measure of text (without consideration of line-wrapping),
9090
a size of the <a>initial containing block</a>,
9191
or a <<percentage>> or other formula
92-
(such the <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">“fill-available” sizing of non-replaced blocks</a> [[CSS21]])
92+
(such the <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">“stretch-fit” sizing of non-replaced blocks</a> [[CSS21]])
9393
that is resolved solely against <a>definite</a> sizes.
9494

9595
Additionally, the size of the <a>containing block</a> of an absolutely positioned element is always <a>definite</a>
@@ -120,9 +120,9 @@ Terminology</h2>
120120
<span class="issue">What, exactly, is the available space in the inline axis??? What about other formatting models?</span>
121121
-->
122122

123-
<dt><dfn>fill-available fit</dfn>
123+
<dt><dfn>stretch fit</dfn>
124124
<dd>
125-
The <a>fill-available fit</a> into a given size
125+
The <a>stretch fit</a> into a given size
126126
is that size,
127127
minus the element's computed margins (not collapsed, treating ''margin/auto'' as zero),
128128
border, and padding in the given dimension.
@@ -143,9 +143,9 @@ Terminology</h2>
143143
Auto Box Sizes</h3>
144144

145145
<div export>
146-
: <dfn>fill-available size</dfn>
147-
: <dfn>fill-available inline size</dfn>
148-
: <dfn>fill-available block size</dfn>
146+
: <dfn>stretch-fit size</dfn>
147+
: <dfn>stretch-fit inline size</dfn>
148+
: <dfn>stretch-fit block size</dfn>
149149
:: Roughly, the <a>size</a> a box would take
150150
if it filled its <a>available space</a>
151151
in the given axis.
@@ -201,7 +201,7 @@ Auto Box Sizes</h3>
201201
: <dfn>fit-content inline size</dfn>
202202
: <dfn>fit-content block size</dfn>
203203
:: If the <a>available space</a> in a given axis is finite,
204-
equal to <code>min(<a>max-content size</a>, max(<a>min-content size</a>, <a>fill-available size</a>))</code>.
204+
equal to <code>min(<a>max-content size</a>, max(<a>min-content size</a>, <a>stretch-fit size</a>))</code>.
205205
Otherwise, equal to the <a>max-content size</a> in that axis.
206206

207207
Note: This is called the “shrink-to-fit” width in <a href="https://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
@@ -257,7 +257,7 @@ New Keywords for 'width' and 'height'</h3>
257257
<dl dfn-type=value dfn-for="width, min-width, max-width, height, min-height, max-height">
258258
<dt><dfn>stretch</dfn>
259259
<dd>
260-
Use the <a>fill-available inline size</a> or <a>fill-available block size</a>,
260+
Use the <a>stretch-fit inline size</a> or <a>stretch-fit block size</a>,
261261
as appropriate to the writing mode.
262262

263263
NOTE: This is the formula used to calculate ''width/auto'' widths
@@ -282,7 +282,7 @@ New Keywords for 'width' and 'height'</h3>
282282
If specified for the inline axis,
283283
use the <a>max-content inline size</a>
284284
i.e.
285-
<code>min(<a>max-content size</a>, max(<a>min-content size</a>, <a>fill-available size</a>))</code>;
285+
<code>min(<a>max-content size</a>, max(<a>min-content size</a>, <a>stretch-fit size</a>))</code>;
286286
otherwise compute to ''width/auto''.
287287

288288
<dt><dfn>fit-content(<<length-percentage>>)</dfn>
@@ -331,7 +331,7 @@ Column Sizing Keywords</h3>
331331

332332
<dl dfn-type=value dfn-for="column-width">
333333
<dt><dfn>stretch</dfn>
334-
<dd>Specifies the optimal column width as the <a>fill-available inline size</a>
334+
<dd>Specifies the optimal column width as the <a>stretch-fit inline size</a>
335335
of the multi-column element.
336336

337337
<dt><dfn>max-content</dfn>
@@ -344,7 +344,7 @@ Column Sizing Keywords</h3>
344344

345345
<dt><dfn>fit-content</dfn>
346346
<dd>Specifies the optimal column width as
347-
<code>min(<a>max-content inline size</a>, max(<a>min-content inline size</a>, <a>fill-available inline size</a>))</code>.
347+
<code>min(<a>max-content inline size</a>, max(<a>min-content inline size</a>, <a>stretch-fit inline size</a>))</code>.
348348

349349
<dt><dfn>fit-content(<<length-percentage>>)</dfn>
350350
<dd>
@@ -402,16 +402,16 @@ Extrinsic Size Determination</h2>
402402
<dfn export>Extrinsic sizing</dfn> determines sizes based on the context of an element,
403403
without regard for its contents.
404404

405-
<h3 id="fill-available-sizing">
406-
Fill-available Sizing</h3>
405+
<h3 id="stretch-fit-sizing">
406+
Stretch-fit Sizing</h3>
407407

408408
<p>
409-
The inner <a>fill-available inline size</a> of a box is&hellip;
409+
The inner <a>stretch-fit inline size</a> of a box is&hellip;
410410
<ul>
411411
<li>
412412
If the box is the root or is absolutely-positioned, the inline-size of its containing block, else
413413
<li>
414-
<code>max(<a>min-content inline size</a>|0, min(<a>max-content inline size</a>|infinity, <a>inline size</a>|<a>fill-available inline size</a>))</code>
414+
<code>max(<a>min-content inline size</a>|0, min(<a>max-content inline size</a>|infinity, <a>inline size</a>|<a>stretch-fit inline size</a>))</code>
415415
where the sizes are inner inline-sizes of the element establishing the box's <a>containing block</a>,
416416
and where the first value is used if it is <a>definite</a> and the second value otherwise.
417417
</ul>
@@ -421,7 +421,7 @@ Fill-available Sizing</h3>
421421
borders, and padding.
422422

423423
<p>
424-
The <a>fill-available block size</a> of a box is defined analogously,
424+
The <a>stretch-fit block size</a> of a box is defined analogously,
425425
but in the other dimension.
426426

427427
<p class='issue'>

css-sizing/Overview.bs

+18-18
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ Terminology</h2>
9090
a measure of text (without consideration of line-wrapping),
9191
a size of the <a>initial containing block</a>,
9292
or a <<percentage>> or other formula
93-
(such the <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">“fill-available” sizing of non-replaced blocks</a> [[CSS21]])
93+
(such the <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">“stretch-fit” sizing of non-replaced blocks</a> [[CSS21]])
9494
that is resolved solely against <a>definite</a> sizes.
9595

9696
Additionally, the size of the <a>containing block</a> of an absolutely positioned element is always <a>definite</a>
@@ -120,9 +120,9 @@ Terminology</h2>
120120
<span class="issue">What, exactly, is the available space in the inline axis??? What about other formatting models?</span>
121121
-->
122122

123-
<dt><dfn>fill-available fit</dfn>
123+
<dt><dfn>stretch fit</dfn>
124124
<dd>
125-
The <a>fill-available fit</a> into a given size
125+
The <a>stretch fit</a> into a given size
126126
is that size,
127127
minus the element's computed margins (not collapsed, treating ''margin/auto'' as zero),
128128
border, and padding in the given dimension.
@@ -143,9 +143,9 @@ Terminology</h2>
143143
Auto Box Sizes</h3>
144144

145145
<div export>
146-
: <dfn>fill-available size</dfn>
147-
: <dfn>fill-available inline size</dfn>
148-
: <dfn>fill-available block size</dfn>
146+
: <dfn>stretch-fit size</dfn>
147+
: <dfn>stretch-fit inline size</dfn>
148+
: <dfn>stretch-fit block size</dfn>
149149
:: Roughly, the <a>size</a> a box would take
150150
if it filled the <a>available space</a>
151151
in the given axis.
@@ -201,7 +201,7 @@ Auto Box Sizes</h3>
201201
: <dfn>fit-content inline size</dfn>
202202
: <dfn>fit-content block size</dfn>
203203
:: If the <a>available space</a> in a given axis is finite,
204-
equal to <code>min(<a>max-content size</a>, max(<a>min-content size</a>, <a>fill-available size</a>))</code>.
204+
equal to <code>min(<a>max-content size</a>, max(<a>min-content size</a>, <a>stretch-fit size</a>))</code>.
205205
Otherwise, equal to the <a>max-content size</a> in that axis.
206206

207207
Note: This is called the “shrink-to-fit” width in <a href="https://www.w3.org/TR/CSS21/visudet.html#float-width">CSS2.1§10.3.5</a>
@@ -257,7 +257,7 @@ New Keywords for 'width' and 'height'</h3>
257257
<dl dfn-type=value dfn-for="width, min-width, max-width, height, min-height, max-height">
258258
<dt><dfn>stretch</dfn>
259259
<dd>
260-
Use the <a>fill-available inline size</a> or <a>fill-available block size</a>,
260+
Use the <a>stretch-fit inline size</a> or <a>stretch-fit block size</a>,
261261
as appropriate to the writing mode.
262262

263263
NOTE: This is the formula used to calculate ''width/auto'' widths
@@ -282,7 +282,7 @@ New Keywords for 'width' and 'height'</h3>
282282
If specified for the inline axis,
283283
use the <a>max-content inline size</a>
284284
i.e.
285-
<code>min(<a>max-content size</a>, max(<a>min-content size</a>, <a>fill-available size</a>))</code>;
285+
<code>min(<a>max-content size</a>, max(<a>min-content size</a>, <a>stretch-fit size</a>))</code>;
286286
otherwise compute to ''width/auto''.
287287

288288
<dt><dfn>fit-content(<<length-percentage>>)</dfn>
@@ -329,7 +329,7 @@ Column Sizing Keywords</h3>
329329

330330
<dl dfn-type=value dfn-for="column-width">
331331
<dt><dfn>stretch</dfn>
332-
<dd>Specifies the optimal column width as the <a>fill-available inline size</a>
332+
<dd>Specifies the optimal column width as the <a>stretch-fit inline size</a>
333333
of the multi-column element.
334334

335335
<dt><dfn>max-content</dfn>
@@ -342,7 +342,7 @@ Column Sizing Keywords</h3>
342342

343343
<dt><dfn>fit-content</dfn>
344344
<dd>Specifies the optimal column width as
345-
<code>min(<a>max-content inline size</a>, max(<a>min-content inline size</a>, <a>fill-available inline size</a>))</code>.
345+
<code>min(<a>max-content inline size</a>, max(<a>min-content inline size</a>, <a>stretch-fit inline size</a>))</code>.
346346

347347
<dt><dfn>fit-content(<<length-percentage>>)</dfn>
348348
<dd>
@@ -562,16 +562,16 @@ Extrinsic Size Determination</h2>
562562
<dfn export>Extrinsic sizing</dfn> determines sizes based on the context of an element,
563563
without regard for its contents.
564564

565-
<h3 id="fill-available-sizing">
566-
Fill-available Sizing</h3>
565+
<h3 id="stretch-fit-sizing">
566+
Stretch-fit Sizing</h3>
567567

568568
<p>
569-
The inner <a>fill-available inline size</a> of a box is&hellip;
569+
The inner <a>stretch-fit inline size</a> of a box is&hellip;
570570
<ul>
571571
<li>
572572
If the box is the root or is absolutely-positioned, the inline-size of its containing block, else
573573
<li>
574-
<code>max(<a>min-content inline size</a>|0, min(<a>max-content inline size</a>|infinity, <a>inline size</a>|<a>fill-available inline size</a>))</code>
574+
<code>max(<a>min-content inline size</a>|0, min(<a>max-content inline size</a>|infinity, <a>inline size</a>|<a>stretch-fit inline size</a>))</code>
575575
where the sizes are inner inline-sizes of the element establishing the box's <a>containing block</a>,
576576
and where the first value is used if it is <a>definite</a> and the second value otherwise.
577577
</ul>
@@ -581,7 +581,7 @@ Fill-available Sizing</h3>
581581
borders, and padding.
582582

583583
<p>
584-
The <a>fill-available block size</a> of a box is defined analogously,
584+
The <a>stretch-fit block size</a> of a box is defined analogously,
585585
but in the other dimension.
586586

587587
<p class='issue'>
@@ -636,12 +636,12 @@ Changes</h2>
636636
Changes since the <a href="https://www.w3.org/TR/2012/WD-css3-sizing-20120927/">September 2012 Working Draft</a> include:
637637

638638
<ul>
639-
<li>Changed <code>fill-available</code> keyword to <code>fill</code>.
639+
<li>Changed <code>stretch-fit</code> keyword to <code>fill</code>.
640640
<li>Hooked up intrinsic sizes of replaced elements to the <a>default sizing algorithm</a> in [[!CSS3-IMAGES]].
641641
<li>Specified that <a>extrinsic sizing</a> treates ''margin/auto'' margins as zero.
642642
<li>Clarified definition of <a>available space</a>.
643643
<li>Specified that percentages resolved against an intrinsic size of the parent computes falls back to auto sizing.
644-
<li>Fixed bad wording wrt containing blocks in <a>fill-available inline size</a> definition,
644+
<li>Fixed bad wording wrt containing blocks in <a>stretch-fit inline size</a> definition,
645645
and specified that it is calculated <em>after</em> margin collapsing.
646646
<li>Specified that an absolutely-positioned box's containing block is always considered definite.
647647
<li>Improved section on intrinsic sizing of multi-column elements.

css-tables-3/Overview.bs

+1-1
Original file line numberDiff line numberDiff line change
@@ -484,7 +484,7 @@ spec:css22; type:property; text:display
484484

485485
Unlike other block-level boxes, tables do not fill their containing block by default.
486486
When their 'width' computes to <code>auto</code>, they behave as if they had <code>fit-content</code> specified instead.
487-
This is different from most block-level boxes, which behave as if they had <code>fill-available</code> instead.
487+
This is different from most block-level boxes, which behave as if they had <code>stretch</code> instead.
488488

489489
The <dfn id="min-content-width-of-a-table">min-content width of a table</dfn> is
490490
the width required to fit all of its columns min-content widths and its undistributable spaces.

css-writing-modes/Overview.bs

+2-3
Original file line numberDiff line numberDiff line change
@@ -2072,8 +2072,7 @@ Auto-sizing Block Containers in Orthogonal Flows</h4>
20722072

20732073
<dt><var>constraint</var>
20742074
<dd>the <i>inline-axis</i> size
2075-
that would match the box's <i>inline-axis</i> <a
2076-
href="https://www.w3.org/TR/CSS22/box.html#outer-edge">outer edges</a> to the smaller of
2075+
that would <a>stretch fit</a> into to the smaller of
20772076
<ul>
20782077
<li>the <i>available space</i>
20792078
<li>the initial containing block’s <i>size</i>
@@ -2109,7 +2108,7 @@ Auto-sizing Block Containers in Orthogonal Flows</h4>
21092108
If the computed <i>block size</i> is ''height/auto''
21102109
and the specified value of at least one of 'column-count' and 'column-width' was ''column-width/auto'',
21112110
use the box’s <i>block size</i> (if that is <i>definite</i>),
2112-
else the <i>fill-available block size</i> of the box (if that is <i>definite</i>),
2111+
else the <i>stretch-fit block size</i> of the box (if that is <i>definite</i>),
21132112
else the box’s <i>max-content block size</i>.
21142113
Otherwise follow the normal rules for sizing a multi-column element.
21152114
<p class="issue">

0 commit comments

Comments
 (0)