- From: Alex Mogilevsky via cvs-syncmail <cvsmail@w3.org>
- Date: Tue, 06 Dec 2011 06:00:17 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-grid-align
In directory hutz:/tmp/cvs-serv19431
Modified Files:
Overview.html default.css
Log Message:
grid spec update for November 21, 2011
Index: Overview.html
===================================================================
RCS file: /sources/public/csswg/css3-grid-align/Overview.html,v
retrieving revision 1.12
retrieving revision 1.13
diff -u -d -r1.12 -r1.13
--- Overview.html 23 Jul 2011 08:07:55 -0000 1.12
+++ Overview.html 6 Dec 2011 06:00:14 -0000 1.13
@@ -48,7 +48,7 @@
<div class="head">
<p><a href="http://www.w3.org/"><img src="http://www.w3.org/Icons/w3c_home" alt="W3C" width="72" height="48" /></a></p>
<h1 class="title" id="title">CSS Grid Layout</h1>
- <h2>Editor's Draft, 22 July 2011</h2>
+ <h2>Editor's Draft, 21 November 2011</h2>
<dl>
<dt>This version:</dt><dd><a href="http://dev.w3.org/csswg/css3-grid-align">http://dev.w3.org/csswg/css3-grid-align</a></dd>
<dt>Latest published version:</dt><dd><a href="http://www.w3.org/TR/css3-grid-layout">http://www.w3.org/TR/css3-grid-layout</a></dd>
@@ -380,11 +380,9 @@
</p>
<p>
Prior to the <a href="#grid-element">Grid element</a>, the author would have likely used absolute positioning to control the top and left coordinates,
- along with the width and height of each HTML element that comprises the control.
- The <code>z-index</code> property would have been used to control element drawing order.
+ along with the width and height of each HTML element that comprises the control.
By leveraging the <a href="#grid-element">Grid element</a>, the author can instead limit script usage to handling mouse events on the thumb,
which snaps to various positions along the track as the <a href="#grid-column-property"><code>grid-columns</code></a> property of the <a href="#grid-element">Grid element</a> is updated.
- The <a href="#grid-layer-property"><code>grid-layer</code></a> property provides capabilities which are analagous to <code>z-index</code> for <a href="#grid-item">Grid Item</a>s.
</p>
<pre class="example"><style type="text/css">
#grid {
@@ -412,12 +410,12 @@
#track { grid-column: "track-start" "track-end"; grid-row-align: center }
#upper-label { grid-column: "track-end"; }
- /* Fill parts are drawn above the track so set grid-layer to 5. */
- #lower-fill { grid-column: "track-start" "fill-split"; grid-row-align: center; grid-layer: 5 }
- #upper-fill { grid-column: "fill-split" "track-end"; grid-row-align: center; grid-layer: 5 }
+ /* Fill parts are drawn above the track so set z-index to 5. */
+ #lower-fill { grid-column: "track-start" "fill-split"; grid-row-align: center; z-index: 5 }
+ #upper-fill { grid-column: "fill-split" "track-end"; grid-row-align: center; z-index: 5 }
- /* Thumb is the topmost part; assign it the highest grid-layer value. */
- #thumb { grid-column: "thumb-start" "thumb-end"; grid-layer: 10 }
+ /* Thumb is the topmost part; assign it the highest z-index value. */
+ #thumb { grid-column: "thumb-start" "thumb-end"; z-index: 10 }
</style>
<div id="grid">
@@ -696,16 +694,18 @@
The following grammar expresses the allowable values for the <a href="#grid-rows-property"><code>grid-rows</code></a> and <a href="#grid-columns-property"><code>grid-columns</code></a> properties.
</p>
<pre><track-list> => [ [ <string> ]* <track-group> [ <string> ]* ]+ | 'none'
-<track-group> => [ '(' [ [ <string> ]* <track-minmax> [ <string> ]* ]+ ')' [ '[' <positive-number> ']' ]?
+<track-group> => [ '(' [ [ <string> ]* <track-minmax> [ <string> ]* ]+ ')' [ '[' <positive-integer> ']' ]?
| <track-minmax>
<track-minmax> => 'minmax(' <track-breadth> ',' <track-breadth> ')' | 'auto' | <track-breadth>
<track-breadth> => <length> | <percentage> | <fraction> | 'min-content' | 'max-content'</pre>
- <p>Where:</p>
+ <p>Whitespace must not occur between the closing parenthesis and the opening square bracket of the repeat count. Whitespace must occur between any consecutive <code><track-group></code> and <code><track-minmax></code>. In all other areas, whitespace may optionally occur.</p>
+ <br>
+ <p>Where:</p>
<ul>
<li><strong>length</strong> is as defined by CSS3 Values. [<cite><a href="#bib-CSS3VAL" rel="biblioentry" class="bibref">CSS3VAL</a></cite>]</li>
<li><strong>percentage</strong> expresses a size for a <a href="#grid-track">Grid Track</a> as a percentage of the <a href="#grid-element">Grid element</a>'s logical width (for columns) or logical height (for rows).
- When the width or height of the <a href="#grid-element">Grid element</a> is undefined, the percentage is ignored and the <a href="#grid-track">Grid Track</a> will be auto-sized.</li>
+ When the width or height of the <a href="#grid-element">Grid element</a> is dependent on content, the result is undefined.</li>
<li><strong>fraction</strong> is a non-negative floating-point number followed
by 'fr'. Each <code>fraction</code> value takes a share of the remaining space proportional to
its number. See <a href="#fraction-values-fr">fraction values</a> for more details.</li>
@@ -720,6 +720,10 @@
<li><strong>auto</strong> is quivalent to <code>fit-content</code>.</li>
</ul>
<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>
+ <br>
+ <p class="issue">
Flex could also be allowed as a sizing function for a <a href="#grid-track">Grid Track</a>.
</p>
<table id="grid-columns-property" class="propdef">
@@ -1638,7 +1642,7 @@
</p>
<p>
The values <code>start</code>, <code>end</code>, and <code>center</code> all cause the <a href="#grid-item">Grid Item</a>
- to produce a box sized shrink-to-fit for its cell.
+ to produce a box sized shrink-to-fit for its cell. Note that percentage lengths specified on a <a href="#grid-item">Grid Item</a> resolve against the dimensions of the grid cell, not the grid element. Percentages specified for margin-top, padding-top, margin-bottom, and padding-bottom resolve against the height of the grid cell, rather than the width of the grid cell.
If the <code>min-content</code> size of the <a href="#grid-item">Grid Item</a>'s box is greater than the size of its Cell,
it will overflow the bounds of its Cell in a direction determined by its alignment.
</p>
@@ -1664,9 +1668,9 @@
<h2><span class="secno">9. </span>Drawing Order of Grid Items</h2>
<div class="sidefigure">
<p>
- <img alt="Image: Drawing order controlled by grid-layer and source order." src="images/drawing-order.png" />
+ <img alt="Image: Drawing order controlled by z-index and source order." src="images/drawing-order.png" />
</p>
- <p class="caption">Drawing order controlled by grid-layer and source order.</p>
+ <p class="caption">Drawing order controlled by z-index and source order.</p>
</div>
<p>
<a href="#grid-item">Grid Item</a>s do not directly affect each other's placement in the <a href="#grid-element">Grid element</a>.
@@ -1676,10 +1680,8 @@
<a href="#grid-item">Grid Item</a> boxes in non-intersecting Cells may also overlap because of negative margins.
</p>
<p>
- In cases where boxes overlap, a new property, <a href="#grid-layer"><code>grid-layer</code></a>, is introduced to provide control over the drawing order of <a href="#grid-item">Grid Item</a>s.
- <dfn id="grid-layer">Grid-layer</dfn> is similar in concept to <code>z-index</code>, but avoids overloading the meaning of the <code>z-index</code> property,
- which is applicable only to positioned elements.
- In cases where <a href="#grid-item">Grid Item</a>s occupy the same <a href="#grid-layer">grid-layer</a>, source order determines which item will be drawn first.
+ In cases where boxes overlap, <a href="http://www.w3.org/TR/CSS21/visuren.html#propdef-z-index"><code>z-index</code></a> provides control over the drawing order of <a href="#grid-item">Grid Item</a>s.
+ Both <a href="#grid-element">Grid element</a>s and <a href="#grid-item">Grid Item</a>s generate a stacking context as described for floats (step 5, section 14) in the <a href="http://www.w3.org/TR/2007/WD-css3-box-20070809/#stacking">CSS3 Box Model</a>.
</p>
<p>
Figure 15 illustrates the drawing order of the markup shown in the following example.
@@ -1687,11 +1689,11 @@
<pre class="example"><style type="text/css">
#grid { display: grid; grid-columns: 1fr 1fr; grid-rows: 1fr 1fr }
#A { grid-column: 1; grid-row: 2; grid-column-span: 2; grid-row-align: end }
- #B { grid-column: 1; grid-row: 1; grid-layer: 10 }
+ #B { grid-column: 1; grid-row: 1; z-index: 10 }
#C { grid-column: 2; grid-row: 1; grid-row-align: start; margin-left: -20px }
#D { grid-column: 2; grid-row: 2; grid-column-align: end; grid-row-align: start }
#E { grid-column: 1; grid-row: 1;
- grid-column-span: 2; grid-row-span: 2; grid-layer: 5;
+ grid-column-span: 2; grid-row-span: 2; z-index: 5;
grid-column-align: center; grid-row-align: center
}
</style>
@@ -1703,42 +1705,6 @@
<div id="D">D</div>
<div id="E">E</div>
</div></pre>
- <table id="grid-layer-property" class="propdef">
- <tbody>
- <tr>
- <td>Name:</td>
- <td>grid-layer</td>
- </tr>
- <tr>
- <td>Value:</td>
- <td><integer></td>
- </tr>
- <tr>
- <td>Initial:</td>
- <td>0</td>
- </tr>
- <tr>
- <td>Applies to:</td>
- <td>Grid Item elements</td>
- </tr>
- <tr>
- <td>Inherited:</td>
- <td>no</td>
- </tr>
- <tr>
- <td>Percentages:</td>
- <td>n/a</td>
- </tr>
- <tr>
- <td>Media:</td>
- <td>visual, paged</td>
- </tr>
- <tr>
- <td>Computed value:</td>
- <td>specified value</td>
- </tr>
- </tbody>
- </table>
<!--End Section: Drawing Order of Grid Items-->
</div>
@@ -1759,7 +1725,7 @@
<dt>
<dfn id="">RemainingSpace</dfn>
</dt>
- <dd>The max of zero and the Grid element’s content box size in the applicable dimension less the sum of all <a href="#grid-track">Grid Track</a> UsedBreadth values.</dd>
+ <dd>The max of zero and the Grid element’s content box size in the applicable dimension less the sum of all <a href="#grid-track">Grid Track</a> UsedBreadth values. This is undefined if the Grid element's box size is also undefined (i.e. the Grid element is shrink-to-fit or the height is auto.)</dd>
<dt>
<dfn id="">SpanCount</dfn>
</dt>
@@ -1809,17 +1775,19 @@
<li>Sort RecipientTracks by t.MaxBreadth - Accumulator( t ) ascending (where t is an element in the RecipientTrack set).</li>
<li>For i = 0 to RecipientTracks.length - 1
<ol>
- <li>share = SpaceToDistribute / ( RecipientTracks.length - i )</li>
- <li>RecipientTracks[i].TempBreadth = Min ( share, RecipientTracks[i].MaxBreadth )</li>
- <li>SpaceToDistribute -= RecipientTracks[i].TempBreadth</li>
+ <li>t = RecipientTracks[i]</li>
+ <li>share = Min ((SpaceToDistribute / ( RecipientTracks.length - i )), (t.MaxBreadth - Accumulator (t)))</li>
+ <li>t.TempBreadth = Accumulator( t ) + share</li>
+ <li>SpaceToDistribute -= share</li>
</ol>
</li>
<li>If SpaceToDistribute > 0 and IgnoreMaxBreadth = true
<ol>
<li>For i = 0 to RecipientTracks.length - 1
<ol>
+ <li>t = RecipientTracks[i]</li>
<li>share = SpaceToDistribute / ( RecipientTracks.length - i )</li>
- <li>RecipientTracks[i].TempBreadth += share</li>
+ <li>t.TempBreadth += share</li>
<li>SpaceToDistribute -= share</li>
</ol>
</li>
@@ -1945,28 +1913,24 @@
<ol>
<li>allocatedSpace = the sum of the UsedBreadth for each <a href="#grid-track">Grid Track</a> in GridTracks</li>
<li>fractionTracks = the subset of GridTracks whose MaxTrackSizingFunction is a fraction</li>
- <li>For each <a href="#grid-track">Grid Track</a> t in fractionTracks
- <ol>
- <li>t.NormalizedFractionBreadth = t.UsedBreadth / t.MaxTrackSizingFunction.FractionValue</li>
- </ol>
- </li>
+ <li>For each <a href="#grid-track">Grid Track</a> t in fractionTracks
+ <ol>
+ <li>t.NormalizedFractionValue = t.UsedBreadth / t.MaxTrackSizingFunction.FractionValue</li>
+ </ol>
+ </li>
<li>Sort fractionTracks by their NormalizedFractionValue</li>
- <li>spaceNeededFromFractionTracks = Space - allocateSpace</li>
+ <li>spaceNeededFromFractionTracks = SpaceToFill - allocatedSpace</li>
<li>currentBandFractionValue = accumulatedFractions = 0</li>
<li>For each <a href="#grid-track">Grid Track</a> t in fractionTracks
<ol>
- <li>For i = 0 to TracksToGrow.length - 1
- <ol>
- <li>If t.NormalizedFractionBreadth != currentBandFractionBreadth
- <ol>
- <li>If t.NormalizedFractionBreadth * accumulatedFractions > spaceNeededFromFractionTracks then break from for loop</li>
- <li>currentBandFractionBreadth = t.NormalizedFractionBreadth</li>
- </ol>
- </li>
- <li>accumulatedFractions += t.MaxTrackSizingFunction.FractionValue</li>
- <li>spaceNeededFromFractionTracks += t.UsedBreadth</li>
- </ol>
- </li>
+ <li>If t.NormalizedFractionValue > currentBandFractionBreadth
+ <ol>
+ <li>If t.NormalizedFractionValue * accumulatedFractions > spaceNeededFromFractionTracks then break from for loop</li>
+ <li>currentBandFractionBreadth = t.NormalizedFractionValue</li>
+ </ol>
+ </li>
+ <li>accumulatedFractions += t.MaxTrackSizingFunction.FractionValue</li>
+ <li>spaceNeededFromFractionTracks += t.UsedBreadth</li>
</ol>
</li>
<li>return spaceNeededFromFractionTracks / accumulatedFractions</li>
@@ -1994,7 +1958,7 @@
For the purposes of resolving the breadth that satisfies the MinTrackSizingFunction and MaxTrackSizingFunction, each <a href="#grid-track">Grid Track</a> falls into one of three categories:
</p>
<ol>
- <li>A percentage or length value which can be trivally resolved.</li>
+ <li>A percentage or length value which can be trivially resolved.</li>
<li>A min-content or max-content value which will be resolved based on the measurements of the <a href="#grid-item">Grid Item</a>s which cover the <a href="#grid-track">Grid Track</a>.</li>
<li>A fraction value which can only be resolved after determining the RemainingSpace in the <a href="#grid-item">Grid Item</a>'s content box after having considered all contributions from the prior two categories of <a href="#grid-track">Grid Track</a>s.</li>
</ol>
@@ -2060,7 +2024,20 @@
</li>
</ol>
</li>
- <li>Ensure that MaxBreadth is at least as big as UsedBreadth for each <a href="#grid-track">Grid Track</a> in GridTracks</li>
+ <li>For each <a href="#grid-track">Grid Track</a> t in GridTracks
+ <ol>
+ <li>If t.MaxBreadth == undefined
+ <ol>
+ <li>t.MaxBreadth = t.UsedBreadth</li>
+ </ol>
+ </li>
+ <li>Else
+ <ol>
+ <li>t.MaxBreadth = Max( t.UsedBreadth, t.MaxBreadth)</li>
+ </ol>
+ </li>
+ </ol>
+ </li>
<li>Resolve content-based MaxTrackSizingFunctions
<ol>
<li>Call DistributeSpaceToTracksBySpanCount, with arguments:
@@ -2081,30 +2058,71 @@
</li>
<li>Grow all <a href="#grid-track">Grid Track</a>s in GridTracks from their UsedBreadth up to their MaxBreadth value until RemainingSpace is exhausted.
<ol>
- <li>Call DistributeSpaceToTracks, with arguments:
- <ul>
- <li>RecipientTracks: GridTracks</li>
- <li>SpaceToDistribute: RemainingSpace</li>
- <li>IgnoreMaxBreadth: false</li>
- </ul>
- </li>
- <li>Iterate over all GridTracks and assign UpdatedTrackBreadth to UsedBreadth</li>
+ <li>If RemainingSpace == defined
+ <ol>
+ <li>Call DistributeSpaceToTracks, with arguments:
+ <ul>
+ <li>RecipientTracks: GridTracks</li>
+ <li>SpaceToDistribute: RemainingSpace</li>
+ <li>IgnoreMaxBreadth: false</li>
+ </ul>
+ </li>
+ <li>Iterate over all GridTracks and assign UpdatedTrackBreadth to UsedBreadth</li>
+ </ol>
+ </li>
+ <li>Else
+ <ol>
+ <li>For each <a href="#grid-track">Grid Track</a> t in GridTracks
+ <ol>
+ <li>t.UsedBreadth = t.MaxBreadth</li>
+ </ol>
+ </li>
+ </ol>
+ </li>
</ol>
</li>
- <li>Grow all <a href="#grid-track">Grid Track</a>s having a fraction as their MaxTrackSizingFunction
- <ol>
- <li>normalizedFractionBreadth = Call ComputeNormalizedFractionBreadth, with arguments:
- <ul>
- <li>GridTracks: GridTracks</li>
- <li>SpaceToFill: RemainingSpace</li>
- </ul>
- </li>
- <li>For each <a href="#grid-track">Grid Track</a> t in GridTracks
- <ol>
- <li>t.UsedBreadth = Max( t.UsedBreadth, normalizedFractionBreadth * t.MaxTrackSizingFunction.FractionValue )</li>
- </ol>
- </li>
- </ol>
+ <li>Grow all <a href="#grid-track">Grid Track</a>s having a fraction as the MaxTrackSizingFunction
+ <ol>
+ <li>normalizedFractionBreadth = 0
+ <li>If RemainingSpace == defined
+ <ol>
+ <li>normalizedFractionBreadth = Call ComputeNormalizedFractionBreadth, with arguments:
+ <ul>
+ <li>GridTracks: GridTracks</li>
+ <li>SpaceToFill: RemainingSpace</li>
+ </ul>
+ </li>
+ </ol>
+ </li>
+ <li>Else
+ <ol>
+ <li>For each <a href="#grid-track">Grid Track</a> t in GridTracks having a fraction as the MaxTrackSizingFunction
+ <ol>
+ <li>normalizedFractionBreadth = Max( normalizedFractionBreadth, t.UsedBreadth / t.MaxTrackSizingFunction.FractionValue )
+ </li>
+ </ol>
+ </li>
+ <li>For each <a href="#grid-item">Grid Item</a> i, which crosses a set of GridTracks s
+ <ol>
+ <li>itemNormalizedFractionBreadth = Call ComputeNormalizedFractionBreadth, with arguments:
+ <ul>
+ <li>GridTracks: s</li>
+ <li>SpaceToFill: max-content size of i less the sum of the UsedBreadths of s</li>
+ </ul>
+ </li>
+ <li>normalizedFractionBreadth = Max( normalizedFractionBreadth, itemNormalizedFractionBreadth )
+ </li>
+ </ol>
+ </li>
+ </ol>
+ </li>
+ <li>For each <a href="#grid-track">Grid Track</a> t in GridTracks
+ <ol>
+ <li>t.UsedBreadth = Max( t.UsedBreadth, normalizedFractionBreadth * t.MaxTrackSizingFunction.FractionValue )</li>
+ </ol>
+ </li>
+
+ </ol>
</li>
</ol>
</code>
@@ -2132,17 +2150,33 @@
</div>
<div id="changes-from-previous-version" class="appendix section">
- <h2><span class="secno">A. </span>Changes from <a href="http://www.w3.org/TR/2011/WD-css3-grid-layout-20110401">Previous Version</a></h2>
+ <h2><span class="secno">A. </span>Changes from <a href="http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407">Previous Working Draft</a></h2>
<ul>
- <li>Included an algorithm for computing the size of <a href="#grid-track">Grid Track</a>s in the spec.</li>
- <li>Removed the property grid-cell-stacking.</li>
- <li>Removed the pseudo-element selector ::grid-cell.</li>
- <li>Defined that <a href="#grid-cell">Grid Cell</a>s named explicitly using the <a href="#grid-template-property">grid-template</a> property cannot be styled (with the removal of the ::grid-cell pseudo-element selector they cannot be selected).</li>
- <li>Removed the notion that <a href="#grid-cell">Grid Cell</a>s could be given a display property which controls their inner layout.</li>
- <li>Corrected an error in the automatic placement example. All children of the form should be display:block to ensure they are valid <a href="#grid-item">Grid Item</a>s.</li>
- <li>Updated the <a href="#grid-columns-and-rows-properties">Grid Columns and Grid Rows Properties</a> grammar to correct an error and reduce ocurrences of <string></li>
+ <ul>Changes made in 22 July 2011 Editor's Draft:
+ <li>Included an algorithm for computing the size of <a href="#grid-track">Grid Track</a>s in the spec.</li>
+ <li>Removed the property grid-cell-stacking.</li>
+ <li>Removed the pseudo-element selector ::grid-cell.</li>
+ <li>Defined that <a href="#grid-cell">Grid Cell</a>s named explicitly using the <a href="#grid-template-property">grid-template</a> property cannot be styled (with the removal of the ::grid-cell pseudo-element selector they cannot be selected).</li>
+ <li>Removed the notion that <a href="#grid-cell">Grid Cell</a>s could be given a display property which controls their inner layout.</li>
+ <li>Corrected an error in the automatic placement example. All children of the form should be display:block to ensure they are valid <a href="#grid-item">Grid Item</a>s.</li>
+ <li>Updated the <a href="#grid-columns-and-rows-properties">Grid Columns and Grid Rows Properties</a> grammar to correct an error and reduce ocurrences of <string></li>
+ </ul>
+ <br>
+ <ul>Changes made in 21 November 2011 Editor's Draft:
+ <li>Section 2.4, Section 9: Removed the grid-layer property in favor of using <a href="http://www.w3.org/TR/CSS21/visuren.html#z-index">z-index.</a></li>
+ <li>Section 6.5: Clarified whitespace rules.</li>
+ <li>Section 6.5: Changed "positive-number" to "positive-integer".</li>
+ <li>Section 6.5: Updated the spec to clarify that percentages-sized grid tracks are undefined when inside content-sized grids.</li>
+ <li>Section 8.1: Updated the spec to show that percentage-sized grid items resolve themselves against the grid cell, rather than the grid element.</li>
+ <li>Section 10.1: Updated definition of RemainingSpace for shrink-to-fit situations.</li>
+ <li>Section 10.2: Renamed NormalizedFractionBreadth variable to NormalizedFractionValue in the CalculateNormalizedFractionBreadth algorithm</li>
+ <li>Section 10.2: Addressed typos (e.g. Space -> SpaceToFill) in CalculateNormalizedFractionBreadth</li>
+ <li>Section 10.2: Updated CalculateNormalizedFractionBreadth to remove an unneeded inner loop in step 7.</li>
+ <li>Section 10.2: Updated steps 2 and 3 in DistributeSpaceToTracks function to correct use of delta variable</li>
+ <li>Section 10.2: Updated step 6 in ComputeUsedBreadthOfGridTracks to cover shrink-to-fit Grid Elements</li>
+ </ul>
</ul>
- <!--End Section: Acknowledgements-->
+ <!--End Section: Changes from previous version-->
</div>
<div id="acknowledgements" class="appendix section">
Received on Tuesday, 6 December 2011 06:00:20 UTC