Skip to content

Commit b013975

Browse files
tabatkinstabatkins
committed
[css-flexbox] Rewrite the min-width:auto conditions to be correct.
--HG-- extra : rebase_source : f05fed83f4e9d2c7011b546cc8e103a1c471362a
1 parent 3cb20c3 commit b013975

3 files changed

Lines changed: 124 additions & 47 deletions

File tree

‎css-flexbox/Overview.bs‎

Lines changed: 53 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,6 @@ code.one-line { white-space: pre; }
3838
display: table-cell;
3939
vertical-align: middle;
4040
}
41-
:not(code) var { font-style: normal; color: #005A9C; }
42-
43-
a > i { font-style: normal; }
4441

4542
ol[start="0"] { counter-reset: list -1; }
4643
ol[start="0"],
@@ -446,7 +443,7 @@ Flex Layout Box Model and Terminology</h2>
446443
A <i>flex item</i>’s width or height,
447444
whichever is in the <i>main dimension</i>,
448445
is the item's <dfn>main size</dfn>.
449-
The <i>flex item</i>’s <dfn>main size property</dfn> is
446+
The <i>flex item</i>’s <dfn title="main size property|max main size property|min main size property">main size property</dfn> is
450447
either the 'width' or 'height' property,
451448
whichever is in the <i>main dimension</i>.
452449
</dl>
@@ -471,7 +468,7 @@ Flex Layout Box Model and Terminology</h2>
471468
The width or height of a <i>flex item</i>,
472469
whichever is in the <i>cross dimension</i>,
473470
is the item's <dfn>cross size</dfn>.
474-
The <dfn>cross size property</dfn> is
471+
The <dfn title="cross size property|max cross size property|min cross size property">cross size property</dfn> is
475472
whichever of 'width' or 'height' that is in the <i>cross dimension</i>.
476473
</dl>
477474

@@ -890,24 +887,57 @@ Implied Minimum Size of Flex Items</h3>
890887
<dd>
891888
On a <a>flex item</a> whose 'overflow' is ''overflow/visible'' in the <a>main axis</a>,
892889
when specified on the <a>flex item's</a> main-axis min-size property,
893-
this keyword specifies as the minimum size the smallest of:
890+
the following table gives the minimum size:
894891

895-
<ul>
896-
<li>if 'flex-basis' is ''main-size'',
897-
the computed 'width' ('height'),
898-
if that value is <a>definite</a>.
899-
<!-- Do *not* use flex-basis normally, as it gets set to 0 regularly.
900-
We need another channel for this kind of signal, and width/height works,
901-
since it's consulted by default. -->
902-
<li>the computed 'max-width' ('max-height'), if that value is <a>definite</a>,
903-
<li>if the item has an intrinsic aspect ratio and a <a>definite</a> 'max-height' ('max-width'),
904-
the width (height) calculated from
905-
the aspect ratio and 'max-height' ('max-width').
906-
<li>if the item has an intrinsic aspect ratio and a <a>definite</a> 'height' ('width'),
907-
the width (height) calculated from
908-
the aspect ratio and 'height' ('width').
909-
<li>if the item has no intrinsic aspect ratio, its <a>min-content size</a>,
910-
</ul>
892+
<table class=data>
893+
<colgroup span=2></colgroup>
894+
<colgroup span=1></colgroup>
895+
<thead>
896+
<tr>
897+
<th>Clamped Size
898+
<th>Transferred Size
899+
<th>Minimum Size
900+
<tbody>
901+
<tr>
902+
<td>
903+
<td>
904+
<td><var>content size</var>
905+
<tr>
906+
<td>✓
907+
<td>
908+
<td>min(<var>clamped size</var>, <var>content size</var>)
909+
<tr>
910+
<td>
911+
<td>✓
912+
<td>min(<var>transferred size</var>, <var>content size</var>)
913+
<tr>
914+
<td>✓
915+
<td>✓
916+
<td>min(<var>clamped size</var>, <var>content size</var>)
917+
</table>
918+
919+
Where:
920+
921+
<dl>
922+
<dt><var>clamped size</var>
923+
<dd>
924+
is defined if the item’s 'flex-basis' is ''main-size''
925+
and its computed <a>main size property</a> is <a>definite</a>,
926+
and is that width (clamped by its <a>max main size property</a> if it's <a>definite</a>).
927+
928+
<dt><var>transferred size</var>
929+
<dd>
930+
is defined if the item has an intrinsic aspect ratio
931+
and its computed <a>cross size property</a> is <a>definite</a>,
932+
and is that height (clamped by its <a title="min cross size property">min and max cross size properties</a> if they are <a>definite</a>),
933+
converted through the aspect ratio.
934+
935+
<dt><var>content size</var>
936+
<dd>
937+
is the <a>min-content size</a> in the <a>main axis</a>,
938+
clamped, if it has an aspect ratio, by any <a>definite</a> <a title="min cross size property">min and max cross size properties</a> converted through the aspect ratio,
939+
and then further clamped by the <a>max main size property</a> if that is <a>definite</a>.
940+
</dl>
911941

912942
Otherwise,
913943
this keyword computes to ''0''
@@ -1994,6 +2024,7 @@ Cross-axis Alignment: the 'align-items' and 'align-self' properties</h3>
19942024
<dt><dfn>stretch</dfn>
19952025
<dd>
19962026
If the <i>cross size property</i> of the <i>flex item</i> computes to ''width/auto'',
2027+
and either of the <a>cross-axis</a> margins are ''margin/auto'',
19972028
the <a>flex item</a> is <dfn dfn for=''>stretched</dfn>.
19982029
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,
19992030
while still respecting the constraints imposed by 'min-height'/'min-width'/'max-height'/'max-width'.

‎css-flexbox/Overview.html‎

Lines changed: 57 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -58,9 +58,6 @@
5858
display: table-cell;
5959
vertical-align: middle;
6060
}
61-
:not(code) var { font-style: normal; color: #005A9C; }
62-
63-
a > i { font-style: normal; }
6461

6562
ol[start="0"] { counter-reset: list -1; }
6663
ol[start="0"],
@@ -631,7 +628,7 @@ <h2 class="heading settled" data-level=2 id=box-model><span class=secno>2 </span
631628
A <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s width or height,
632629
whichever is in the <a data-link-type=dfn href=#main-dimension title="main dimension">main dimension</a>,
633630
is the item’s <dfn data-dfn-type=dfn data-export="" id=main-size>main size<a class=self-link href=#main-size></a></dfn>.
634-
The <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s <dfn data-dfn-type=dfn data-export="" id=main-size-property>main size property<a class=self-link href=#main-size-property></a></dfn> is
631+
The <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>’s <dfn data-dfn-type=dfn data-export="" id=main-size-property title="main size property|max main size property|min main size property">main size property<a class=self-link href=#main-size-property></a></dfn> is
635632
either the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-width title=width>width</a> or <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-height title=height>height</a> property,
636633
whichever is in the <a data-link-type=dfn href=#main-dimension title="main dimension">main dimension</a>.
637634
</dl>
@@ -656,7 +653,7 @@ <h2 class="heading settled" data-level=2 id=box-model><span class=secno>2 </span
656653
The width or height of a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a>,
657654
whichever is in the <a data-link-type=dfn href=#cross-dimension title="cross dimension">cross dimension</a>,
658655
is the item’s <dfn data-dfn-type=dfn data-export="" id=cross-size>cross size<a class=self-link href=#cross-size></a></dfn>.
659-
The <dfn data-dfn-type=dfn data-export="" id=cross-size-property>cross size property<a class=self-link href=#cross-size-property></a></dfn> is
656+
The <dfn data-dfn-type=dfn data-export="" id=cross-size-property title="cross size property|max cross size property|min cross size property">cross size property<a class=self-link href=#cross-size-property></a></dfn> is
660657
whichever of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-width title=width>width</a> or <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-height title=height>height</a> that is in the <a data-link-type=dfn href=#cross-dimension title="cross dimension">cross dimension</a>.
661658
</dl>
662659

@@ -1025,22 +1022,57 @@ <h3 class="heading settled" data-level=4.5 id=min-size-auto><span class=secno>4.
10251022
<dd>
10261023
On a <a data-link-type=dfn href=#flex-item title="flex item">flex item</a> whose <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> is <span class=css data-link-for=overflow>visible</span> in the <a data-link-type=dfn href=#main-axis title="main axis">main axis</a>,
10271024
when specified on the <a data-link-type=dfn href=#flex-item title="flex item’s">flex item’s</a> main-axis min-size property,
1028-
this keyword specifies as the minimum size the smallest of:
1025+
the following table gives the minimum size:
10291026

1030-
<ul>
1031-
<li>if <a class=property data-link-type=propdesc href=#propdef-flex-basis title=flex-basis>flex-basis</a> is <a class=css data-link-type=maybe href=#valdef-flex-basis-main-size title=main-size>main-size</a>,
1032-
the computed <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-width title=width>width</a> (<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-height title=height>height</a>),
1033-
if that value is <a data-link-type=dfn href=#definite title=definite>definite</a>.
1034-
1035-
<li>the computed <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> (<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>), if that value is <a data-link-type=dfn href=#definite title=definite>definite</a>,
1036-
<li>if the item has an intrinsic aspect ratio and a <a data-link-type=dfn href=#definite title=definite>definite</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>),
1037-
the width (height) calculated from
1038-
the aspect ratio and <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>).
1039-
<li>if the item has an intrinsic aspect ratio and a <a data-link-type=dfn href=#definite title=definite>definite</a> <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-height title=height>height</a> (<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-width title=width>width</a>),
1040-
the width (height) calculated from
1041-
the aspect ratio and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-height title=height>height</a> (<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css2/visudet.html#propdef-width title=width>width</a>).
1042-
<li>if the item has no intrinsic aspect ratio, its <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-inline-size title="min-content size">min-content size</a>,
1043-
</ul>
1027+
<table class=data>
1028+
<colgroup span=2></colgroup>
1029+
<colgroup span=1></colgroup>
1030+
<thead>
1031+
<tr>
1032+
<th>Clamped Size
1033+
<th>Transferred Size
1034+
<th>Minimum Size
1035+
<tbody>
1036+
<tr>
1037+
<td>
1038+
<td>
1039+
<td><var>content size</var>
1040+
<tr>
1041+
<td>✓
1042+
<td>
1043+
<td>min(<var>clamped size</var>, <var>content size</var>)
1044+
<tr>
1045+
<td>
1046+
<td>✓
1047+
<td>min(<var>transferred size</var>, <var>content size</var>)
1048+
<tr>
1049+
<td>✓
1050+
<td>✓
1051+
<td>min(<var>clamped size</var>, <var>content size</var>)
1052+
</table>
1053+
1054+
<p>Where:</p>
1055+
1056+
<dl>
1057+
<dt><var>clamped size</var>
1058+
<dd>
1059+
is defined if the item’s <a class=property data-link-type=propdesc href=#propdef-flex-basis title=flex-basis>flex-basis</a> is <a class=css data-link-type=maybe href=#valdef-flex-basis-main-size title=main-size>main-size</a>
1060+
and its computed <a data-link-type=dfn href=#main-size-property title="main size property">main size property</a> is <a data-link-type=dfn href=#definite title=definite>definite</a>,
1061+
and is that width (clamped by its <a data-link-type=dfn href=#main-size-property title="max main size property">max main size property</a> if it’s <a data-link-type=dfn href=#definite title=definite>definite</a>).
1062+
1063+
<dt><var>transferred size</var>
1064+
<dd>
1065+
is defined if the item has an intrinsic aspect ratio
1066+
and its computed <a data-link-type=dfn href=#cross-size-property title="cross size property">cross size property</a> is <a data-link-type=dfn href=#definite title=definite>definite</a>,
1067+
and is that height (clamped by its <a data-link-type=dfn href=#cross-size-property title="min cross size property">min and max cross size properties</a> if they are <a data-link-type=dfn href=#definite title=definite>definite</a>),
1068+
converted through the aspect ratio.
1069+
1070+
<dt><var>content size</var>
1071+
<dd>
1072+
is the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-inline-size title="min-content size">min-content size</a> in the <a data-link-type=dfn href=#main-axis title="main axis">main axis</a>,
1073+
clamped, if it has an aspect ratio, by any <a data-link-type=dfn href=#definite title=definite>definite</a> <a data-link-type=dfn href=#cross-size-property title="min cross size property">min and max cross size properties</a> converted through the aspect ratio,
1074+
and then further clamped by the <a data-link-type=dfn href=#main-size-property title="max main size property">max main size property</a> if that is <a data-link-type=dfn href=#definite title=definite>definite</a>.
1075+
</dl>
10441076

10451077
<p>Otherwise,
10461078
this keyword computes to <span class=css>0</span>
@@ -1956,6 +1988,7 @@ <h3 class="heading settled" data-level=8.3 id=align-items-property><span class=s
19561988
<dt><dfn class=css data-dfn-for="align-items align-self" data-dfn-type=value data-export="" id=valdef-align-items-align-self-stretch>stretch<a class=self-link href=#valdef-align-items-align-self-stretch></a></dfn>
19571989
<dd>
19581990
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>auto</span>,
1991+
and either of the <a data-link-type=dfn href=#cross-axis title=cross-axis>cross-axis</a> margins are <span class=css data-link-for=margin>auto</span>,
19591992
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>.
19601993
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,
19611994
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>.
@@ -3781,8 +3814,12 @@ <h2 class="no-num no-ref heading settled" id=index><span class=content>
37813814
<li>main-start, <a href=#main-start title="section 2">2</a>
37823815
<li>max-content cross size, <a href=#max-content-cross-size title="section 9.9">9.9</a>
37833816
<li>max-content main size, <a href=#max-content-main-size title="section 9.9">9.9</a>
3817+
<li>max cross size property, <a href=#cross-size-property title="section 2">2</a>
3818+
<li>max main size property, <a href=#main-size-property title="section 2">2</a>
37843819
<li>min-content cross size, <a href=#min-content-cross-size title="section 9.9">9.9</a>
37853820
<li>min-content main size, <a href=#min-content-main-size title="section 9.9">9.9</a>
3821+
<li>min cross size property, <a href=#cross-size-property title="section 2">2</a>
3822+
<li>min main size property, <a href=#main-size-property title="section 2">2</a>
37863823
<li>multi-line, <a href=#multi-line title="section 6">6</a>
37873824
<li>none, <a href=#valdef-flex-none title="section 7.1">7.1</a>
37883825
<li>normalized free space, <a href=#normalized-free-space title="section 9.7.1">9.7.1</a>

‎css-flexbox/issues-lc-20140325.html‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -352,12 +352,21 @@ <h1>CSS Flexible Box Layout Module Level 1 Disposition of Comments for 2014-03-2
352352
element.innerHTML = null;
353353
var check = document.createElement('input');
354354
check.type = 'checkbox';
355-
check.checked = true;
356-
sheet.addRule('pre.' + className, '');
357-
var rule = sheet.rules[sheet.rules.length - 1];
358-
check.onchange = function (e) {
359-
rule.style.display = this.checked ? 'block' : 'none';
355+
if (className == 'open') {
356+
check.checked = false;
357+
sheet.insertRule('pre:not(.open)' + '{}', sheet.cssRules.length);
358+
check.onchange = function (e) {
359+
rule.style.display = this.checked ? 'none' : 'block';
360+
}
360361
}
362+
else {
363+
check.checked = true;
364+
sheet.insertRule('pre.' + className + '{}', sheet.cssRules.length);
365+
check.onchange = function (e) {
366+
rule.style.display = this.checked ? 'block' : 'none';
367+
}
368+
}
369+
var rule = sheet.cssRules[sheet.cssRules.length - 1];
361370
element.appendChild(check);
362371
element.appendChild(span);
363372
}

0 commit comments

Comments
 (0)