- From: Bert Bos via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 17 Feb 2012 01:21:47 +0000
- To: public-css-commits@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: ‘<code class=property>fr</code>’</a>
<li><a href="#computed-values-grid-rows-and-columns"><span
- class=secno>3.6.2. </span> ‘<code
+ class=secno>3.5.2. </span> ‘<code
class=css>getComputedStyle()</code>’ values for ‘<code
class=property>grid-rows</code>’ and ‘<code
class=property>grid-columns</code>’</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
‘<code class=property>grid</code>’ 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>‘<code class=property>Direction</code>’ 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 ‘<a href="#grid-template"><code
+ class=property>grid-template</code></a>’ is not ‘<code
+ class=property>none</code>’, it determines the number of columns.
+
+ <li>Otherwise, if ‘<a href="#grid-columns"><code
+ class=property>grid-columns</code></a>’ is not ‘<code
+ class=property>auto</code>’, the number of columns is equal to the
+ number of <a href="#lttrack-sizegt"><var><track-size></var></a>
+ values in ‘<a href="#grid-columns"><code
+ class=property>grid-columns</code></a>’.
+
+ <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 ‘<a href="#grid-template"><code
+ class=property>grid-template</code></a>’ is not ‘<code
+ class=property>none</code>’, it determines the number of rows.
+
+ <li>Otherwise, if ‘<a href="#grid-rows"><code
+ class=property>grid-rows</code></a>’ is not ‘<code
+ class=property>auto</code>’, the number of rows is equal to the
+ number of <a href="#lttrack-sizegt"><var><track-size></var></a>
+ values in ‘<a href="#grid-rows"><code
+ class=property>grid-rows</code></a>’.
+
+ <li>Otherwise, the grid has one row.
+ </ol>
+
<p class=issue>What if an element has both ‘<code
class=property>columns</code>’ and ‘<a
href="#grid-template"><code
@@ -1463,9 +1521,9 @@
<pre class=prod>
<!-- --><dfn
- id=lttrack-sizegt><track-size></dfn> = <var><length></var> | <var><percentage></var> | * |
-<!-- --> <var><fraction></var> | <a
- href="#ltminmaxgt"><var><minmax></var></a> | min-content | max-content
+ id=lttrack-sizegt><track-size></dfn> = <var><length></var> | <var><percentage></var> | * | <var><fraction></var> |
+<!-- --> <a
+ href="#ltminmaxgt"><var><minmax></var></a> | min-content | max-content | fit-content
<!-- --><dfn
id=ltminmaxgt><minmax></dfn> = minmax( <a
href="#lttrack-sizegt"><var><track-size></var></a> , <a
@@ -1475,24 +1533,14 @@
<p>Each <a href="#lttrack-sizegt"><var><track-size></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><track-size></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 ‘<code
- class=css>1fr</code>’.
-
- <p>The number of columns <var>N</var> of a grid is determined as follows:
-
- <ol>
- <li>If ‘<a href="#grid-template"><code
- class=property>grid-template</code></a>’ is not ‘<code
- class=property>none</code>’, it determines the number of columns.
-
- <li>Otherwise, the number of columns is equal to the number of <a
- href="#lttrack-sizegt"><var><track-size></var></a> values in
- ‘<a href="#grid-columns"><code
- class=property>grid-columns</code></a>’.
- </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><track-size></var></a>
+ values are used, the others are ignored. If there are fewer than
+ <var>N</var> values, or if the value is ‘<code
+ class=property>auto</code>’, the missing ones are all ‘<code
+ class=css>*</code>’ <span class=issue>[or ‘<code
+ class=css>1fr</code>’]</span>.
<p>Each <a href="#lttrack-sizegt"><var><track-size></var></a> can be
one of the following:
@@ -1508,7 +1556,7 @@
class=property>fr</code>’.) A fraction of the remaining space, see
<a href="#fraction-values-fr">Fraction values</a> below.
- <dt>‘<code class=css>*</code>’ (Asterisk)
+ <dt>‘<code class=css>*</code>’ (asterisk)
<dd> All columns with a width of ‘<code class=css>*</code>’
have the same width.
@@ -1545,7 +1593,8 @@
<p class=issue>‘<code class=css>fit-content</code>’ 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 ‘<code
+ class=css>auto</code>’?
</dl>
<div class=issue> Which is easier, ‘<code class=css>1fr</code>’
@@ -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
+ ‘<a href="#start0"><code class=property>start</code></a>’ 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: ‘<a href="#grid-rows"><code
class=property>grid-rows</code></a>’</h3>
@@ -1629,6 +1713,14 @@
the rows of a grid. It takes the same values as ‘<a
href="#grid-columns"><code class=property>grid-columns</code></a>’.
+ <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><track-size></var></a> values are
+ used, the others are ignored. If there are fewer than <var>N</var> values,
+ or if the value is ‘<code class=property>auto</code>’, the
+ missing ones are all ‘<code
+ class=property>fit-content</code>’.
+
<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 ‘<code
- class=css>grid-template: "..c" "abb" "abb"</code>’, then “c” is
- the default slot.
+ class=css>grid-template: "..." "..c" "abb" "abb"</code>’, then
+ “c” is the default slot.
<p>If the grid has an <a href="#implicit-template"><em>implicit
template</em></a> (i.e., ‘<a href="#grid-template"><code
@@ -1659,11 +1751,11 @@
<p>For example, in this document fragment
<pre>
-<DIV STYLE="grid-template: "ab*">
- <IMG STYLE="position: a" SRC="image.png" ALT="Foo">
+<DIV STYLE="grid: 'ab*'">
+ <IMG STYLE="flow: a" SRC="image.png" ALT="Foo">
This is an
- <EM STYLE="position: *">emphasized</EM>
- <EM STYLE="position: b">(note well!)</EM>
+ <EM STYLE="flow: *">emphasized</EM>
+ <EM STYLE="flow: b">(note well!)</EM>
sentence.
<
</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><length>
-
- <dd> An absolute size as defined by CSS3 Values. <a href="#CSS3VAL"
- rel=biblioentry>[CSS3VAL]<!--{{!CSS3VAL}}--></a>
-
- <dt><percentage>
-
- <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>‘<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><fraction>
-
- <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 ’‘<code
- class=property>fr</code>’‘<code class=css>. Each
- </code>’‘<code
- class=css><fraction></code>’‘<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>’‘<code
- class=property>max-content</code>’‘<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>’‘<code
- class=property>min-content</code>’‘<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>’‘<code class=css>minmax(<var>min</var>,
- <var>max</var>)</code>’‘<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> < <var>min</var>, then <var>max</var> is ignored and
- ’‘<code class=css>minmax(<var>min</var>,
- <var>max</var>)</code>’‘<code class=css> is treated as
- <var>min</var>. </code>
-
- <dt>’‘<code
- class=property>fit-content</code>’‘<code class=css></code>
-
- <dt>
-
- <dd> Equivalent to ’‘<code class=css>minmax(min-content,
- max-content)</code>’‘<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
- ’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:
‘<code class=property>fr</code>’</h4>
<p>Fraction values are new units applicable to the ‘<a
@@ -1832,7 +1819,7 @@
by each <a href="#grid-track">Grid Track</a>‘<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> ’‘<code
class=css>getComputedStyle()</code>’‘<code class=css> values
for </code>’grid-rows' and ‘<a href="#grid-columns"><code
@@ -1855,31 +1842,184 @@
href="#grid-rows"><code class=property>grid-rows</code></a>’ 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
- ‘<code class=css>max-content</code>’ and ‘<code
- class=css>min-content</code>’ 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 ‘<code
- class=css>max-content</code>’ and ‘<code
- class=css>min-content</code>’ 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 ‘<code
+ class=property>min-content</code>’, ‘<code
+ class=property>max-content</code>’, or ‘<code
+ class=css>minmax(<var>p</var>,<var>q</var>)</code>’ 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 ‘<code
+ class=property>fit-content</code>’ counts as a ‘<code
+ class=css>minmax()</code>’)</span>
- <p>[Solve set of constraints as in css3-layout]
+ <li>Each column whose width is specified as ‘<code
+ class=property>min-content</code>’, ‘<code
+ class=property>max-content</code>’, or ‘<code
+ class=css>minmax(<var>p</var>,<var>q</var>)</code>’ 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 ‘<a
+ <li>Each row with a height specified as a <var><length></var> must
+ have exactly that height.
+
+ <li>Each column with a width specified as a <var><length></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 ‘<code
+ class=property>max-content</code>’ 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 ‘<code
+ class=property>max-content</code>’ 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 ‘<code
+ class=property>min-content</code>’ 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 ‘<code
+ class=property>min-content</code>’ 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 ‘<code
+ class=css>*</code>’ must have the same height.
+
+ <li>All columns with a width specified as ‘<code
+ class=css>*</code>’ must have the same width.
+
+ <li>For any pair (<var>i</var>,<var>j</var>) of rows whose
+ <var><row-height></var> values h<sub>i</sub> and h<sub>j</sub> are
+ both specified in ‘<code class=property>fr</code>’, 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 ‘<code
+ class=property>fr</code>’ units.)
+
+ <li>For any pair (<var>i</var>,<var>j</var>) of columns whose
+ <var><col-width></var> values w<sub>i</sub> and w<sub>j</sub> are
+ both specified in ‘<code class=property>fr</code>’, 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 ‘<code
+ class=property>fr</code>’ 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., ‘<code
+ class=property>width</code>’ is ‘<code
+ class=css>auto</code>’ 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><col-width></var> of ‘<code
+ class=css>min-content</code>’ or ‘<code
+ class=css>max-content</code>’.
+
+ <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 ‘<code
+ class=property>block-flow</code>’ of ‘<code
+ class=css>tb</code>’ 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>
+<style type="text/css">
+ 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}
+</style>
+<p id=logo><img src=...
+<p id=motto>Making Web pages since 1862
+<p id=date>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 ‘<a
href="#grid"><code class=property>grid</code></a>’ shorthand
property</h3>
@@ -1900,9 +2040,8 @@
<tr>
<th><a href="#values">Value</a>:
- <td>none | [ [ <var><string></var> [ / <a
- href="#lttrack-sizegt"><var><track-size></var></a> ]? ]+ ] <a
- href="#lttrack-sizegt"><var><track-size></var></a>*
+ <td>none | [ [ <var><string></var> [ /
+ <var><row-height></var> ]? ]+ ] <var><col-width></var>*
<tr>
<th>Initial:
@@ -1949,6 +2088,35 @@
<p>[Explain how a value is split into values for the three properties.]
+ <p>The ‘<a href="#grid"><code class=property>grid</code></a>’
+ property is a shorthand for ‘<a href="#grid-template"><code
+ class=property>grid-template</code></a>’, ‘<a
+ href="#grid-rows"><code class=property>grid-rows</code></a>’ and
+ ‘<a href="#grid-columns"><code
+ class=property>grid-columns</code></a>’. The value of ‘<a
+ href="#grid-template"><code class=property>grid-template</code></a>’
+ is the list of <var><string></var> values. The value of ‘<a
+ href="#grid-rows"><code class=property>grid-rows</code></a>’ is the
+ list of <var><row-height></var> values, with any omitted ones set to
+ ‘<code class=property>fit-content</code>’. And the value of
+ ‘<a href="#grid-columns"><code
+ class=property>grid-columns</code></a>’ is the list of
+ <var><col-width></var> values, or ‘<code
+ class=property>auto</code>’ 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>‘<code class=property>writing-mode</code>’
+ <li class=issue>‘<a href="#writing-mode"><code
+ class=property>writing-mode</code></a>’
<li class=issue>‘<code class=property>direction</code>’
@@ -2908,16 +3077,6 @@
W3C Working Draft. (Work in progress.)</dd>
<!---->
- <dt id=CSS3VAL>[CSS3VAL]
-
- <dd>Hå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>‘<code class=css>center</code>’, <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>‘<a href="#grid"><code class=css>grid</code></a>’, <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>‘<code class=css>inline-grid</code>’, <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><track-size>, <a href="#lttrack-sizegt"
title="<track-size>"><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 | [ [ <string> [ / <track-size> ]? ]+ ]
- <track-size>*
+ <td>none | [ [ <string> [ / <row-height> ]? ]+ ]
+ <col-width>*
<td>none
Received on Friday, 17 February 2012 01:21:52 UTC