Added some text about default slots and some issues.

Author: bert-github

css3-layout/new.src.html

@@ -702,6 +702,11 @@ <h3 id="placement">
   <p>This module replaces and extends the <var class="replaceme">SUMMARIZE HERE</var>
   features defined in [[!CSS21]] sections <var class="replaceme">W.X and Y.Z</var>.
 
+
+  <p>See [[!CSS3PAGE]] for the definition of <a
+  href="http://www.w3.org/TR/css3-multicol/#multi-column-element"
+  ><dfn>multi-column element.</dfn></a>
+
 <h3 id="values">
 Values</h3>
 
@@ -844,7 +849,10 @@ <h2 id=display>
 
   <p>An element is a <dfn>grid element</dfn> (i.e., it defines a grid
   for its descendants) if its 'display' value is ''grid'' or ''inline-grid''.
-  
+
+  <p>The <dfn>grid ancestor</dfn> of an element is the nearest
+  ancestor that is a grid element.
+
   <table class="propdef">
     <tr>
       <th>Name:
@@ -868,10 +876,19 @@ <h2 id=display>
   </dl>
 
 <div class="issue">
-  <p> Should grid elements be created automatically without using 'display'?
-  This makes it easier to create a grid element, but could create some confusing
-  dynamics, e.g. what happens if someone later in the cascade sets ''display: table''
-  or ''display: flex''?
+  <p>Should grid elements be created automatically without using
+  'display'? On the one hand, this (a) is not consistent with how flex
+  boxes are created and (b) could create some confusing dynamics
+  (e.g., setting ''display: table'' or 'display: flexbox' removes any
+  grid, but setting 'display: table-cell' or 'display: list-item'
+  keeps the grid); but (1) requires only one instead of two properties
+  to create a grid element, (2) allows other block container elements
+  (such as table cells, table captions, list items, flex
+  items&hellip;) to contain a grid, without extra keywords for
+  'display' ('table-cell-grid', 'list-item-grid'&hellip;), and (3) is
+  consistent with how <a
+  href="http://www.w3.org/TR/css3-multicol/#multi-column-element"
+  >multicolumn elements</a> are created.
 
   <p>Proposed text:
 
@@ -900,6 +917,7 @@ <h2 id=display>
   <p class=issue>Use 'fr' unit (as in css3-grid-align) instead of '*' (as
   in css3-layout).
 
+
 <h3 id="grid-lines-tracks">
 Grid Lines and Tracks</h3>
 
@@ -949,7 +967,7 @@ <h3 id="grid-templates">
 
   <p>The 'grid-template' property implicitly assigns a grid to an element
   and defines named slots in the grid. It can also designate a slot as the
-  default slot, for unpositioned content.
+  <em>default slot,</em> for unpositioned content.
 
   <table class=propdef>
     <tr>
@@ -986,7 +1004,7 @@ <h3 id="grid-templates">
       <td><abbr title="follows order of property value definition">per
     grammar</abbr>
   </table>
-  
+
   <p>Each string consist of one or more asterisks (“*”), letters,
   periods (“.”), spaces and tabs. Each string represents one row in the
   template, each symbol other than a space or tab represents one
@@ -998,7 +1016,7 @@ <h3 id="grid-templates">
     <dt>&lt;letter&gt;
       <dd>Named slot for content
     <dt>''*'' (asterisk)
-      <dd>Default slot for content.
+      <dd>Default slot for content (explained below).
     <dt>. (period)
       <dd>Blank space.
   </dl>
@@ -1022,11 +1040,27 @@ <h3 id="grid-templates">
   <p>Each slot (letter or “*”) acts as a block element for its
   contents.
 
+  <p>If the value is ''none'', then no explicit slots are defined. If
+  the element is a <em>grid element,</em> then the element instead has
+  an <dfn>implicit template</dfn> consisting of a single, anonymous
+  slot. I.e., for a grid element with <var>N</var> columns and
+  <var>M</var> rows, the implicit template is equivalent to
+  <var>M</var> strings of <var>N</var> asterisks:
+
+  <pre>
+"***&hellip;***"
+"***&hellip;***"
+&#8942;
+"***&hellip;***"
+</pre>
+
+  <p class=note>Note that an element is a grid element in this case if
+  'grid-columns' and 'grid-rows' are not both ''auto''.
+
   <p class=issue>Are grid templates logically oriented (relative to
   writing mode), or absolutely-oriented?
-  
-  <p class=issue>What happens to unpositioned content if there is no
-  default slot? Ideally, it shouldn't disappear...
+
+
 
 <h3 id=grid-column-sizes>
 Specifying the widths of columns: 'grid-columns'</h3>
@@ -1200,6 +1234,53 @@ <h3 id="grid-row-sizes">
   <p>The 'grid-rows' property specifies the sizes of the rows of a grid. It
   takes the same values as 'grid-columns'.
 
