W3C home > Mailing lists > Public > public-css-commits@w3.org > February 2012

csswg/css3-layout new.html,1.7,1.8

From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
Date: Fri, 17 Feb 2012 01:21:47 +0000
To: public-css-commits@w3.org
Message-Id: <E1RyCWB-00087E-UL@lionel-hutz.w3.org>
Update of /sources/public/csswg/css3-layout
In directory hutz:/tmp/cvs-serv31182

Modified Files:
	new.html 
Log Message:
Generated. Do not edit!

Index: new.html
===================================================================
RCS file: /sources/public/csswg/css3-layout/new.html,v
retrieving revision 1.7
retrieving revision 1.8
diff -u -d -r1.7 -r1.8
--- new.html	15 Feb 2012 13:35:56 -0000	1.7
+++ new.html	17 Feb 2012 01:21:45 -0000	1.8
@@ -36,14 +36,14 @@
 
    <h1>CSS Grid Template Module</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 15 February
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 17 February
     2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a
-     href="http://www.w3.org/TR/2012/ED-css3-grid-template-20120215/">http://www.w3.org/TR/2012/ED-css3-grid-template-20120215/</a>
+     href="http://www.w3.org/TR/2012/ED-css3-grid-template-20120217/">http://www.w3.org/TR/2012/ED-css3-grid-template-20120217/</a>
      
 
     <dt>Latest version:
@@ -224,27 +224,21 @@
 
      <li><a href="#default-slots"><span class=secno>3.5. </span>Default
       slots</a>
-
-     <li><a href="#track-sizing"><span class=secno>3.6. </span> Specifying
-      the size of grid tracks</a>
       <ul class=toc>
-       <li><a href="#fraction-values-fr"><span class=secno>3.6.1. </span>
+       <li><a href="#fraction-values-fr"><span class=secno>3.5.1. </span>
         Fraction Values: &lsquo;<code class=property>fr</code>&rsquo;</a>
 
        <li><a href="#computed-values-grid-rows-and-columns"><span
-        class=secno>3.6.2. </span> &lsquo;<code
+        class=secno>3.5.2. </span> &lsquo;<code
         class=css>getComputedStyle()</code>&rsquo; values for &lsquo;<code
         class=property>grid-rows</code>&rsquo; and &lsquo;<code
         class=property>grid-columns</code>&rsquo;</a>
       </ul>
 
-     <li><a href="#slot-widths"><span class=secno>3.7. </span> Calculating
-      the widths of the slots</a>
-
-     <li><a href="#slot-heights"><span class=secno>3.8. </span> Computing the
-      height of the slots</a>
+     <li><a href="#slot-sizes"><span class=secno>3.6. </span> Calculating the
+      widths and heights of the slots</a>
 
-     <li><a href="#grid-shorthand"><span class=secno>3.9. </span> The
+     <li><a href="#grid-shorthand"><span class=secno>3.7. </span> The
       &lsquo;<code class=property>grid</code>&rsquo; shorthand property</a>
     </ul>
 
@@ -955,6 +949,34 @@
    <a href="http://www.w3.org/TR/css3-multicol/#multi-column-element"><dfn
    id=multi-column-element.>multi-column element.</dfn></a>
 
+  <p><a href="#CSS3-WRITING-MODES"
+   rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a>
+   defines the <dfn id=writing-mode>writing-mode</dfn> property, which
+   defines when elements have a <dfn id=vertical-writing-mode>vertical
+   writing mode</dfn> (text lines are vertical) or a <dfn
+   id=horizontal-writing-mode>horizontal writing mode</dfn> (text lines are
+   horizontal). For brevity, we refer to the former as a <dfn
+   id=vertical-element title="vertical|vertical element">vertical
+   element</dfn> and to the latter as a <dfn id=horizontal-element.
+   title="horizontal|horizontal element">horizontal element.</dfn>
+
+  <p><a href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>
+   defines the intrinsic sizes of boxes.
+
+  <p>Following <a href="#CSS3-WRITING-MODES"
+   rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a> and
+   <a href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>, we
+   define the <dfn id=inline-dimension>inline dimension</dfn> of a box,
+   element or slot as meaning either its width or height, depending on
+   whether it is <a href="#horizontal-element."><em>horizontal</em></a> or <a
+   href="#vertical-element"><em>vertical,</em></a> respectively. And
+   likewise: the <dfn id=block-dimension>block dimension</dfn> of a box,
+   element or slot <em>at a given inline dimension</em> is its size in the
+   perpendicular dimension.
+
+  <p>&lsquo;<code class=property>Direction</code>&rsquo; is defined in <a
+   href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
+
   <h3 id=values><span class=secno>1.8. </span> Values</h3>
 
   <p>This specification follows the <a
