[css-grid] Add issues for examples todo in abspos section.

Author: tabatkins

css-grid/Overview.html

@@ -132,18 +132,18 @@ <h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class
 Auto Sizing Subgrids</a></ul><li><a href=#line-placement><span class=secno>8.2</span>
 Line-based Placement: the <span class=property data-link-type=propdesc title=grid-row-start>grid-row-start</span>, <span class=property data-link-type=propdesc title=grid-column-start>grid-column-start</span>, <span class=property data-link-type=propdesc title=grid-row-end>grid-row-end</span>, and <span class=property data-link-type=propdesc title=grid-column-end>grid-column-end</span> properties</a><ul class=toc><li><a href=#grid-placement-errors><span class=secno>8.2.1</span>
 Grid Placement Error Handling</a></ul><li><a href=#placement-shorthands><span class=secno>8.3</span>
-Placement Shorthands: the <span class=property data-link-type=propdesc title=grid-column>grid-column</span>, <span class=property data-link-type=propdesc title=grid-row>grid-row</span>, and <span class=property data-link-type=propdesc title=grid-area>grid-area</span> properties</a></ul><li><a href=#abspos-items><span class=secno>9</span>
-Absolutely-positioned Grid Items</a><li><a href=#alignment><span class=secno>10</span>
-Alignment</a><ul class=toc><li><a href=#auto-margins><span class=secno>10.1</span>
-Aligning with <span data-link-for=margin data-link-type=value title=auto>auto</span> margins</a><li><a href=#row-align><span class=secno>10.2</span>
-Row-axis Alignment: the <span class=property data-link-type=propdesc title=justify-self>justify-self</span> and <span class=property data-link-type=propdesc title=justify-items>justify-items</span> properties</a><li><a href=#column-align><span class=secno>10.3</span>
-Column-axis Alignment: the <span class=property data-link-type=propdesc title=align-self>align-self</span> and <span class=property data-link-type=propdesc title=align-items>align-items</span> properties</a><li><a href=#z-order><span class=secno>10.4</span>
-Z-axis Ordering: the <span class=property data-link-type=propdesc title=z-index>z-index</span> property</a><li><a href=#grid-baselines><span class=secno>10.5</span>
-Grid Baselines</a></ul><li><a href=#layout-algorithm><span class=secno>11</span>
-Grid Layout Algorithm</a><ul class=toc><li><a href=#algo-terms><span class=secno>11.1</span>
-Definition of Terms for use in Calculating Grid Track Sizes</a><li><a href=#track-sizing-algorithm><span class=secno>11.2</span>
-Grid Track Sizing Algorithm</a><li><a href=#shrink-to-fit><span class=secno>11.3</span>
-Defining the Shrink-to-fit Behavior of Grid Elements</a></ul><li><a href=#pagination><span class=secno>12</span>
+Placement Shorthands: the <span class=property data-link-type=propdesc title=grid-column>grid-column</span>, <span class=property data-link-type=propdesc title=grid-row>grid-row</span>, and <span class=property data-link-type=propdesc title=grid-area>grid-area</span> properties</a><li><a href=#abspos-items><span class=secno>8.4</span>
+Absolutely-positioned Grid Items</a></ul><li><a href=#alignment><span class=secno>9</span>
+Alignment</a><ul class=toc><li><a href=#auto-margins><span class=secno>9.1</span>
+Aligning with <span data-link-for=margin data-link-type=value title=auto>auto</span> margins</a><li><a href=#row-align><span class=secno>9.2</span>
+Row-axis Alignment: the <span class=property data-link-type=propdesc title=justify-self>justify-self</span> and <span class=property data-link-type=propdesc title=justify-items>justify-items</span> properties</a><li><a href=#column-align><span class=secno>9.3</span>
+Column-axis Alignment: the <span class=property data-link-type=propdesc title=align-self>align-self</span> and <span class=property data-link-type=propdesc title=align-items>align-items</span> properties</a><li><a href=#z-order><span class=secno>9.4</span>
+Z-axis Ordering: the <span class=property data-link-type=propdesc title=z-index>z-index</span> property</a><li><a href=#grid-baselines><span class=secno>9.5</span>
+Grid Baselines</a></ul><li><a href=#layout-algorithm><span class=secno>10</span>
+Grid Layout Algorithm</a><ul class=toc><li><a href=#algo-terms><span class=secno>10.1</span>
+Definition of Terms for use in Calculating Grid Track Sizes</a><li><a href=#track-sizing-algorithm><span class=secno>10.2</span>
+Grid Track Sizing Algorithm</a><li><a href=#shrink-to-fit><span class=secno>10.3</span>
+Defining the Shrink-to-fit Behavior of Grid Elements</a></ul><li><a href=#pagination><span class=secno>11</span>
 Fragmenting Grid Layout</a><li><a href=#acks><span class=secno></span>
 Acknowledgements</a><li><a href=#changes><span class=secno></span>
 Changes</a><li><a href=#conformance><span class=secno></span>
