[css-grid] Add repeat(auto, track-list). <http://lists.w3.org/Archives/Public/www-style/2014Oct/0108.html>

Author: fantasai

css-grid/Overview.bs

@@ -830,7 +830,7 @@ Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties</h
 		<dfn>&lt;track-size></dfn>     = minmax( <<track-breadth>> , <<track-breadth>> ) | auto | <<track-breadth>>
 		<dfn>&lt;track-breadth></dfn>  = <<length>> | <<percentage>> | <<flex>> | min-content | max-content
 		<dfn>&lt;line-names></dfn>     = ( <<custom-ident>>* )
-		<dfn>&lt;line-name-list></dfn> = [ <<line-names>> | repeat(<<positive-integer>>, <<line-names>>+) ]+
+		<dfn>&lt;line-name-list></dfn> = [ <<line-names>> | repeat([ <<positive-integer>> | auto ], <<line-names>>+) ]+
 	</pre>
 
 	Where:
@@ -967,20 +967,30 @@ Named Grid Lines: the ''(<<custom-ident>>*)'' syntax</h4>
 <h4 id='repeat-notation'>
 Repeating Rows and Columns: the ''repeat()'' notation</h4>
 
-	The ''repeat()'' notation represents a repeated fragment of the <a>track list</a>.
-	This is just a syntactic shorthand that allows
-	writing a large number of columns or rows that exhibit a recurring pattern
-	in a more compact form.
+	The ''repeat()'' notation represents a repeated fragment of the <a>track list</a>,
+	allowing a large number of columns or rows that exhibit a recurring pattern
+	to be written in a more compact form.
 	The syntax of the ''repeat()'' notation is:
 
-	<pre class='prod'><dfn>repeat()</dfn> = repeat( <<positive-integer>> , [ <<line-names>>? <<track-size>> ]+ <<line-names>>? )</pre>
+	<pre class='prod'>
+		<dfn>repeat()</dfn> = repeat( <<positive-integer>>, [ <<line-names>>? <<track-size>> ]+ <<line-names>>? ) |
+		           repeat( auto, [ <<line-names>>? [ <<length>> | <<percentage>> ] ]+ <<line-names>>? )
+	</pre>
 
 	The first argument specifies the number of repetitions.
 	The second argument is a <a>track list</a>,
 	which is repeated that number of times.
 	The ''repeat()'' notation cannot be nested;
 	doing so makes the declaration invalid.
 
+	If the number of repetitions is <dfn value for=repeat()>auto</dfn>
+	and the <a>grid container</a> has a definite size in the relevant axis,
+	then the number of repetitions is the largest possible integer 
+	that does not cause the <a>grid</a> to overflow its <a>grid container</a>
+	(treating all tracks as their <a>max track sizing function</a> if that is <a>definite</a> or as zero otherwise).
+	Otherwise, the <a>track list</a> repeats only once.
+	A <<track-list>> with more than one ''repeat()/auto'' ''repeat()'' function is invalid.
+
 	<div class='example'>
 		This example shows two equivalent ways of writing the same grid definition.
 		Both ways produce a grid with a single row and four "main" columns, each 250px wide,

css-grid/Overview.html