@@ -1198,6 +1220,42 @@
    block elements as children, such as blocks, inline blocks or table cells,
    but not inline elements or replaced elements.
 
+  <p>The <dfn id=number-of-columns>number of columns</dfn> of a <a
+   href="#grid-element1">grid element</a> is defined as follows:
+
+  <ol>
+   <li>If &lsquo;<a href="#grid-template"><code
+    class=property>grid-template</code></a>&rsquo; is not &lsquo;<code
+    class=property>none</code>&rsquo;, it determines the number of columns.
+
+   <li>Otherwise, if &lsquo;<a href="#grid-columns"><code
+    class=property>grid-columns</code></a>&rsquo; is not &lsquo;<code
+    class=property>auto</code>&rsquo;, the number of columns is equal to the
+    number of <a href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a>
+    values in &lsquo;<a href="#grid-columns"><code
+    class=property>grid-columns</code></a>&rsquo;.
+
+   <li>Otherwise, the grid has one column.
+  </ol>
+
+  <p>The <dfn id=number-of-rows>number of rows</dfn> of a <a
+   href="#grid-element1">grid element</a> is defined as follows:
+
+  <ol>
+   <li>If &lsquo;<a href="#grid-template"><code
+    class=property>grid-template</code></a>&rsquo; is not &lsquo;<code
+    class=property>none</code>&rsquo;, it determines the number of rows.
+
+   <li>Otherwise, if &lsquo;<a href="#grid-rows"><code
+    class=property>grid-rows</code></a>&rsquo; is not &lsquo;<code
+    class=property>auto</code>&rsquo;, the number of rows is equal to the
+    number of <a href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a>
+    values in &lsquo;<a href="#grid-rows"><code
+    class=property>grid-rows</code></a>&rsquo;.
+
+   <li>Otherwise, the grid has one row.
+  </ol>
+
   <p class=issue>What if an element has both &lsquo;<code
    class=property>columns</code>&rsquo; and &lsquo;<a
    href="#grid-template"><code
@@ -1463,9 +1521,9 @@
 
   <pre class=prod>
 <!-- --><dfn
-   id=lttrack-sizegt>&lt;track-size&gt;</dfn> = <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | * |
-<!-- -->                     <var>&lt;fraction&gt;</var> | <a
-   href="#ltminmaxgt"><var>&lt;minmax&gt;</var></a> | min-content | max-content
+   id=lttrack-sizegt>&lt;track-size&gt;</dfn> = <var>&lt;length&gt;</var> | <var>&lt;percentage&gt;</var> | * | <var>&lt;fraction&gt;</var> |
+<!-- -->  <a
+   href="#ltminmaxgt"><var>&lt;minmax&gt;</var></a> | min-content | max-content | fit-content
 <!-- --><dfn
    id=ltminmaxgt>&lt;minmax&gt;</dfn> = minmax( <a
    href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a> , <a
@@ -1475,24 +1533,14 @@
   <p>Each <a href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a> sets
    the width of a column.
 
-  <p>If an element has <var>N</var> columns, only the first <var>N</var> <a
-   href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a> values are used,
-   the others are ignored. If there are fewer than <var>N</var> values, the
-   missing ones are all assumed to be &lsquo;<code
-   class=css>1fr</code>&rsquo;.
-
-  <p>The number of columns <var>N</var> of a grid is determined as follows:
-
-  <ol>
-   <li>If &lsquo;<a href="#grid-template"><code
-    class=property>grid-template</code></a>&rsquo; is not &lsquo;<code
-    class=property>none</code>&rsquo;, it determines the number of columns.
-
-   <li>Otherwise, the number of columns is equal to the number of <a
-    href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a> values in
-    &lsquo;<a href="#grid-columns"><code
-    class=property>grid-columns</code></a>&rsquo;.
-  </ol>
+  <p>If an element has <a href="#number-of-columns"
+   title="number of columns"><var>N</var> columns,</a> only the first
+   <var>N</var> <a href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a>
+   values are used, the others are ignored. If there are fewer than
+   <var>N</var> values, or if the value is &lsquo;<code
+   class=property>auto</code>&rsquo;, the missing ones are all &lsquo;<code
+   class=css>*</code>&rsquo; <span class=issue>[or &lsquo;<code
+   class=css>1fr</code>&rsquo;]</span>.
 
   <p>Each <a href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a> can be
    one of the following:
@@ -1508,7 +1556,7 @@
     class=property>fr</code>&rsquo;.) A fraction of the remaining space, see
     <a href="#fraction-values-fr">Fraction values</a> below.
 
-   <dt>&lsquo;<code class=css>*</code>&rsquo; (Asterisk)
+   <dt>&lsquo;<code class=css>*</code>&rsquo; (asterisk)
 
    <dd> All columns with a width of &lsquo;<code class=css>*</code>&rsquo;
     have the same width.
