Skip to content

Commit 89e36e7

Browse files
tabatkinstabatkins
committed
[css-align] For *-content, keep auto computing to auto consistently.
1 parent 3ba331a commit 89e36e7

2 files changed

Lines changed: 28 additions & 18 deletions

File tree

‎css-align/Overview.bs‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -447,7 +447,7 @@ Content Distribution: the 'justify-content' and 'align-content' properties</h2>
447447
Inherited: no
448448
Percentages: n/a
449449
Media: visual
450-
Computed value: specified value, except for ''justify-content/auto'' (see prose)
450+
Computed value: specified value
451451
Animatable: no
452452
</pre>
453453

@@ -491,8 +491,6 @@ Content Distribution: the 'justify-content' and 'align-content' properties</h2>
491491

492492
<dt>Flex Containers:
493493
<dd>
494-
''justify-content/auto'' computes to ''<content-distribution>/stretch''.
495-
496494
The <a>alignment container</a> is the <a>flex container</a>’s content box.
497495
For 'justify-content', the <a>alignment subjects</a> are the <a>flex items</a> in each <a>flex line</a>;
498496
for 'align-content', the <a>alignment subjects</a> are the <a>flex lines</a>.
@@ -503,12 +501,16 @@ Content Distribution: the 'justify-content' and 'align-content' properties</h2>
503501
but since flexing in the <a>main axis</a> is controlled by 'flex',
504502
''<content-distribution>/stretch'' computes to ''flex-start''.
505503

504+
''justify-content/auto'' behaves as ''<content-distribution>/stretch''.
505+
506506
See [[!CSS3-FLEXBOX]] for details.
507507

508+
Issue: The Flexbox spec's legacy definition has "stretch" as the initial value,
509+
so this is technically a behavior change.
510+
We can instead "auto" compute to "stretch" for Flexbox if we decide it's necessary for compat.
511+
508512
<dt>Grid Containers:
509513
<dd>
510-
''justify-content/auto'' computes to ''start''.
511-
512514
The <a>alignment container</a> is the <a>grid container</a>’s content box.
513515
The <a>alignment subjects</a> are the <a>grid tracks</a>.
514516

@@ -517,6 +519,8 @@ Content Distribution: the 'justify-content' and 'align-content' properties</h2>
517519
The 'justify-content' property applies along the <a lt="inline axis">inline (row) axis</a>,
518520
aligning the <a>grid columns</a>.
519521

522+
''justify-content/auto'' behaves as ''start''.
523+
520524
See [[!CSS3-GRID-LAYOUT]] for details.
521525
</dl>
522526