@@ -2084,7 +2084,7 @@ <h3 class="heading settled" data-level="5.1" id="track-sizing"><span class="secn
 <dfn data-dfn-type="type" data-export="" id="typedef-track-size">&lt;track-size><a class="self-link" href="#typedef-track-size"></a></dfn>     = minmax( <a class="production" data-link-type="type" href="#typedef-track-breadth">&lt;track-breadth></a> , <a class="production" data-link-type="type" href="#typedef-track-breadth">&lt;track-breadth></a> ) | auto | <a class="production" data-link-type="type" href="#typedef-track-breadth">&lt;track-breadth></a>
 <dfn data-dfn-type="type" data-export="" id="typedef-track-breadth">&lt;track-breadth><a class="self-link" href="#typedef-track-breadth"></a></dfn>  = <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#length-value">&lt;length></a> | <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#percentage-value">&lt;percentage></a> | <a class="production" data-link-type="type" href="#typedef-flex">&lt;flex></a> | min-content | max-content
 <dfn data-dfn-type="type" data-export="" id="typedef-line-names">&lt;line-names><a class="self-link" href="#typedef-line-names"></a></dfn>     = ( <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#identifier-value">&lt;custom-ident></a>* )
-<dfn data-dfn-type="type" data-export="" id="typedef-line-name-list">&lt;line-name-list><a class="self-link" href="#typedef-line-name-list"></a></dfn> = [ <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a> | repeat(<a class="production" data-link-type="type">&lt;positive-integer></a>, <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a>+) ]+
+<dfn data-dfn-type="type" data-export="" id="typedef-line-name-list">&lt;line-name-list><a class="self-link" href="#typedef-line-name-list"></a></dfn> = [ <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a> | repeat([ <a class="production" data-link-type="type">&lt;positive-integer></a> | auto ], <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a>+) ]+
 </pre>
 
 
@@ -2278,15 +2278,16 @@ <h4 class="heading settled" data-level="5.1.2" id="repeat-notation"><span class=
 
 
 
-      <p>The <a class="css" data-link-type="maybe" href="#funcdef-repeat">repeat()</a> notation represents a repeated fragment of the <a data-link-type="dfn" href="#track-list">track list</a>.
-	This is just a syntactic shorthand that allows
-	writing a large number of columns or rows that exhibit a recurring pattern
-	in a more compact form.
+      <p>The <a class="css" data-link-type="maybe" href="#funcdef-repeat">repeat()</a> notation represents a repeated fragment of the <a data-link-type="dfn" href="#track-list">track list</a>,
+	allowing a large number of columns or rows that exhibit a recurring pattern
+	to be written in a more compact form.
 	The syntax of the <a class="css" data-link-type="maybe" href="#funcdef-repeat">repeat()</a> notation is:</p>
 
 
-
-      <pre class="prod"><dfn data-dfn-type="function" data-export="" id="funcdef-repeat">repeat()<a class="self-link" href="#funcdef-repeat"></a></dfn> = repeat( <a class="production" data-link-type="type">&lt;positive-integer></a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-comma">,</a> [ <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> <a class="production" data-link-type="type" href="#typedef-track-size">&lt;track-size></a> ]<a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-one-plus">+</a> <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> )</pre>
+	
+      <pre class="prod"><dfn data-dfn-type="function" data-export="" id="funcdef-repeat">repeat()<a class="self-link" href="#funcdef-repeat"></a></dfn> = repeat( <a class="production" data-link-type="type">&lt;positive-integer></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-comma">,</a> [ <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> <a class="production" data-link-type="type" href="#typedef-track-size">&lt;track-size></a> ]<a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-one-plus">+</a> <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> ) <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a>
+           repeat( auto<a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-comma">,</a> [ <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> [ <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#length-value">&lt;length></a> <a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#comb-one">|</a> <a class="production" data-link-type="type" href="http://dev.w3.org/csswg/css-values-3/#percentage-value">&lt;percentage></a> ] ]<a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-one-plus">+</a> <a class="production" data-link-type="type" href="#typedef-line-names">&lt;line-names></a><a data-link-for="" data-link-type="grammar" href="http://dev.w3.org/csswg/css-values-3/#mult-opt">?</a> )
+</pre>
 
 
 
@@ -2297,6 +2298,16 @@ <h4 class="heading settled" data-level="5.1.2" id="repeat-notation"><span class=
 	doing so makes the declaration invalid.</p>
 
 
+
+      <p>If the number of repetitions is <dfn class="css" data-dfn-for="repeat()" data-dfn-type="value" data-export="" id="valdef-repeat-auto">auto<a class="self-link" href="#valdef-repeat-auto"></a></dfn>
+	and the <a data-link-type="dfn" href="#grid-container">grid container</a> has a definite size in the relevant axis,
+	then the number of repetitions is the largest possible integer 
+	that does not cause the <a data-link-type="dfn" href="#grid">grid</a> to overflow its <a data-link-type="dfn" href="#grid-container">grid container</a>
+	(treating all tracks as their <a data-link-type="dfn" href="#max-track-sizing-function">max track sizing function</a> if that is <a data-link-type="dfn" href="http://dev.w3.org/csswg/css-sizing-3/#definite">definite</a> or as zero otherwise).
+	Otherwise, the <a data-link-type="dfn" href="#track-list">track list</a> repeats only once.
+	A <a class="production css" data-link-type="type" href="#typedef-track-list">&lt;track-list></a> with more than one <a class="css" data-link-for="repeat()" data-link-type="maybe" href="#valdef-repeat-auto">auto</a> <a class="css" data-link-type="maybe" href="#funcdef-repeat">repeat()</a> function is invalid.</p>
+      
+
 
       <div class="example">
 		This example shows two equivalent ways of writing the same grid definition.
@@ -6080,6 +6091,7 @@ <h2 class="no-num heading settled" id="index"><span class="content">Index</span>
       <li>auto
         <ul>
           <li>value for grid-template-columns, grid-template-rows, <a href="#valdef-grid-template-columns-grid-template-rows-auto" title="section 5.1">5.1</a></li>
+          <li>value for repeat(), <a href="#valdef-repeat-auto" title="section 5.1.2">5.1.2</a></li>
           <li>value for &lt;grid-line>, <a href="#grid-placement-auto" title="section 9.2">9.2</a></li>
         </ul>
       </li>