@@ -1545,7 +1593,8 @@
     <p class=issue>&lsquo;<code class=css>fit-content</code>&rsquo; is
      normally equivalent to max(min-content, max(max-content,
      fill-available)). This definition doesn't quite make sense here, but
-     should the keyword be the same then?
+     should the keyword be the same then? maybe &lsquo;<code
+     class=css>auto</code>&rsquo;?
   </dl>
 
   <div class=issue> Which is easier, &lsquo;<code class=css>1fr</code>&rsquo;
@@ -1564,6 +1613,41 @@
 
   <p class=issue>Flex?
 
+  <div class=example>
+   <p>The following example:</p>
+
+   <ul>
+    <li>Adds one <a href="#grid-line">Grid Line</a> 100 pixels from the
+     &lsquo;<a href="#start0"><code class=property>start</code></a>&rsquo; of
+     the grid.
+
+    <li>Adds another <a href="#grid-line">Grid Line</a> 1/2 of the remaining
+     space away.
+
+    <li>Adds another <a href="#grid-line">Grid Line</a> whose distance from
+     the prior <a href="#grid-line">Grid Line</a> will be based on the
+     maximum content size of elements occupying the column.
+
+    <li>Adds another <a href="#grid-line">Grid Line</a> whose distance from
+     the prior <a href="#grid-line">Grid Line</a> is based on the minimum
+     content size of all elements occupying the column, or 1/2 the remaining
+     space, whichever is greater.
+   </ul>
+
+   <pre>div { grid-columns: 100px 1fr max-content minmax(min-content, 1fr) }</pre>
+  </div>
+
+  <div class=example>
+   <p>Additional examples of valid <a href="#grid-track">Grid Track</a>
+    definitions:</p>
+
+   <pre>/* examples of valid track definitions */
+<!-- -->grid-rows: 1fr minmax(min-content, 1fr);
+<!-- -->grid-rows: 10px (1fr auto minmax(30%, 1fr))[2];
+<!-- -->grid-rows: (10px);
+<!-- -->grid-rows: calc(4em - 5px)</pre>
+  </div>
+
   <h3 id=grid-row-sizes><span class=secno>3.4. </span> Specifying the height
    of rows: &lsquo;<a href="#grid-rows"><code
    class=property>grid-rows</code></a>&rsquo;</h3>
@@ -1629,6 +1713,14 @@
    the rows of a grid. It takes the same values as &lsquo;<a
    href="#grid-columns"><code class=property>grid-columns</code></a>&rsquo;.
 
+  <p>If an element has <a href="#number-of-rows"
+   title="number of rows"><var>N</var> rows,</a> only the first <var>N</var>
+   <a href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a> values are
+   used, the others are ignored. If there are fewer than <var>N</var> values,
+   or if the value is &lsquo;<code class=property>auto</code>&rsquo;, the
+   missing ones are all &lsquo;<code
+   class=property>fit-content</code>&rsquo;.
+
   <h3 id=default-slots><span class=secno>3.5. </span>Default slots</h3>
 
   <p>Every <a href="#grid-element1">grid element</a> has a <dfn
@@ -1637,8 +1729,8 @@
    the first letter in the template defines the default slot.
 
   <p class=example>For example, if the template is defined by &lsquo;<code
