Skip to content

Commit 65703e4

Browse files
tabatkinstabatkins
committed
[css-flexbox] Add a dfn for 'stretched', and use that in the algo properly.
1 parent 23215fb commit 65703e4

2 files changed

Lines changed: 34 additions & 37 deletions

File tree

‎css-flexbox/Overview.bs‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1955,19 +1955,17 @@ Cross-axis Alignment: the 'align-items' and 'align-self' properties</h3>
19551955

19561956
<dt><dfn>stretch</dfn>
19571957
<dd>
1958-
<p>
1959-
If the <i>cross size property</i> of the <i>flex item</i> computes to <a value for=width>auto</a>,
1960-
its used value is the length necessary to make the <i>cross size</i> of the item's margin box as close to the same size as the line as possible,
1961-
while still respecting the constraints imposed by 'min-height'/'min-width'/'max-height'/'max-width'.
1958+
If the <i>cross size property</i> of the <i>flex item</i> computes to ''width/auto'',
1959+
the <a>flex item</a> is <dfn dfn for=''>stretched</dfn>.
1960+
Its used value is the length necessary to make the <i>cross size</i> of the item's margin box as close to the same size as the line as possible,
1961+
while still respecting the constraints imposed by 'min-height'/'min-width'/'max-height'/'max-width'.
19621962

1963-
<p class='note'>
1964-
Note that if the flex container's height is constrained
1965-
this value may cause the contents of the <i>flex item</i>
1966-
to overflow the item.
1963+
Note: If the flex container's height is constrained
1964+
this value may cause the contents of the <i>flex item</i>
1965+
to overflow the item.
19671966

1968-
<p>
1969-
The <i>cross-start</i> margin edge of the <i>flex item</i>
1970-
is placed flush with the <i>cross-start</i> edge of the line.
1967+
The <i>cross-start</i> margin edge of the <i>flex item</i>
1968+
is placed flush with the <i>cross-start</i> edge of the line.
19711969
</dl>
19721970

19731971
<div class='figure'>
@@ -2188,9 +2186,9 @@ Flex Layout Algorithm</h2>
21882186
An <dfn title="indefinite|indefinite size">indefinite size</dfn> is one that is not <i>definite</i>.
21892187

21902188
<p>
2191-
As a special case for handling stretched <i>flex items</i>,
2189+
As a special case for handling <a>stretched</a> <i>flex items</i>,
21922190
if a <i>single-line</i> <i>flex container</i> has a definite cross size,
2193-
the outer <i>cross size</i> of any <i>flex items</i> with ''align-self: stretch''
2191+
the outer <i>cross size</i> of any <a>stretched</a> <i>flex items</i>
21942192
is the flex container's inner cross size (clamped to the <i>flex item</i>’s min and max <i>cross size</i>)
21952193
and is considered <i>definite</i>.
21962194

@@ -2755,13 +2753,13 @@ Flex Factor Focused Algorithm (CR version)</h4>
27552753
</ol>
27562754

27572755
<!--
2758-
████ ██ ██ ████████ ████████ ██████ ████ ████████ ████████ ██████
2756+
████ ██ ██ ████████ ████████ ██████ ████ ████████ ████████ ██████
27592757
██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
2760-
██ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██
2761-
██ ██ ██ ██ ██ ████████ ██████ ██ ██ ██████ ██████
2758+
██ ████ ██ ██ ██ ██ ██ ██ ██ ██ ██
2759+
██ ██ ██ ██ ██ ████████ ██████ ██ ██ ██████ ██████
27622760
██ ██ ████ ██ ██ ██ ██ ██ ██ ██ ██
27632761
██ ██ ███ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
2764-
████ ██ ██ ██ ██ ██ ██████ ████ ████████ ████████ ██████
2762+
████ ██ ██ ██ ██ ██ ██████ ████ ████████ ████████ ██████
27652763
-->
27662764

27672765
<h3 id='intrinsic-sizes'>
@@ -2789,13 +2787,13 @@ Intrinsic Sizes</h3>
27892787
See [[!CSS3-SIZING]] for a definition of the terms in this section.
27902788

27912789
<!--
2792-
████████ ████████ ███ ██████ ██ ██ ████████ ██ ██ ████████ ████ ██ ██ ██████
2793-
██ ██ ██ ██ ██ ██ ██ ███ ███ ██ ███ ██ ██ ██ ███ ██ ██ ██
2794-
██ ██ ██ ██ ██ ██ ████ ████ ██ ████ ██ ██ ██ ████ ██ ██
2790+
████████ ████████ ███ ██████ ██ ██ ████████ ██ ██ ████████ ████ ██ ██ ██████
2791+
██ ██ ██ ██ ██ ██ ██ ███ ███ ██ ███ ██ ██ ██ ███ ██ ██ ██
2792+
██ ██ ██ ██ ██ ██ ████ ████ ██ ████ ██ ██ ██ ████ ██ ██
27952793
██████ ████████ ██ ██ ██ ████ ██ ███ ██ ██████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████
2796-
██ ██ ██ █████████ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ████ ██ ██
2797-
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ███ ██ ██
2798-
██ ██ ██ ██ ██ ██████ ██ ██ ████████ ██ ██ ██ ████ ██ ██ ██████
2794+
██ ██ ██ █████████ ██ ██ ██ ██ ██ ██ ████ ██ ██ ██ ████ ██ ██
2795+
██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ███ ██ ██ ██ ███ ██ ██
2796+
██ ██ ██ ██ ██ ██████ ██ ██ ████████ ██ ██ ██ ████ ██ ██ ██████
27992797
-->
28002798