‎css-align/Overview.html‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="conten
110110
W3C maintains a <a href="http://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
111111
that page also includes instructions for disclosing a patent.
112112
An individual who has actual knowledge of a patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
113-
<p> This document is governed by the <a href="http://www.w3.org/2014/Process-20140801/" id="w3c_process_revision">1 August 2014 W3C Process Document</a>. </p>
113+
<p> This document is governed by the <a href="http://www.w3.org/2015/Process-20150901/" id="w3c_process_revision">1 September 2015 W3C Process Document</a>. </p>
114114
<p></p>
115115
</div>
116116
<div data-fill-with="at-risk">
@@ -476,7 +476,7 @@ <h2 class="heading settled" data-level="4" id="content-distribution"><span class
476476
<td>visual
477477
<tr>
478478
<th>Computed value:
479-
<td>specified value, except for <a class="css" data-link-type="maybe" href="#valdef-justify-content-auto">auto</a> (see prose)
479+
<td>specified value
480480
<tr>
481481
<th>Animatable:
482482
<td>no
@@ -509,23 +509,26 @@ <h2 class="heading settled" data-level="4" id="content-distribution"><span class
509509
<p><a class="css" data-link-type="maybe" href="#valdef-justify-content-auto">auto</a> behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-start">start</a>.</p>
510510
<dt>Flex Containers:
511511
<dd>
512-
<a class="css" data-link-type="maybe" href="#valdef-justify-content-auto">auto</a> computes to <a class="css" data-link-type="maybe" href="#valdef-content-distribution-stretch">stretch</a>.
513-
<p>The <a data-link-type="dfn" href="#alignment-container">alignment container</a> is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container">flex container</a>’s content box.
512+
The <a data-link-type="dfn" href="#alignment-container">alignment container</a> is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container">flex container</a>’s content box.
514513
For <a class="property" data-link-type="propdesc" href="#propdef-justify-content">justify-content</a>, the <a data-link-type="dfn" href="#alignment-subject">alignment subjects</a> are the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item">flex items</a> in each <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-line">flex line</a>;
515-
for <a class="property" data-link-type="propdesc" href="#propdef-align-content">align-content</a>, the <a data-link-type="dfn" href="#alignment-subject">alignment subjects</a> are the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-line">flex lines</a>.</p>
514+
for <a class="property" data-link-type="propdesc" href="#propdef-align-content">align-content</a>, the <a data-link-type="dfn" href="#alignment-subject">alignment subjects</a> are the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-line">flex lines</a>.
516515
<p>The <a class="property" data-link-type="propdesc" href="#propdef-align-content">align-content</a> property applies along the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#cross-axis">cross axis</a>.</p>
517516
<p>The <a class="property" data-link-type="propdesc" href="#propdef-justify-content">justify-content</a> property applies along the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis">main axis</a>,
518517
but since flexing in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#main-axis">main axis</a> is controlled by <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex">flex</a>, <a class="css" data-link-type="maybe" href="#valdef-content-distribution-stretch">stretch</a> computes to <a class="css" data-link-type="maybe" href="#valdef-self-position-flex-start">flex-start</a>.</p>
518+
<p><a class="css" data-link-type="maybe" href="#valdef-justify-content-auto">auto</a> behaves as <a class="css" data-link-type="maybe" href="#valdef-content-distribution-stretch">stretch</a>.</p>
519519
<p>See <a data-link-type="biblio" href="#biblio-css3-flexbox">[CSS3-FLEXBOX]</a> for details.</p>
520+
<p class="issue" id="issue-e1a35e68"><a class="self-link" href="#issue-e1a35e68"></a> The Flexbox spec’s legacy definition has "stretch" as the initial value,
521+
so this is technically a behavior change.
522+
We can instead "auto" compute to "stretch" for Flexbox if we decide it’s necessary for compat.</p>
520523
<dt>Grid Containers:
521524
<dd>
522-
<a class="css" data-link-type="maybe" href="#valdef-justify-content-auto">auto</a> computes to <a class="css" data-link-type="maybe" href="#valdef-self-position-start">start</a>.
523-
<p>The <a data-link-type="dfn" href="#alignment-container">alignment container</a> is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container">grid container</a>’s content box.
524-
The <a data-link-type="dfn" href="#alignment-subject">alignment subjects</a> are the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-track">grid tracks</a>.</p>
525+
The <a data-link-type="dfn" href="#alignment-container">alignment container</a> is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container">grid container</a>’s content box.
526+
The <a data-link-type="dfn" href="#alignment-subject">alignment subjects</a> are the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-track">grid tracks</a>.
525527
<p>The <a class="property" data-link-type="propdesc" href="#propdef-align-content">align-content</a> property applies along the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#block-axis">block (column) axis</a>,
526528
aligning the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-row">grid rows</a>.
527529
The <a class="property" data-link-type="propdesc" href="#propdef-justify-content">justify-content</a> property applies along the <a data-link-type="dfn" href="https://drafts.csswg.org/css-writing-modes-3/#inline-axis">inline (row) axis</a>,
528530
aligning the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-column">grid columns</a>.</p>
531+
<p><a class="css" data-link-type="maybe" href="#valdef-justify-content-auto">auto</a> behaves as <a class="css" data-link-type="maybe" href="#valdef-self-position-start">start</a>.</p>
529532
<p>See <a data-link-type="biblio" href="#biblio-css3-grid-layout">[CSS3-GRID-LAYOUT]</a> for details.</p>
530533
</dl>
531534
<h3 class="heading settled" data-level="4.1" id="baseline-align-content"><span class="secno">4.1. </span><span class="content"> Baseline Content-Alignment</span><a class="self-link" href="#baseline-align-content"></a></h3>
@@ -1261,7 +1264,7 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
12611264
<dt id="biblio-css21"><a class="self-link" href="#biblio-css21"></a>[CSS21]
12621265
<dd>Bert Bos; et al. <a href="http://www.w3.org/TR/CSS2">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="http://www.w3.org/TR/CSS2">http://www.w3.org/TR/CSS2</a>
12631266
<dt id="biblio-svg2"><a class="self-link" href="#biblio-svg2"></a>[SVG2]
1264-
<dd>Nikos Andronikos; et al. <a href="http://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 9 July 2015. WD. URL: <a href="http://www.w3.org/TR/SVG2/">http://www.w3.org/TR/SVG2/</a>
1267+
<dd>Nikos Andronikos; et al. <a href="http://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 15 September 2015. WD. URL: <a href="http://www.w3.org/TR/SVG2/">http://www.w3.org/TR/SVG2/</a>
12651268
<dt id="biblio-css-cascade-3"><a class="self-link" href="#biblio-css-cascade-3"></a>[CSS-CASCADE-3]
12661269
<dd>Elika Etemad; Tab Atkins Jr.. <a href="http://www.w3.org/TR/css-cascade-3/">CSS Cascading and Inheritance Level 3</a>. 16 April 2015. CR. URL: <a href="http://www.w3.org/TR/css-cascade-3/">http://www.w3.org/TR/css-cascade-3/</a>
12671270
<dt id="biblio-css-cascade-4"><a class="self-link" href="#biblio-css-cascade-4"></a>[CSS-CASCADE-4]
@@ -1273,7 +1276,7 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
12731276
<dt id="biblio-css-fonts-3"><a class="self-link" href="#biblio-css-fonts-3"></a>[CSS-FONTS-3]
12741277
<dd>John Daggett. <a href="http://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. 3 October 2013. CR. URL: <a href="http://www.w3.org/TR/css-fonts-3/">http://www.w3.org/TR/css-fonts-3/</a>
12751278
<dt id="biblio-css-grid-1"><a class="self-link" href="#biblio-css-grid-1"></a>[CSS-GRID-1]
1276-
<dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="http://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a>. 6 August 2015. WD. URL: <a href="http://www.w3.org/TR/css-grid-1/">http://www.w3.org/TR/css-grid-1/</a>
1279+
<dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="http://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a>. 17 September 2015. WD. URL: <a href="http://www.w3.org/TR/css-grid-1/">http://www.w3.org/TR/css-grid-1/</a>
12771280
<dt id="biblio-css-multicol-1"><a class="self-link" href="#biblio-css-multicol-1"></a>[CSS-MULTICOL-1]
12781281
<dd>CSS Multi-column Layout Module Level 1 URL: <a href="http://www.w3.org/TR/css3-multicol/">http://www.w3.org/TR/css3-multicol/</a>
12791282
<dt id="biblio-css-overflow-3"><a class="self-link" href="#biblio-css-overflow-3"></a>[CSS-OVERFLOW-3]
@@ -1289,7 +1292,7 @@ <h3 class="no-num heading settled" id="normative"><span class="content">Normativ
12891292
<dt id="biblio-css3-flexbox"><a class="self-link" href="#biblio-css3-flexbox"></a>[CSS3-FLEXBOX]
12901293
<dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="http://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a>. 14 May 2015. LCWD. URL: <a href="http://www.w3.org/TR/css-flexbox-1/">http://www.w3.org/TR/css-flexbox-1/</a>
12911294
<dt id="biblio-css3-grid-layout"><a class="self-link" href="#biblio-css3-grid-layout"></a>[CSS3-GRID-LAYOUT]
1292-
<dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="http://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a>. 6 August 2015. WD. URL: <a href="http://www.w3.org/TR/css-grid-1/">http://www.w3.org/TR/css-grid-1/</a>
1295+
<dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="http://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a>. 17 September 2015. WD. URL: <a href="http://www.w3.org/TR/css-grid-1/">http://www.w3.org/TR/css-grid-1/</a>
12931296
<dt id="biblio-rfc2119"><a class="self-link" href="#biblio-rfc2119"></a>[RFC2119]
12941297
<dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
12951298
<dt id="biblio-selectors-3"><a class="self-link" href="#biblio-selectors-3"></a>[SELECTORS-3]
@@ -1327,7 +1330,7 @@ <h2 class="no-num heading settled" id="property-index"><span class="content">Pro
13271330
<td>n/a
13281331
<td>visual
13291332
<td>no
1330-
<td>specified value, except for auto (see prose)
1333+
<td>specified value
13311334
<tr>
13321335
<th scope="row"><a class="css" data-link-type="property" href="#propdef-align-content">align-content</a>
13331336
<td>auto | &lt;baseline-position> | &lt;content-distribution> || [ &lt;overflow-position>? &amp;&amp; &lt;content-position> ]
@@ -1337,7 +1340,7 @@ <h2 class="no-num heading settled" id="property-index"><span class="content">Pro
13371340
<td>n/a
13381341
<td>visual
13391342
<td>no
1340-
<td>specified value, except for auto (see prose)
1343+
<td>specified value
13411344
<tr>
13421345
<th scope="row"><a class="css" data-link-type="property" href="#propdef-justify-self">justify-self</a>
13431346
<td>auto | stretch | &lt;baseline-position> | [ &lt;overflow-position>? &amp;&amp; &lt;self-position> ]
@@ -1390,6 +1393,9 @@ <h2 class="no-num heading settled" id="issues-index"><span class="content">Issue
13901393
like it does on <a class="property" data-link-type="propdesc" href="#propdef-align-content">align-content</a> and <a class="property" data-link-type="propdesc" href="#propdef-justify-content">justify-content</a>?<a href="#issue-3ea08feb"> ↵ </a></div>
13911394
<div class="issue"> Add even more example images. <a href="#issue-77ee454e"> ↵ </a></div>
13921395
<div class="issue"> Transplant example 10 from flexbox. <a href="#issue-8fcc582f"> ↵ </a></div>
1396+
<div class="issue"> The Flexbox spec’s legacy definition has "stretch" as the initial value,
1397+
so this is technically a behavior change.
1398+
We can instead "auto" compute to "stretch" for Flexbox if we decide it’s necessary for compat.<a href="#issue-e1a35e68"> ↵ </a></div>
13931399
<div class="issue"> Make that last paragraph more readable.<a href="#issue-679a9755"> ↵ </a></div>
13941400
<div class="issue"> This needs to be integrated with overflow-anchor, when the property exists,
13951401
so that you get the same behavior whether an elements *starts out* overflowing,

0 commit comments

Comments
 (0)