-   class=css>grid-template: "..c" "abb" "abb"</code>&rsquo;, then “c” is
-   the default slot.
+   class=css>grid-template: "..." "..c" "abb" "abb"</code>&rsquo;, then
+   “c” is the default slot.
 
   <p>If the grid has an <a href="#implicit-template"><em>implicit
    template</em></a> (i.e., &lsquo;<a href="#grid-template"><code
@@ -1659,11 +1751,11 @@
    <p>For example, in this document fragment
 
    <pre>
-&lt;DIV STYLE="grid-template: "ab*">
- &lt;IMG STYLE="position: a" SRC="image.png" ALT="Foo">
+&lt;DIV STYLE="grid: 'ab*'">
+ &lt;IMG STYLE="flow: a" SRC="image.png" ALT="Foo">
  This is an
- &lt;EM STYLE="position: *">emphasized&lt;/EM>
- &lt;EM STYLE="position: b">(note well!)&lt;/EM>
+ &lt;EM STYLE="flow: *">emphasized&lt;/EM>
+ &lt;EM STYLE="flow: b">(note well!)&lt;/EM>
  sentence.
  &lt;
 &lt;/DIV>
@@ -1686,112 +1778,7 @@
    </dl>
   </div>
 
-  <h3 id=track-sizing><span class=secno>3.6. </span> Specifying the size of
-   grid tracks</h3>
-
-  <p>Where:
-
-  <dl>
-   <dt>&lt;length&gt;
-
-   <dd> An absolute size as defined by CSS3 Values. <a href="#CSS3VAL"
-    rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>
-
-   <dt>&lt;percentage&gt;
-
-   <dd> Expresses a size for a <a href="#grid-track">Grid Track</a> as a
-    percentage of the <a href="#grid-element1"><i>grid
-    element</i></a>&lsquo;<code class=css>s logical width (for columns) or
-    logical height (for rows). When the width or height of the <a
-    href="#grid-element1"><i>grid element</i></a> is dependent on content,
-    the result is undefined. </code>
-
-   <dt>&lt;fraction&gt;
-
-   <dd> A non-negative <a
-    href="http://www.w3.org/TR/css3-values/#dimension">dimension</a> <a
-    href="#CSS3VAL" rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a> with the
-    unit identifier &rsquo;&lsquo;<code
-    class=property>fr</code>&rsquo;&lsquo;<code class=css>. Each
-    </code>&rsquo;&lsquo;<code
-    class=css>&lt;fraction&gt;</code>&rsquo;&lsquo;<code class=css> value
-    takes a share of the remaining space proportional to its number. See <a
-    href="#fraction-values-fr">fraction values</a> for more details. </code>
-
-   <dt>&rsquo;&lsquo;<code
-    class=property>max-content</code>&rsquo;&lsquo;<code class=css> </code>
-
-   <dd> Refers to the maximum of the max sizes of <a href="#grid-item">Grid
-    Item</a>s occupying the <a href="#grid-track">Grid Track</a>.
-
-   <dt>&rsquo;&lsquo;<code
-    class=property>min-content</code>&rsquo;&lsquo;<code class=css> </code>
-
-   <dd> Refers to the maximum of the min sizes of <i>grid items</i> occupying
-    the <a href="#grid-track">Grid Track</a>.
-
-   <dt>&rsquo;&lsquo;<code class=css>minmax(<var>min</var>,
-    <var>max</var>)</code>&rsquo;&lsquo;<code class=css></code>
-
-   <dd> Defines a size range. The size used must be greater than or equal to
-    <var>min</var> and less than or equal to <var>max</var>. If
-    <var>max</var> &lt; <var>min</var>, then <var>max</var> is ignored and
-    &rsquo;&lsquo;<code class=css>minmax(<var>min</var>,
-    <var>max</var>)</code>&rsquo;&lsquo;<code class=css> is treated as
-    <var>min</var>. </code>
-
-   <dt>&rsquo;&lsquo;<code
-    class=property>fit-content</code>&rsquo;&lsquo;<code class=css></code>
-
-   <dt>
-
-   <dd> Equivalent to &rsquo;&lsquo;<code class=css>minmax(min-content,
-    max-content)</code>&rsquo;&lsquo;<code class=css>. </code>
-  </dl>
-
-  <p class=issue> Consider whether having undefined behavior for
-   percentage-sized tracks in content-sized grids is appropriate. CSS2.1 and
-   CSS3 leave percentage width undefined, although there appears to be
-   consistency between browser implementations.
-
-  <p class=issue> Flex could also be allowed as a sizing function for a <a
-   href="#grid-track">Grid Track</a>.
-
-  <div class=example>
-   <p>The following example:</p>
-
-   <ul>
-    <li>Adds one <a href="#grid-line">Grid Line</a> 100 pixels from the
-     &rsquo;start' of the grid.
-
-    <li>Adds another <a href="#grid-line">Grid Line</a> 1/2 of the remaining
-     space away.
-
-    <li>Adds another <a href="#grid-line">Grid Line</a> whose distance from
-     the prior <a href="#grid-line">Grid Line</a> will be based on the
-     maximum content size of elements occupying the column.
-
-    <li>Adds another <a href="#grid-line">Grid Line</a> whose distance from
-     the prior <a href="#grid-line">Grid Line</a> is based on the minimum
-     content size of all elements occupying the column, or 1/2 the remaining
-     space, whichever is greater.
-   </ul>
-
-   <pre>div { grid-columns: 100px 1fr max-content minmax(min-content, 1fr) }</pre>
-  </div>
-
-  <div class=example>
-   <p>Additional examples of valid <a href="#grid-track">Grid Track</a>
-    definitions:</p>
-
-   <pre>/* examples of valid track definitions */
-<!-- -->grid-rows: 1fr minmax(min-content, 1fr);
-<!-- -->grid-rows: 10px (1fr auto minmax(30%, 1fr))[2];
-<!-- -->grid-rows: (10px);
-<!-- -->grid-rows: calc(4em - 5px)</pre>
-  </div>
-
-  <h4 id=fraction-values-fr><span class=secno>3.6.1. </span> Fraction Values:
+  <h4 id=fraction-values-fr><span class=secno>3.5.1. </span> Fraction Values:
    &lsquo;<code class=property>fr</code>&rsquo;</h4>
 
   <p>Fraction values are new units applicable to the &lsquo;<a
@@ -1832,7 +1819,7 @@
    by each <a href="#grid-track">Grid Track</a>&lsquo;<code class=css>s
    <code>fraction</code> to determine its final size. </code>
 
-  <h4 id=computed-values-grid-rows-and-columns><span class=secno>3.6.2.
+  <h4 id=computed-values-grid-rows-and-columns><span class=secno>3.5.2.
    </span> &rsquo;&lsquo;<code
    class=css>getComputedStyle()</code>&rsquo;&lsquo;<code class=css> values
    for </code>&rsquo;grid-rows' and &lsquo;<a href="#grid-columns"><code
@@ -1855,31 +1842,184 @@
    href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo; or
    grid-columns' property.
 
-  <h3 id=slot-widths><span class=secno>3.7. </span> Calculating the widths of
-   the slots</h3>
+  <h3 id=slot-sizes><span class=secno>3.6. </span> Calculating the widths and
+   heights of the slots</h3>
 
-  <p class=issue>If a slot has a vertical writing mode, then the values
-   &lsquo;<code class=css>max-content</code>&rsquo; and &lsquo;<code
-   class=css>min-content</code>&rsquo; both stand for the <i>block
-   dimension</i> <a href="#CSS3-WRITING-MODES"
-   rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a> of
-   the slot's content.
+  <p>The UA must choose the widths and heights of all columns and rows such
+   that the following constraints are satisfied.
 
-  <p>[Solve set of constraints as in css3-layout]
+  <ul>
+   <li>If the element has an a-priori known content height, then the sum of
+    the heights of all rows must be equal to the element's height.
 
-  <h3 id=slot-heights><span class=secno>3.8. </span> Computing the height of
-   the slots</h3>
+   <li>If the grid element has an a-priori known content width, then the sum
+    of the widths of all columns must be equal to the element's width.
 
-  <p>If a slot has a horizontal writing mode, then the values &lsquo;<code
-   class=css>max-content</code>&rsquo; and &lsquo;<code
-   class=css>min-content</code>&rsquo; both stand for the <em>block
-   dimension</em> <a href="#CSS3-WRITING-MODES"
-   rel=biblioentry>[CSS3-WRITING-MODES]<!--{{!CSS3-WRITING-MODES}}--></a> of
-   the slot's content.
+   <li>Each row whose height is specified as &lsquo;<code
+    class=property>min-content</code>&rsquo;, &lsquo;<code
+    class=property>max-content</code>&rsquo;, or &lsquo;<code
+    class=css>minmax(<var>p</var>,<var>q</var>)</code>&rsquo; must be no
+    higher than the largest intrinsic minimum height, intrinsic preferred
+    height, or <var>q</var>, respectively, of all the vertical slots in the
+    line that span only one row. <span class=note>(Note that &lsquo;<code
+    class=property>fit-content</code>&rsquo; counts as a &lsquo;<code
+    class=css>minmax()</code>&rsquo;)</span>
 
-  <p>[Solve set of constraints as in css3-layout]
+   <li>Each column whose width is specified as &lsquo;<code
+    class=property>min-content</code>&rsquo;, &lsquo;<code
+    class=property>max-content</code>&rsquo;, or &lsquo;<code
+    class=css>minmax(<var>p</var>,<var>q</var>)</code>&rsquo; must be no
+    wider than the largest intrinsic minimum width, intrinsic preferred
+    width, or <var>q</var>, respectively, of all the horizontal slots in the
+    line that span only one column.
 
-  <h3 id=grid-shorthand><span class=secno>3.9. </span> The &lsquo;<a
+   <li>Each row with a height specified as a <var>&lt;length&gt;</var> must
+    have exactly that height.
+
+   <li>Each column with a width specified as a <var>&lt;length&gt;</var> must
+    have exactly that width.
+
+   <li>Each <a href="#vertical-element"><em>vertical</em></a> slot that spans
+    at least one row with a height specified as &lsquo;<code
+    class=property>max-content</code>&rsquo; must be at least as high as the
+    preferred intrinsic height of that slot, as defined in <a href="#CSS3BOX"
+    rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>, plus the slot's
+    vertical padding, border and margin.
+
+   <li>Each <a href="#horizontal-element."><em>horizontal</em></a> slot that
+    spans at least one column with a width specified as &lsquo;<code
+    class=property>max-content</code>&rsquo; must be at least as wide as the
+    preferred intrinsic width of that slot, as defined in <a href="#CSS3BOX"
+    rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>, plus the slot's
+    horizontal padding, border and margin.
+
+   <li>Each <a href="#vertical-element"><em>vertical</em></a> slot that spans
+    at least one row with a height specified as &lsquo;<code
+    class=property>min-content</code>&rsquo; must be at least as high as the
+    preferred minimum height of that slot, as defined in <a href="#CSS3BOX"
+    rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>, plus the slot's
+    vertical padding, border and margin.
+
+   <li>Each <a href="#horizontal-element."><em>horizontal</em></a> slot that
+    spans at least one columns with a height specified as &lsquo;<code
+    class=property>min-content</code>&rsquo; must be at least as wide as the
+    preferred minimum width of that slot, as defined in <a href="#CSS3BOX"
+    rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>, plus the slot's
+    horizontal padding, border and margin.
+
+   <li>All rows with a height specified as &lsquo;<code
+    class=css>*</code>&rsquo; must have the same height.
+
+   <li>All columns with a width specified as &lsquo;<code
+    class=css>*</code>&rsquo; must have the same width.
+
+   <li>For any pair (<var>i</var>,<var>j</var>) of rows whose
+    <var>&lt;row-height&gt;</var> values h<sub>i</sub> and h<sub>j</sub> are
+    both specified in &lsquo;<code class=property>fr</code>&rsquo;, the
+    computed heights H<sub>i</sub> and H<sub>j</sub> must be such that
+    H<sub>i</sub> * h<sub>j</sub> = H<sub>j</sub> * h<sub>i</sub>. (I.e.,
+    their heights are proportional to their number of &lsquo;<code
+    class=property>fr</code>&rsquo; units.)
+
+   <li>For any pair (<var>i</var>,<var>j</var>) of columns whose
+    <var>&lt;col-width&gt;</var> values w<sub>i</sub> and w<sub>j</sub> are
+    both specified in &lsquo;<code class=property>fr</code>&rsquo;, the
+    computed width W<sub>i</sub> and W<sub>j</sub> must be such that
+    W<sub>i</sub> * w<sub>j</sub> = W<sub>j</sub> * W<sub>i</sub>. (I.e.,
+    their widths are proportional to their number of &lsquo;<code
+    class=property>fr</code>&rsquo; units.)
+  </ul>
+
+  <p>If it is impossible to choose such widths and heights, then try without
+   constraint 1. If it is still impossible, try without constraint 2 instead.
+   And, finally, try with both 1 and 2 dropped.
+
+  <p>If there are multiple solutions, and constraint 1 was dropped or did not
+   apply, then the sizes must additionally be chosen such that the sum of the
+   heights of the rows is minimized.
+
+  <p>If there are still multiple solutions, and constraint 2 was dropped or
+   did not apply, then the sizes must additionally be chosen such that the
+   sum of the widths of the columns is minimized.
+
+  <p class=note>The width isn't known a-priori, if, e.g., &lsquo;<code
+   class=property>width</code>&rsquo; is &lsquo;<code
+   class=css>auto</code>&rsquo; and the element is floating, absolutely
+   positioned, inline-block or a child of a block with vertical writing mode.
+   
+
+  <p>An extra step may be necessary in paged media if a page break occurs
+   inside a template (only in the case of an <em>element-based template,</em>
+   see <a href="#element-based-page-break">below</a>). If the template, after
+   computing the width and height, is too big to fit on the current page, and
+   if a suitable break point exists, the part of the template after that
+   break point is put on the next page. The width of the containing block on
+   that page may be different if that page has different margins from the
+   current page (see <a href="#CSS3PAGE"
+   rel=biblioentry>[CSS3PAGE]<!--{{!CSS3PAGE}}--></a>) and thus the width and
+   height of that part of the template must be recalculated in the new
+   context.
+
+  <p class=note>Note that the widths of the columns can be completely
+   determined before laying out any of the contents as long as there are no
+   columns with a <var>&lt;col-width&gt;</var> of &lsquo;<code
+   class=css>min-content</code>&rsquo; or &lsquo;<code
+   class=css>max-content</code>&rsquo;.
+
+  <p class=issue>Do we define restrictions or approximations for slots that
+   are part of a <em>chain</em> to avoid complicated optimization algorithms?
+   
+
+  <p class=note>Note: In a future update of CSS, rows might get a property to
+   specify how the height of that row is adjusted in case the above
+   calculation yields a template that is less tall than the element itself.
+
+  <p>The height of a slot is measured as if the slot had one <dfn
+   id=anonymous-block title="anonymous block of a slot">anonymous block</dfn>
+   as a child that contains all the slot's contents, and both the slot and
+   the anonymous block have a &lsquo;<code
+   class=property>block-flow</code>&rsquo; of &lsquo;<code
+   class=css>tb</code>&rsquo; and the anonymous block's height is computed as
+   a <em>flow root</em> (see “Auto heights for flow roots” in <a
+   href="#CSS3BOX" rel=biblioentry>[CSS3BOX]<!--{{!CSS3BOX}}--></a>).
+   Roughly, this means the height is from the top margin edge of the topmost
+   element to the bottom margin edge of the bottommost element or of the
+   bottommost float.
+
+  <div class=example>
+   <p>This example divides the window in three rows and three columns,
+    separated by 1em of white space. The middle row and the middle column are
+    flexible, the others are fixed at a specific size. The first column is
+    5em wide, the last one 10em.
+
+   <pre>
+&lt;style type="text/css"&gt;
+  body {
+    height: 100%;
+    display: "a   .   b   .   c"  /2em
+             ".   .   .   .   ."  /1em
+             "d   .   e   .   f"
+             ".   .   .   .   ."  /1em
+             "g   .   h   .   i"  /2em
+             5em 1em  *  1em 10em}
+  #logo {position: a}
+  #motto {position: b}
+  #date {position: c}
+  #main {position: e}
+  #adv {position: f}
+  #copy {position: g}
+  #about {position: h}
+&lt;/style&gt;
+&lt;p id=logo&gt;&lt;img src=...
+&lt;p id=motto&gt;Making Web pages since 1862
+&lt;p id=date&gt;August 2, 2004
+...</pre>
+  </div>
+
+  <p class=issue>[Add example with three columns, first two as narrow as
+   possible, third one taking up all remaining space.]
+
+  <h3 id=grid-shorthand><span class=secno>3.7. </span> The &lsquo;<a
    href="#grid"><code class=property>grid</code></a>&rsquo; shorthand
    property</h3>
 
@@ -1900,9 +2040,8 @@
     <tr>
      <th><a href="#values">Value</a>:
 
-     <td>none | [ [ <var>&lt;string&gt;</var> [ / <a
-      href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a> ]? ]+ ] <a
-      href="#lttrack-sizegt"><var>&lt;track-size&gt;</var></a>*
+     <td>none | [ [ <var>&lt;string&gt;</var> [ /
+      <var>&lt;row-height&gt;</var> ]? ]+ ] <var>&lt;col-width&gt;</var>*
 
     <tr>
      <th>Initial:
@@ -1949,6 +2088,35 @@
 
   <p>[Explain how a value is split into values for the three properties.]
 
+  <p>The &lsquo;<a href="#grid"><code class=property>grid</code></a>&rsquo;
+   property is a shorthand for &lsquo;<a href="#grid-template"><code
+   class=property>grid-template</code></a>&rsquo;, &lsquo;<a
+   href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo; and
+   &lsquo;<a href="#grid-columns"><code
+   class=property>grid-columns</code></a>&rsquo;. The value of &lsquo;<a
+   href="#grid-template"><code class=property>grid-template</code></a>&rsquo;
+   is the list of <var>&lt;string&gt;</var> values. The value of &lsquo;<a
+   href="#grid-rows"><code class=property>grid-rows</code></a>&rsquo; is the
+   list of <var>&lt;row-height&gt;</var> values, with any omitted ones set to
+   &lsquo;<code class=property>fit-content</code>&rsquo;. And the value of
+   &lsquo;<a href="#grid-columns"><code
+   class=property>grid-columns</code></a>&rsquo; is the list of
+   <var>&lt;col-width&gt;</var> values, or &lsquo;<code
+   class=property>auto</code>&rsquo; if there are none.
+
+  <div class=example>
+   <p>For example, the rule
+
+   <pre>grid: "a b c" "a b d"/4em * 10em</pre>
+
+   <p>is the same as
+
+   <pre>
+grid-template: "a b c" "a b d";
+grid-rows: fit-content 4em;
+grid-columns: * 10em;</pre>
+  </div>
+
   <h2 id=positioning><span class=secno>4. </span> Positioning slots</h2>
 
   <p>All content positioned into the same slot, whether positioned by name
@@ -2390,7 +2558,8 @@
     on <a href="#vertical-align">vertical alignment</a> and <a
     href="#paged">paged media</a> below)
 