@@ -2172,24 +2172,54 @@ <h3 class="heading settled heading" data-level=8.3 id=placement-shorthands><span
 		Should <a class=property data-link-type=propdesc href=#propdef-grid-area title=grid-area>grid-area</a> be <a class=property data-link-type=propdesc title=grid-field>grid-field</a>?
 
 
-<h2 class="heading settled heading" data-level=9 id=abspos-items><span class=secno>9 </span><span class=content>
-Absolutely-positioned Grid Items</span><a class=self-link href=#abspos-items></a></h2>
+<h3 class="heading settled heading" data-level=8.4 id=abspos-items><span class=secno>8.4 </span><span class=content>
+Absolutely-positioned Grid Items</span><a class=self-link href=#abspos-items></a></h3>
 
-	<p>
-		If an absolutely positioned element’s <a data-link-type=dfn title="containing block">containing block</a>
-		is generated by a <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>,
-		the <a data-link-type=dfn href=#grid-placement-property title="grid-placement properties">grid-placement properties</a> can be used to constrain it to a particular <a data-link-type=dfn href=#grid-area title="grid area">grid area</a>,
-		similar to how they affect regular <a data-link-type=dfn href=#grid-item title="grid items">grid items</a>.
-		In this case, an <a class=css-code data-link-for="<grid-line>" data-link-type=value href=#grid-placement-auto title=auto>auto</a> value for a <a data-link-type=dfn href=#grid-placement-property title="grid-placement property">grid-placement property</a>
-		indicates the corresponding padding edge of the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>.
+<p>	If an absolutely positioned element’s <a data-link-type=dfn title="containing block">containing block</a>
+	is generated by a <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>,
+	the <a data-link-type=dfn href=#grid-placement-property title="grid-placement properties">grid-placement properties</a> can be used to constrain it to a particular <a data-link-type=dfn href=#grid-area title="grid area">grid area</a>,
+	similar to how they affect regular <a data-link-type=dfn href=#grid-item title="grid items">grid items</a>.
+	In this case, an <a class=css-code data-link-for="<grid-line>" data-link-type=value href=#grid-placement-auto title=auto>auto</a> value for a <a data-link-type=dfn href=#grid-placement-property title="grid-placement property">grid-placement property</a>
+	indicates the corresponding padding edge of the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>.
 
-	<p class=note>
-		Note that, while absolutely-positioning an element to a <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>
-		does allow it to align to that container’s <a data-link-type=dfn href=#grid-line title="grid lines">grid lines</a>,
-		such elements
-		do not take up space or otherwise participate in the layout of the grid.
+<p class=note>	Note: Note that, while absolutely-positioning an element to a <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>
+	does allow it to align to that container’s <a data-link-type=dfn href=#grid-line title="grid lines">grid lines</a>,
+	such elements
+	do not take up space or otherwise participate in the layout of the grid.
+
+	<div class=example>
+		<pre class=example>  .grid {
+    display: grid;
+    grid: ...;
+    position: relative; /* containing block */
+  }
+  .abspos {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    grid-row: 2 / -1;
+    grid-column:
+  }
+</pre>	</div>
+
+	<p class=issue id=issue-382f79cc><a class=self-link href=#issue-382f79cc></a>
+		<ul>
+			<li>Simple example of abspos spanning the whole grid.
+			<li>Example of abspos spanning a portion of the grid.
+			<li>Example of abspos using its offsets.
+			<li>Complex example of a centered grid interacting with abspos doing both padding-edge and explicit lines.
+				<pre>  .grid {
+    justify-content: center;
+  }
+  .abspos {
+    grid-row: 2 / -1;
+    grid-column: auto / span 2;
+  }
+</pre>		</ul>
 
