1.1 --- a/css-align/Overview.bs Tue Oct 07 14:06:58 2014 -0700
1.2 +++ b/css-align/Overview.bs Tue Oct 07 15:40:53 2014 -0700
1.3 @@ -13,7 +13,7 @@
1.4 Previous Version: http://www.w3.org/TR/2012/WD-css3-align-20120612/
1.5 Abstract: This module contains the features of <a href="http://www.w3.org/TR/CSS/">CSS</a> relating to the alignment of boxes within their containers in the various CSS box layout models: block layout, table layout, flex layout, and grid layout. (The alignment of text and inline-level content is defined in [[CSS3TEXT]] and [[CSS3LINE]].)
1.6 !Issue Tracking: <a href="http://www.w3.org/Style/CSS/Tracker/products/39">http://www.w3.org/Style/CSS/Tracker/products/39</a>
1.7 -Link Defaults: selectors-3 (dfn) first formatted line, css-flexbox-1 (dfn) flex line, css-multicol-1 (dfn) multi-column element, css-fonts-3 (dfn) first available font, css21 (property) max-width/max-height
1.8 +Link Defaults: selectors-3 (dfn) first formatted line, css-flexbox-1 (dfn) flex line, css-multicol-1 (dfn) multi-column element, css-fonts-3 (dfn) first available font, css21 (property) max-width/max-height/min-width/min-height
1.9 Ignored Terms: orthogonal, block container, table cell, main-axis
1.10 At Risk: ''last-baseline''
1.11 </pre>
1.12 @@ -184,7 +184,7 @@
1.13 </dl>
1.14
1.15 <h3 id='positional-values'>
1.16 -Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self-end'', ''flex-start'', ''flex-end'', ''left'', and ''right'' keywords</h3>
1.17 +Positional Alignment: the ''center'', ''start'', ''end'', ''self-start'', ''self-end'', ''flex-start'', ''flex-end'', ''left'', ''right'', and ''<item-position>/stretch'' keywords</h3>
1.18
1.19 The positional alignment keywords specify a position for an <a>alignment subject</a>
1.20 with respect to its <a>alignment container</a>.
1.21 @@ -198,7 +198,7 @@
1.22
1.23 <pre class='prod'>
1.24 <dfn><item-position></dfn> = center | start | end | self-start | self-end |
1.25 - flex-start | flex-end | left | right;
1.26 + flex-start | flex-end | left | right | stretch;
1.27 <dfn><content-position></dfn> = center | start | end | flex-start | flex-end | left | right;
1.28 </pre>
1.29
1.30 @@ -208,14 +208,14 @@
1.31 <dl dfn-type="value">
1.32 <dt><dfn for="<item-position>, <content-position>">center</dfn>
1.33 <dd>Centers the <a>alignment subject</a> within its <a>alignment container</a>.
1.34 -<!--
1.35 - <dt><dfn>stretch</dfn>
1.36 - <dd>If the 'width' or 'height' (as appropriate) of the <a>alignment subject</a> is ''auto'',
1.37 +
1.38 + <dt><dfn for="<item-position>">stretch</dfn>
1.39 + <dd>If the 'width' or 'height' (as appropriate) of the <a>alignment subject</a> is ''width/auto'',
1.40 its used value is the length necessary to make the <a>alignment subject</a>’s outer size
1.41 as close to the size of the <a>alignment container</a> as possible,
1.42 - while still respecting the constraints imposed by 'min/max-width/height'.
1.43 + while still respecting the constraints imposed by 'min-height'/'max-width'/etc.
1.44 Otherwise, this is equivalent to ''start''.
1.45 --->
1.46 +
1.47 <dt><dfn for="<item-position>, <content-position>">start</dfn>
1.48 <dd>Aligns the <a>alignment subject</a> to be flush with the <a>alignment container</a>’s start edge.
1.49
1.50 @@ -351,7 +351,7 @@
1.51
1.52
1.53 <h3 id='distribution-values'>
1.54 -Distributed Alignment: the ''stretch'', ''space-between'', ''space-around'', and ''space-evenly'' keywords</h3>
1.55 +Distributed Alignment: the ''<content-distribution>/stretch'', ''space-between'', ''space-around'', and ''space-evenly'' keywords</h3>
1.56
1.57 The distribution values are used by 'justify-content' and 'align-content'
1.58 to distribute the items in the <a>alignment subject</a>
1.59 @@ -506,7 +506,7 @@
1.60
1.61 <dt>Flex Containers:
1.62 <dd>
1.63 - ''justify-content/auto'' computes to ''stretch''.
1.64 + ''justify-content/auto'' computes to ''<content-distribution>/stretch''.
1.65
1.66 The <a>alignment container</a> is the <a>flex container</a>’s content box.
1.67 For 'justify-content', the <a>alignment subject</a> is the <a>flex items</a> in each <a>flex line</a>;
1.68 @@ -514,13 +514,13 @@
1.69
1.70 The 'align-content' property applies along the <a>cross axis</a>.
1.71 The 'justify-content' property applies along the <a>main axis</a>,
1.72 - but ''stretch'' behaves as ''flex-start''.
1.73 + but ''<content-distribution>/stretch'' behaves as ''flex-start''.
1.74
1.75 See [[!CSS3-FLEXBOX]] for details.
1.76
1.77 <dt>Grid Containers:
1.78 <dd>
1.79 - ''justify-content/auto'' computes to ''start'', and ''stretch'' behaves like ''start''.
1.80 + ''justify-content/auto'' computes to ''start'', and ''<content-distribution>/stretch'' behaves like ''start''.
1.81
1.82 The <a>alignment container</a> is the <a>grid container</a>’s content box.
1.83 The <a>alignment subject</a> is the bounds of the <a>grid</a>.
1.84 @@ -556,14 +556,14 @@
1.85 A <a>flex item</a> participates in first (last) <a>baseline content-alignment</a>
1.86 in its flex line if
1.87 its computed 'align-content' is ''baseline'' (''last-baseline'')
1.88 - and its computed 'align-self' is ''stretch'' or ''start'' (''end'').
1.89 + and its computed 'align-self' is ''<item-position>/stretch'' or ''start'' (''end'').
1.90
1.91 <dt>Grid Items:
1.92 <dd>
1.93 A <a>grid item</a> participates in first (last) <a>baseline content-alignment</a>
1.94 in either its row or column (whichever matches its <a>inline axis</a>)
1.95 if its computed 'align-content' is ''baseline'' (''last-baseline''),
1.96 - and its computed 'align-self' or 'justify-self' (whichever affects its <a>block axis</a>) is ''stretch'' or ''start'' (''end'').
1.97 + and its computed 'align-self' or 'justify-self' (whichever affects its <a>block axis</a>) is ''<item-position>/stretch'' or ''start'' (''end'').
1.98 </dl>
1.99
1.100 If a box spans multiple <a>shared alignment contexts</a>,
1.101 @@ -613,7 +613,7 @@
1.102
1.103 <pre class="propdef">
1.104 Name: justify-self
1.105 - Value: auto | ''stretch'' | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ]
1.106 + Value: auto | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ]
1.107 Initial: auto
1.108 Applies to: block-level boxes, absolutely-positioned boxes, and grid items
1.109 Inherited: no
1.110 @@ -628,7 +628,7 @@
1.111 <a href="#alignment-values">as described by its alignment value</a>.
1.112
1.113 The <dfn value for="justify-self">auto</dfn> keyword computes to
1.114 - ''stretch'' on absolutely-positioned elements,
1.115 + ''<item-position>/stretch'' on absolutely-positioned elements,
1.116 and to the computed value of 'justify-items' on the parent
1.117 (minus any ''legacy'' keywords) on all other boxes.
1.118
1.119 @@ -652,7 +652,7 @@
1.120 are ignored in favor of alignment as specified here
1.121 and the used value of the offset properties are not adjusted to correct for the over-constraint.
1.122
1.123 - The ''stretch'' value is equivalent to ''start'' on block-level boxes.
1.124 + The ''<item-position>/stretch'' value is equivalent to ''start'' on block-level boxes.
1.125
1.126 This property does not apply to floats.
1.127
1.128 @@ -663,7 +663,7 @@
1.129
1.130 When neither margin in this dimension is ''margin/auto''
1.131 and neither offset property in this dimension is ''top/auto'',
1.132 - values other than ''stretch'' cause <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">non-replaced absolutely-positioned boxes</a>
1.133 + values other than ''<item-position>/stretch'' cause <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">non-replaced absolutely-positioned boxes</a>
1.134 to use shrink-to-fit sizing for calculating ''width/auto'' measures,
1.135 and 'justify-self' dictates alignment as follows:
1.136
1.137 @@ -677,7 +677,7 @@
1.138 are ignored in favor of alignment as specified here
1.139 and the used value of the offset properties are not adjusted to correct for the over-constraint.
1.140
1.141 - The ''stretch'' keyword is equivalent to ''start'' on replaced absolutely-positioned boxes.
1.142 + The ''<item-position>/stretch'' keyword is equivalent to ''start'' on replaced absolutely-positioned boxes.
1.143 (This is because CSS 2.1 does not stretch replaced elements to fit into fixed offsets.)
1.144
1.145 <dt>Table Cells:
1.146 @@ -701,7 +701,7 @@
1.147 </dl>
1.148
1.149 <p class='issue'>
1.150 - Should we make ''stretch'' actually work on block-level/abspos replaced boxes?
1.151 + Should we make ''<item-position>/stretch'' actually work on block-level/abspos replaced boxes?
1.152 To maintain legacy compat, this requires adding a new value (named ''normal''?)
1.153 which has the current behavior of stretching non-replaced boxes and start-aligning replaced ones.
1.154
1.155 @@ -719,7 +719,7 @@
1.156
1.157 <pre class="propdef">
1.158 Name: align-self
1.159 - Value: auto | ''stretch'' | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ]
1.160 + Value: auto | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ]
1.161 Initial: auto
1.162 Applies to: block-level boxes
1.163 Inherited: no
1.164 @@ -734,7 +734,7 @@
1.165 <a href="#alignment-values">as described by its alignment value</a>.
1.166
1.167 The <dfn value for="align-self">auto</dfn> keyword computes to
1.168 - ''stretch'' on absolutely-positioned elements,
1.169 + ''<item-position>/stretch'' on absolutely-positioned elements,
1.170 and to the computed value of 'align-items' on the parent
1.171 (minus any ''legacy'' keywords) on all other boxes.
1.172
1.173 @@ -753,7 +753,7 @@
1.174
1.175 When neither margin in this dimension is ''margin/auto''
1.176 and neither offset property in this dimension is ''top/auto'',
1.177 - values other than ''stretch'' cause <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">non-replaced absolutely-positioned boxes</a>
1.178 + values other than ''<item-position>/stretch'' cause <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">non-replaced absolutely-positioned boxes</a>
1.179 to use shrink-to-fit sizing for calculating ''width/auto'' measures,
1.180 and 'align-self' dictates alignment as follows:
1.181
1.182 @@ -767,7 +767,7 @@
1.183 are ignored in favor of alignment as specified here
1.184 and the used value of the offset properties are not adjusted to correct for the over-constraint.
1.185
1.186 - The ''stretch'' keyword is equivalent to ''start'' on replaced absolutely-positioned boxes.
1.187 + The ''<item-position>/stretch'' keyword is equivalent to ''start'' on replaced absolutely-positioned boxes.
1.188 (This is because CSS 2.1 does not stretch replaced elements to fit into fixed offsets.)
1.189
1.190 <dt>Table Cells:
1.191 @@ -844,7 +844,7 @@
1.192
1.193 <pre class="propdef">
1.194 Name: justify-items
1.195 - Value: auto | ''stretch'' | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ] | [ legacy && [ ''left'' | ''right'' | ''center'' ] ]
1.196 + Value: auto | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ] | [ legacy && [ ''left'' | ''right'' | ''center'' ] ]
1.197 Initial: auto
1.198 Applies to: block containers, flex containers, and grid containers
1.199 Inherited: no
1.200 @@ -868,7 +868,7 @@
1.201 Otherwise, ''justify-items/auto'' computes to:
1.202
1.203 <ul>
1.204 - <li>''stretch'' for flex containers and grid containers
1.205 + <li>''<item-position>/stretch'' for flex containers and grid containers
1.206 <li>''start'' for everything else
1.207 </ul>
1.208
1.209 @@ -887,7 +887,7 @@
1.210
1.211 <pre class="propdef">
1.212 Name: align-items
1.213 - Value: auto | ''stretch'' | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ]
1.214 + Value: auto | <<baseline-position>> | [ <<item-position>> && <<overflow-position>>? ]
1.215 Initial: auto
1.216 Applies to: block-level elements
1.217 Inherited: no
1.218 @@ -908,7 +908,7 @@
1.219 Computes to:
1.220
1.221 <ul>
1.222 - <li>''stretch'' for flex containers and grid containers
1.223 + <li>''<item-position>/stretch'' for flex containers and grid containers
1.224 <li>''start'' for everything else
1.225 </ul>
1.226 </dl>