-   <li class=issue>&lsquo;<code class=property>writing-mode</code>&rsquo;
+   <li class=issue>&lsquo;<a href="#writing-mode"><code
+    class=property>writing-mode</code></a>&rsquo;
 
    <li class=issue>&lsquo;<code class=property>direction</code>&rsquo;
 
@@ -2908,16 +3077,6 @@
     W3C Working Draft. (Work in progress.)</dd>
    <!---->
 
-   <dt id=CSS3VAL>[CSS3VAL]
-
-   <dd>H&#229;kon Wium Lie; Tab Atkins; Elika J. Etemad. <a
-    href="http://www.w3.org/TR/2011/WD-css3-values-20110906/"><cite>CSS
-    Values and Units Module Level 3.</cite></a> 6 September 2011. W3C Working
-    Draft. (Work in progress.) URL: <a
-    href="http://www.w3.org/TR/2011/WD-css3-values-20110906/">http://www.w3.org/TR/2011/WD-css3-values-20110906/</a>
-    </dd>
-   <!---->
-
    <dt id=RFC2119>[RFC2119]
 
    <dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
@@ -2998,9 +3157,15 @@
       title="'', slot()''"><strong>5.</strong></a>
     </ul>
 
+   <li>anonymous block of a slot, <a href="#anonymous-block"
+    title="anonymous block of a slot"><strong>3.6.</strong></a>
+
    <li>authoring tool, <a href="#authoring-tool"
     title="authoring tool"><strong>7.2.</strong></a>
 