-<h2 class="heading settled heading" data-level=10 id=alignment><span class=secno>10 </span><span class=content>
+<h2 class="heading settled heading" data-level=9 id=alignment><span class=secno>9 </span><span class=content>
 Alignment</span><a class=self-link href=#alignment></a></h2>
 
 	<p>
@@ -2212,7 +2242,7 @@ <h2 class="heading settled heading" data-level=10 id=alignment><span class=secno
 		<a data-link-type=dfn href=#grid-item title="grid items">grid items</a> will auto-size to fit their contents.
 
 
-<h3 class="heading settled heading" data-level=10.1 id=auto-margins><span class=secno>10.1 </span><span class=content>
+<h3 class="heading settled heading" data-level=9.1 id=auto-margins><span class=secno>9.1 </span><span class=content>
 Aligning with <a class=css-code data-link-for=margin data-link-type=value title=auto>auto</a> margins</span><a class=self-link href=#auto-margins></a></h3>
 
 	<p>
@@ -2246,7 +2276,7 @@ <h3 class="heading settled heading" data-level=10.1 id=auto-margins><span class=
 	</div>
 
 
-<h3 class="heading settled heading" data-level=10.2 id=row-align><span class=secno>10.2 </span><span class=content>
+<h3 class="heading settled heading" data-level=9.2 id=row-align><span class=secno>9.2 </span><span class=content>
 Row-axis Alignment: the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-self title=justify-self>justify-self</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-items title=justify-items>justify-items</a> properties</span><a class=self-link href=#row-align></a></h3>
 
 	<p>
@@ -2267,7 +2297,7 @@ <h3 class="heading settled heading" data-level=10.2 id=row-align><span class=sec
 
 
 
-<h3 class="heading settled heading" data-level=10.3 id=column-align><span class=secno>10.3 </span><span class=content>
+<h3 class="heading settled heading" data-level=9.3 id=column-align><span class=secno>9.3 </span><span class=content>
 Column-axis Alignment: the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-self title=align-self>align-self</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-items title=align-items>align-items</a> properties</span><a class=self-link href=#column-align></a></h3>
 
 	<p>
@@ -2277,7 +2307,7 @@ <h3 class="heading settled heading" data-level=10.3 id=column-align><span class=
 		or <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-items title=align-items>align-items</a> property on the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>,
 		as defined in <a data-biblio-type=normative data-link-type=biblio href=#css3-align title=css3-align>[CSS3-ALIGN]</a>.
 
-<h3 class="heading settled heading" data-level=10.4 id=z-order><span class=secno>10.4 </span><span class=content>
+<h3 class="heading settled heading" data-level=9.4 id=z-order><span class=secno>9.4 </span><span class=content>
 Z-axis Ordering: the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-position-3/#z-index title=z-index>z-index</a> property</span><a class=self-link href=#z-order></a></h3>
 
 
@@ -2332,7 +2362,7 @@ <h3 class="heading settled heading" data-level=10.4 id=z-order><span class=secno
   &lt;div id="E"&gt;E&lt;/div&gt;
 &lt;/div&gt;</pre>	</div>
 
-<h3 class="heading settled heading" data-level=10.5 id=grid-baselines><span class=secno>10.5 </span><span class=content>
+<h3 class="heading settled heading" data-level=9.5 id=grid-baselines><span class=secno>9.5 </span><span class=content>
 Grid Baselines</span><a class=self-link href=#grid-baselines></a></h3>
 
 	<p>
@@ -2381,10 +2411,10 @@ <h3 class="heading settled heading" data-level=10.5 id=grid-baselines><span clas
 
 
 
-<h2 class="heading settled heading" data-level=11 id=layout-algorithm><span class=secno>11 </span><span class=content>
+<h2 class="heading settled heading" data-level=10 id=layout-algorithm><span class=secno>10 </span><span class=content>
 Grid Layout Algorithm</span><a class=self-link href=#layout-algorithm></a></h2>
 