28012799
<h2 id="pagination">

‎css-flexbox/Overview.html‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1893,19 +1893,17 @@ <h3 class="heading settled heading" data-level=8.3 id=align-items-property><span
18931893

18941894
<dt><dfn class=css-code data-dfn-for="align-items align-self" data-dfn-type=value data-export="" id=valuedef-stretch0>stretch<a class=self-link href=#valuedef-stretch0></a></dfn>
18951895
<dd>
1896-
<p>
1897-
If the <a data-link-type=dfn href=#cross-size-property title="cross size property">cross size property</a> of the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> computes to <a class=css-code data-link-for=width data-link-type=value title=auto>auto</a>,
1898-
its used value is the length necessary to make the <a data-link-type=dfn href=#cross-size title="cross size">cross size</a> of the item’s margin box as close to the same size as the line as possible,
1899-
while still respecting the constraints imposed by <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-min-height title=min-height>min-height</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-min-width title=min-width>min-width</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-max-height title=max-height>max-height</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-max-width title=max-width>max-width</a>.
1896+
If the <a data-link-type=dfn href=#cross-size-property title="cross size property">cross size property</a> of the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> computes to <span class=css data-link-for=width data-link-type=maybe title=auto>auto</span>,
1897+
the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> is <dfn data-dfn-for="" data-dfn-type=dfn data-noexport="" id=stretched>stretched<a class=self-link href=#stretched></a></dfn>.
1898+
Its used value is the length necessary to make the <a data-link-type=dfn href=#cross-size title="cross size">cross size</a> of the item’s margin box as close to the same size as the line as possible,
1899+
while still respecting the constraints imposed by <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-min-height title=min-height>min-height</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-min-width title=min-width>min-width</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-max-height title=max-height>max-height</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-max-width title=max-width>max-width</a>.
19001900

1901-
<p class=note>
1902-
Note that if the flex container’s height is constrained
1903-
this value may cause the contents of the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>
1904-
to overflow the item.
1901+
<p class=note>Note: If the flex container’s height is constrained
1902+
this value may cause the contents of the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>
1903+
to overflow the item.</p>
19051904

1906-
<p>
1907-
The <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> margin edge of the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>
1908-
is placed flush with the <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> edge of the line.
1905+
<p>The <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> margin edge of the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>
1906+
is placed flush with the <a data-link-type=dfn href=#cross-start title=cross-start>cross-start</a> edge of the line.</p>
19091907
</dl>
19101908

19111909
<div class=figure>
@@ -2089,9 +2087,9 @@ <h2 class="heading settled heading" data-level=9 id=layout-algorithm><span class
20892087
An <dfn data-dfn-type=dfn data-noexport="" id=indefinite title="indefinite|indefinite size">indefinite size<a class=self-link href=#indefinite></a></dfn> is one that is not <a data-link-type=dfn href=#definite title=definite>definite</a>.
20902088

20912089
<p>
2092-
As a special case for handling stretched <a data-link-type=dfn href=#flex-item title="flex items">flex items</a>,
2090+
As a special case for handling <a data-link-type=dfn href=#stretched title=stretched>stretched</a> <a data-link-type=dfn href=#flex-item title="flex items">flex items</a>,
20932091
if a <a data-link-type=dfn href=#single-line title=single-line>single-line</a> <a data-link-type=dfn href=#flex-container title="flex container">flex container</a> has a definite cross size,
2094-
the outer <a data-link-type=dfn href=#cross-size title="cross size">cross size</a> of any <a data-link-type=dfn href=#flex-item title="flex items">flex items</a> with <a class=css data-link-type=propdesc href=#propdef-align-self title=align-self>align-self: stretch</a>
2092+
the outer <a data-link-type=dfn href=#cross-size title="cross size">cross size</a> of any <a data-link-type=dfn href=#stretched title=stretched>stretched</a> <a data-link-type=dfn href=#flex-item title="flex items">flex items</a>
20952093
is the flex container’s inner cross size (clamped to the <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s min and max <a data-link-type=dfn href=#cross-size title="cross size">cross size</a>)
20962094
and is considered <a data-link-type=dfn href=#definite title=definite>definite</a>.
20972095

@@ -3721,7 +3719,8 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
37213719
</ul><li>static position, <a href=#flex-item-static-position title="section Unnumbered section">Unnumbered section</a>
37223720
<li>stretch<ul><li>value for align-items, align-self, <a href=#valuedef-stretch0 title="section 8.3">8.3</a>
37233721
<li>value for align-content, <a href=#valuedef-stretch title="section 8.4">8.4</a>
3724-
</ul><li>strut size, <a href=#strut-size title="section 9.4">9.4</a>
3722+
</ul><li>stretched, <a href=#stretched title="section 8.3">8.3</a>
3723+
<li>strut size, <a href=#strut-size title="section 9.4">9.4</a>
37253724
<li>target main size, <a href=#target-main-size title="section 9.7.2">9.7.2</a>
37263725
<li>wrap, <a href=#valuedef-wrap title="section 5.2">5.2</a>
37273726
<li>wrap-reverse, <a href=#valuedef-wrap-reverse title="section 5.2">5.2</a>

0 commit comments

Comments
 (0)