+   <li>block dimension, <a href="#block-dimension"
+    title="block dimension"><strong>1.7.</strong></a>
+
    <li>&lsquo;<code class=css>center</code>&rsquo;, <a href="#center"
     title="''center''"><strong>6.1.</strong></a>, <a href="#center0"
     title="''center''"><strong>6.1.</strong></a>
@@ -3014,7 +3179,7 @@
     title="''end''"><strong>6.1.</strong></a>, <a href="#end0"
     title="''end''"><strong>6.1.</strong></a>
 
-   <li>grid, <a href="#grid" title=grid><strong>3.9.</strong></a>
+   <li>grid, <a href="#grid" title=grid><strong>3.7.</strong></a>
 
    <li>&lsquo;<a href="#grid"><code class=css>grid</code></a>&rsquo;, <a
     href="#value-def-display--grid" title="''grid''"><strong>3.</strong></a>
@@ -3057,9 +3222,21 @@
    <li>Grid Tracks, <a href="#grid-track"
     title="Grid Tracks"><strong>2.0.1.</strong></a>
 
+   <li>horizontal, <a href="#horizontal-element."
+    title=horizontal><strong>1.7.</strong></a>
+
+   <li>horizontal element, <a href="#horizontal-element."
+    title="horizontal element"><strong>1.7.</strong></a>
+
+   <li>horizontal writing mode, <a href="#horizontal-writing-mode"
+    title="horizontal writing mode"><strong>1.7.</strong></a>
+
    <li>implicit template, <a href="#implicit-template"
     title="implicit template"><strong>3.2.</strong></a>
 