-<h3 class="heading settled heading" data-level=11.1 id=algo-terms><span class=secno>11.1 </span><span class=content>
+<h3 class="heading settled heading" data-level=10.1 id=algo-terms><span class=secno>10.1 </span><span class=content>
 Definition of Terms for use in Calculating Grid Track Sizes</span><a class=self-link href=#algo-terms></a></h3>
 
 	<dl>
@@ -2410,7 +2440,7 @@ <h3 class="heading settled heading" data-level=11.1 id=algo-terms><span class=se
 	</dl>
 
 
-<h3 class="heading settled heading" data-level=11.2 id=track-sizing-algorithm><span class=secno>11.2 </span><span class=content>
+<h3 class="heading settled heading" data-level=10.2 id=track-sizing-algorithm><span class=secno>10.2 </span><span class=content>
 Grid Track Sizing Algorithm</span><a class=self-link href=#track-sizing-algorithm></a></h3>
 	<ol>
 		<li>Call ComputedUsedBreadthOfGridTracks for Grid Columns to resolve their logical width.
@@ -2857,14 +2887,14 @@ <h3 class="heading settled heading" data-level=11.2 id=track-sizing-algorithm><s
 		</dl>
 	</dl>
 
-<h3 class="heading settled heading" data-level=11.3 id=shrink-to-fit><span class=secno>11.3 </span><span class=content>
+<h3 class="heading settled heading" data-level=10.3 id=shrink-to-fit><span class=secno>10.3 </span><span class=content>
 Defining the Shrink-to-fit Behavior of Grid Elements</span><a class=self-link href=#shrink-to-fit></a></h3>
 
 	<p>
 		The <a href=http://www.w3.org/TR/css3-box/#shrink-to-fit>CSS3 Box Model</a> defines the shrink-to-fit behavior of an element as min(max(preferred minimum width, available width), preferred width), with available width defined in the Box Model spec. Accordingly, for the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> we define the preferred minimum width as the sum of the UsedBreadths of the <a data-link-type=dfn href=#grid-track title="grid tracks">Grid tracks</a> just before step 3 in ComputeUsedBreadthOfGridTracks, and the preferred width as the sum of the UsedBreadths of the <a data-link-type=dfn href=#grid-track title="grid tracks">Grid tracks</a> after the entire track sizing algorithm has been run with infinite space.
 
 
-<h2 class="heading settled heading" data-level=12 id=pagination><span class=secno>12 </span><span class=content>
+<h2 class="heading settled heading" data-level=11 id=pagination><span class=secno>11 </span><span class=content>
 Fragmenting Grid Layout</span><a class=self-link href=#pagination></a></h2>
 
 	<p class=issue id=issue-b68a497e><a class=self-link href=#issue-b68a497e></a>
@@ -3045,7 +3075,7 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>auto-placement, <a href=#auto-placementauto-placement-algorithm title="section 6.2.1">6.2.1</a>
 <li>auto-placement algorithm, <a href=#auto-placementauto-placement-algorithm title="section 6.2.1">6.2.1</a>
 <li>auto-placement cursor, <a href=#auto-placement-cursor title="section 6.2.1">6.2.1</a>
-<li>AvailableSpace, <a href=#AvailableSpace-definition title="section 11.1">11.1</a>
+<li>AvailableSpace, <a href=#AvailableSpace-definition title="section 10.1">10.1</a>
 <li>column, <a href=#grid-column--column title="section 2">2</a>
 <li>column axis, <a href=#column-axis title="section 2">2</a>
 <li>columns, <a href=#valuedef-columns title="section 6.2">6.2</a>
@@ -3113,28 +3143,28 @@ <h2 class="no-num no-ref heading settled heading" id=index><span class=content>
 <li>&lt;line-name-list&gt;, <a href=#typedef-line-name-list title="section 5.1">5.1</a>
 <li>&lt;line-names&gt;, <a href=#typedef-line-names title="section 5.1">5.1</a>
 <li>max-content, <a href=#valuedef-max-content title="section 5.1">5.1</a>