+<h3>Default slots</h3>
+
+  <p>Every <span>grid element</span> has a <dfn>default slot.</dfn> If
+  there is an asterisk (“*”) in the template, then that slot is the
+  default. If there is no asterisk, then the first letter in the
+  template defines the default slot.
+
+  <p class=example>For example, if the template is defined by
+  'grid-template: "..c" "abb" "abb"', then “c” is the default slot.
+
+  <p>If the grid has an <em>implicit template</em> (i.e.,
+  'grid-template' is ''none''), then the default slot is the single,
+  anonymous slot of that implicit template.
+
+  <p>All content of a grid element that is not inside another flow
+  (e.g., because it is inside a float, absolutely positioned, or
+  positioned in a different slot with '[grid-]position') is positioned
+  in the default flow.
+
+  <p>In particular, any text content of the grid element itself is
+  positioned in the default flow.
+
+  <div class=example>
+  <p>For example, in this document fragment
+
+  <pre>
+&lt;DIV STYLE="grid-template: "ab*">
+ &lt;IMG STYLE="position: 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>
+ sentence.
+ &lt;
+&lt;/DIV>
+</pre>
+
+  <p>The three slots of the grid contain:
+  <dl>
+  <dt>Slot a <dd>The image
+  <dt>Slot b <dd>The text “(note well!)”
+  <dt>Default slot <dd>The text “This is an <em>emphasized</em>
+sentence.”
+  </dl>
+</div>
+
+
+
 <h3 id="track-sizing">
 Specifying the size of grid tracks</h3>
 
@@ -1330,7 +1411,7 @@ <h4 id="computed-values-grid-rows-and-columns">
 <h3 id="slot-widths">
 Calculating the widths of the slots</h3>
 
-  <p class=issue>If a slot vertical writing mode, then the values
+  <p class=issue>If a slot has a vertical writing mode, then the values
   ''max-content'' and ''min-content'' both stand for the <i>block dimension</i>
   [[!CSS3-WRITING-MODES]] of the slot's content.
 
@@ -1339,10 +1420,9 @@ <h3 id="slot-widths">
 <h3 id="slot-heights">
 Computing the height of the slots</h3>
 
-  <p class=issue>If a slot has a horizontal writing mode, then
-  the values ''max-content'' and ''min-content'' both stand for
-  the <em>block dimension</em> [[!CSS3-WRITING-MODES]] of the slot's
-  content.
+  <p>If a slot has a horizontal writing mode, then the values
+  ''max-content'' and ''min-content'' both stand for the <em>block
+  dimension</em> [[!CSS3-WRITING-MODES]] of the slot's content.
 
   <p>[Solve set of constraints as in css3-layout]
 
@@ -1457,6 +1537,50 @@ <h3>
   (&lt;identifier&gt;) or by creating an anonymous slot with the given
   row and column coordinates.
 
+<p class=issue>It is also possible to re-use 'position' instead of a
+new 'grid-position' property. Advantages: (1) no new property to
+learn, (2) no need to define whether/how 'position' works for elements
+positioned in a grid. Disadvantages: can not set 'position: relative'
+on an element positioned in a grid.
+
+  <p>Values have the following meaning:
+
+  <dl>
+  <dt>A letter <dd>&hellip;
+
+  <dt>'*' <dd>Positions the element in the default slot. <span
+  class=note>Note that the default slot may be implicit, i.e., every
+  <em>grid element</em> has a default slot, even if '*' does not
+  explicitly occur in the value of 'grid-template'</span>
+
+  <dt>&hellip; <dd>&hellip;
+  </dl>
+
+
+
+<div class=issue>
+<p>If the letter refers to a slot that doesn't exist in the element's
+<em>grid ancestor</em> (or there is no grid ancestor) what is the
+effect?
+<ol>
+  <li>The element is not positioned (i.e., it is positioned in the
+  current flow).
+
+  <li>The letter is looked for in the grid ancestor's own grid
+  ancestor, etc., recursively. If no slot of that name is found in any
+  of them, then the element is not positioned.
+
+  <li>The element is positioned in the default slot (i.e., as if
+  '[grid-]position: *' had been specified); or not positioned at all,
+  in case there is no grid ancestor.
+
+  <li>The letter is looked for in the grid ancestor's own grid
+  ancestor, etc., recursively. If no slot of that name is found in any
+  of them, then the element is positioned in the default slot.
+</ol>
+</div>
+
+
 <div class=issue>
 <p>css3-grid-align allows to define a position either by saying how
 many rows/columns it spans, or by saying  at which row and column
@@ -1608,6 +1732,40 @@ <h3 id=coord-positioning>
   <p>'grid-row' and 'grid-column' values that refer to an undefined
   line or slot will compute to ''auto''.
 
+
+<h3>Floating elements inside templates</h3>
+
+  <p>An element may be positioned inside a template (with
+  '[grid-]position') and be a floating element ('float' property) at
+  the same time. The following cases must be distinguished:
+
+  <dl>
+  <dt><a
+href="http://www.w3.org/TR/2011/WD-css3-gcpm-20111129/#page-floats"
+>Page floats</a>
+  <dd>
+  <p>For the purpose of page floats [[!CSS3PAGE]], the slot acts as a
+  page.
+
+  <p class=example>For example, if an element has 'float: top', it
+  floats to the top of the slot (or the top of the current column, if
+  it has a <span>multicolumn element</span> as ancestor that is nearer
+  than its <span>grid ancestor</span>).
+
+
+  the value of 'float' specifies that the element floats to the top or
+  bottom of the page (in a horizontal writing mode) or the left or
+  right of the page (in a vertical writing mode), the 'position'
+  property doesn't apply.
+
+  <dt>Other floats
+  <dd>
+  <p>In other cases, the element floats
+  normally within its containing block, which in this case is its slot
+  in the template (as defined <a href="#containing-block">above</a>).
+  </dl>
+
+
 <h2 id=slot-pseudo>Styling named slots: the ''::slot()'' pseudo-element</h2>
 
   <p>The slots of a <i>template element</i> can be individually