+   <li>inline dimension, <a href="#inline-dimension"
+    title="inline dimension"><strong>1.7.</strong></a>
+
    <li>&lsquo;<code class=css>inline-grid</code>&rsquo;, <a
     href="#value-def-display-inline-grid"
     title="''inline-grid''"><strong>3.</strong></a>
@@ -3070,6 +3247,12 @@
    <li>multi-column element., <a href="#multi-column-element."
     title="multi-column element."><strong>1.7.</strong></a>
 
+   <li>number of columns, <a href="#number-of-columns"
+    title="number of columns"><strong>3.</strong></a>
+
+   <li>number of rows, <a href="#number-of-rows"
+    title="number of rows"><strong>3.</strong></a>
+
    <li>renderer, <a href="#renderer" title=renderer><strong>7.2.</strong></a>
     
 
@@ -3096,6 +3279,18 @@
 
    <li>&lt;track-size&gt;, <a href="#lttrack-sizegt"
     title="&lt;track-size&gt;"><strong>3.3.</strong></a>
+
+   <li>vertical, <a href="#vertical-element"
+    title=vertical><strong>1.7.</strong></a>
+
+   <li>vertical element, <a href="#vertical-element"
+    title="vertical element"><strong>1.7.</strong></a>
+
+   <li>vertical writing mode, <a href="#vertical-writing-mode"
+    title="vertical writing mode"><strong>1.7.</strong></a>
+
+   <li>writing-mode, <a href="#writing-mode"
+    title=writing-mode><strong>1.7.</strong></a>
   </ul>
   <!--end-index-->
 
@@ -3128,8 +3323,8 @@
     <tr>
      <th><a class=property href="#grid">grid</a>
 
-     <td>none | [ [ &lt;string&gt; [ / &lt;track-size&gt; ]? ]+ ]
-      &lt;track-size&gt;*
+     <td>none | [ [ &lt;string&gt; [ / &lt;row-height&gt; ]? ]+ ]
+      &lt;col-width&gt;*
 
      <td>none
 
Received on Friday, 17 February 2012 01:21:52 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 6 January 2015 20:44:50 UTC