-<li>MaxTrackSizingFunction, <a href=#MaxTrackSizingFunction-definition title="section 11.1">11.1</a>
+<li>MaxTrackSizingFunction, <a href=#MaxTrackSizingFunction-definition title="section 10.1">10.1</a>
 <li>min-content, <a href=#valuedef-min-content title="section 5.1">5.1</a>
 <li>minmax(), <a href=#valuedef-minmax title="section 5.1">5.1</a>
-<li>MinTrackSizingFunction, <a href=#MinTrackSizingFunction-definition title="section 11.1">11.1</a>
+<li>MinTrackSizingFunction, <a href=#MinTrackSizingFunction-definition title="section 10.1">10.1</a>
 <li>named grid area, <a href=#named-grid-area title="section 5.2">5.2</a>
 <li>named line, <a href=#named-line title="section 5.1.1">5.1.1</a>
 <li>none<ul><li>value for grid-template-rows, grid-template-columns, <a href=#valuedef-none0 title="section 5.1">5.1</a>
 <li>value for grid-template-areas, <a href=#valuedef-none1 title="section 5.2">5.2</a>
 <li>value for grid-template, <a href=#valuedef-none2 title="section 5.3">5.3</a>
 <li>value for grid-auto-flow, <a href=#valuedef-none title="section 6.2">6.2</a>
 </ul><li>occupied grid cell, <a href=#occupied-grid-cell title="section 6.2.1">6.2.1</a>
-<li>order-modified grid order, <a href=#order-modified-grid-order title="section 10.5">10.5</a>
-<li>participates in baseline alignment, <a href=#baseline-participation title="section 10.5">10.5</a>
+<li>order-modified grid order, <a href=#order-modified-grid-order title="section 9.5">9.5</a>
+<li>participates in baseline alignment, <a href=#baseline-participation title="section 9.5">9.5</a>
 <li>&lt;percentage&gt;, <a href=#valuedef-percentage title="section 5.1">5.1</a>
 <li>placement, <a href=#grid-placementplacement title="section 8">8</a>
-<li>RemainingSpace, <a href=#RemainingSpace-definition title="section 11.1">11.1</a>
+<li>RemainingSpace, <a href=#RemainingSpace-definition title="section 10.1">10.1</a>
 <li>repeat(), <a href=#funcdef-repeat title="section 5.1.2">5.1.2</a>
 <li>row, <a href=#grid-row--row title="section 2">2</a>
 <li>row axis, <a href=#row-axis title="section 2">2</a>
 <li>rows, <a href=#valuedef-rows title="section 6.2">6.2</a>
 <li>sizing function, <a href=#sizing-function title="section 5.1">5.1</a>
-<li>SpanCount, <a href=#SpanCount-definition title="section 11.1">11.1</a>
+<li>SpanCount, <a href=#SpanCount-definition title="section 10.1">10.1</a>
 <li>span &amp;&amp; [ &lt;integer&gt; || &lt;ident&gt; ], <a href=#grid-placement-span-int title="section 8.2">8.2</a>
 <li>&lt;string&gt;+, <a href=#valuedef-string title="section 5.2">5.2</a>
 <li>subgrid<ul><li>value for grid-template-rows, grid-template-columns, <a href=#valuedef-subgrid title="section 5.1">5.1</a>
@@ -3196,6 +3226,7 @@ <h2 class="no-num heading settled" id=issues-index><span class=content>Issues In
 
 
 <a href=#issue-6466e536> ↵ </a><p class=issue>
+		<a href=#issue-382f79cc> ↵ </a><p class=issue>
 			Currently this algorithm embodies several heuristics which regulate the growth of spanning <a data-link-type=dfn href=#grid-item title="grid items">Grid items</a> to accommodate certain use cases. (E.g. the game example in Figures 2 and 3 above.) These heuristics should be a normative part of this specification to ensure interoperability. To the extent additional use cases can be identified that cannot be satisfied by following the current heuristics, the normative algorithm can be updated, or additional mechanisms can be introduced for fine-grained control of content-based TrackSizingFunction.
 
 		<a href=#issue-a01f80c8> ↵ </a><p class=issue>