[css-align] Fill in align-self.

tabatkins · tabatkins · commit a21ea9c3c488 · 2013-04-22T14:31:08.000-07:00
diff --git a/css-align/Overview.html b/css-align/Overview.html
@@ -260,7 +260,7 @@ <h2 id=intro><span class=secno>1. </span> Introduction</h2>
 
   <p>CSS Levels 1 and 2 allowed for the alignment of text via ‘<code
    class=property>text-align</code>’ and the alignment of blocks by
-   balancing ‘<a href="#lsquoautorsquo1"><code class=css>auto</code></a>’
+   balancing ‘<a href="#lsquoautorsquo0"><code class=css>auto</code></a>’
    margins. However, except in table cells, vertical alignment was not
    possible. As CSS3 adds further capabilities, the ability to align boxes in
    various dimensions becomes more critical. This module attempts to create a
@@ -504,7 +504,7 @@ <h3 id=positional-values><span class=secno>3.1. </span> Positional
    <dd>If the ‘<code class=property>width</code>’ or ‘<code
     class=property>height</code>’ (as appropriate) of the <a
     href="#alignment-subject"><i>alignment subject</i></a> is ‘<a
-    href="#lsquoautorsquo1"><code class=css>auto</code></a>’, its used
+    href="#lsquoautorsquo0"><code class=css>auto</code></a>’, its used
     value is the length necessary to make the <a
     href="#alignment-subject"><i>alignment subject</i></a>’s outer size as
     close to the size of the <a href="#alignment-container"><i>alignment
@@ -670,10 +670,10 @@ <h3 id=distribution-values><span class=secno>3.3. </span> Distributed
 
    <dd>If the combined size of the items is less than the size of the <a
     href="#alignment-container"><i>alignment container</i></a>, any ‘<a
-    href="#lsquoautorsquo1"><code class=css>auto</code></a>’-sized items
+    href="#lsquoautorsquo0"><code class=css>auto</code></a>’-sized items
     have their size increased equally so that the combined size exactly fills
     the <a href="#alignment-container"><i>alignment container</i></a>.
-    Otherwise, or if there are no ‘<a href="#lsquoautorsquo1"><code
+    Otherwise, or if there are no ‘<a href="#lsquoautorsquo0"><code
     class=css>auto</code></a>’-sized items, this value is identical to
     ‘<a href="#lsquoflex-startrsquo"><code
     class=css>flex-start</code></a>’. <span class=note>(For layout modes
@@ -811,16 +811,16 @@ <h2 id=content-distribution><span class=secno>4. </span> Content
 
   <p> Aligns the contents of the box as a whole along the box's
    inline/row/main axis. Values other than ‘<a
-   href="#lsquoautorsquo1"><code class=css>auto</code></a>’ are <a
+   href="#lsquoautorsquo0"><code class=css>auto</code></a>’ are <a
    href="#alignment-values">defined above</a>.
 
   <dl>
    <dt>Block Layout:
 
    <dd>
-    <p>All values other than ‘<a href="#lsquoautorsquo1"><code
+    <p>All values other than ‘<a href="#lsquoautorsquo0"><code
      class=css>auto</code></a>’ force the block container to establish a
-     new formatting context. ‘<a href="#lsquoautorsquo1"><code
+     new formatting context. ‘<a href="#lsquoautorsquo0"><code
      class=css>auto</code></a>’ otherwise behaves as ‘<a
      href="#lsquostartrsquo"><code class=css>start</code></a>’.
 
@@ -841,7 +841,7 @@ <h2 id=content-distribution><span class=secno>4. </span> Content
    <dt>Multicol Layout:
 
    <dd>
-    <p>‘<a href="#lsquoautorsquo1"><code class=css>auto</code></a>’
+    <p>‘<a href="#lsquoautorsquo0"><code class=css>auto</code></a>’
      behaves as ‘<a href="#lsquostartrsquo"><code
      class=css>start</code></a>’.
 
@@ -862,7 +862,7 @@ <h2 id=content-distribution><span class=secno>4. </span> Content
    <dt>Flex Layout:
 
    <dd>
-    <p>‘<a href="#lsquoautorsquo1"><code class=css>auto</code></a>’
+    <p>‘<a href="#lsquoautorsquo0"><code class=css>auto</code></a>’
      computes to ‘<a href="#lsquostretchrsquo0"><code
      class=css>stretch</code></a>’.
 
@@ -890,7 +890,7 @@ <h2 id=content-distribution><span class=secno>4. </span> Content
    <dt>Grid Layout:
 
    <dd>
-    <p>‘<a href="#lsquoautorsquo1"><code class=css>auto</code></a>’
+    <p>‘<a href="#lsquoautorsquo0"><code class=css>auto</code></a>’
      computes to ‘<a href="#lsquostretchrsquo0"><code
      class=css>stretch</code></a>’.
 
@@ -983,12 +983,12 @@ <h3 id=justify-self-property><span class=secno>5.1. </span>
       grammar</abbr>
   </table>
 
-  <p> Justifies the box within its parent along the inline/row axis: the
+  <p> Justifies the box within its parent along the inline/row/main axis: the
    box's outer edges are aligned within its <a
    href="#alignment-container"><i>alignment container</i></a> <a
    href="#alignment-values">as described by its alignment value</a>.
 
-  <p> The ‘<a href="#lsquoautorsquo1"><code class=css>auto</code></a>’
+  <p> The ‘<a href="#lsquoautorsquo0"><code class=css>auto</code></a>’
    keyword computes to ‘<a href="#lsquostretchrsquo0"><code
    class=css>stretch</code></a>’ on absolutely-positioned elements, and to
    the computed value of ‘<a href="#justify-items"><code
@@ -1010,8 +1010,8 @@ <h3 id=justify-self-property><span class=secno>5.1. </span>
      <a href="#alignment-container"><i>alignment container</i></a> is reduced
      by the space taken up by the float. (Note: This is the legacy behavior
      of HTML <code>align</code>.) The <a
-     href="#alignment-subject"><i>alignment subject</i></a> is block's margin
-     box.
+     href="#alignment-subject"><i>alignment subject</i></a> is the block's
+     margin box.
 
     <p> The default <a href="#overflow-alignment"><i>overflow
      alignment</i></a> is ‘<a href="#lsquosafersquo"><code
@@ -1036,14 +1036,14 @@ <h3 id=justify-self-property><span class=secno>5.1. </span>
      containing block's <i>inline axis</i>.
 
     <p>When neither margin in this dimension is ‘<a
-     href="#lsquoautorsquo1"><code class=css>auto</code></a>’ and neither
-     offset property in this dimension is ‘<a href="#lsquoautorsquo1"><code
+     href="#lsquoautorsquo0"><code class=css>auto</code></a>’ and neither
+     offset property in this dimension is ‘<a href="#lsquoautorsquo0"><code
      class=css>auto</code></a>’, values other than ‘<a
      href="#lsquostretchrsquo0"><code class=css>stretch</code></a>’ cause
      <a
      href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width">non-replaced
      absolutely-positioned boxes</a> to use shrink-to-fit sizing for
-     calculating ‘<a href="#lsquoautorsquo1"><code
+     calculating ‘<a href="#lsquoautorsquo0"><code
      class=css>auto</code></a>’ measures, and ‘<a
      href="#justify-self"><code class=property>justify-self</code></a>’
      dictates alignment as follows:
@@ -1094,7 +1094,7 @@ <h3 id=justify-self-property><span class=secno>5.1. </span>
 
     <p>The <a href="#alignment-container"><i>alignment container</i></a> is
      the <i>grid cell</i>. The <a href="#alignment-subject"><i>alignment
-     subject</i></a> is <i>grid item</i>’s margin box. The default <a
+     subject</i></a> is the <i>grid item</i>’s margin box. The default <a
      href="#overflow-alignment"><i>overflow alignment</i></a> is ‘<a
      href="#lsquotruersquo"><code class=css>true</code></a>’.
   </dl>
@@ -1177,10 +1177,102 @@ <h3 id=align-self-property><span class=secno>5.2. </span> Block/Cross-Axis
       grammar</abbr>
   </table>
 
+  <p> Aligns the box within its parent along the block/column/cross axis: the
+   box's outer edges are aligned within its <a
+   href="#alignment-container"><i>alignment container</i></a> <a
+   href="#alignment-values">as described by its alignment value</a>.
+
+  <p> The ‘<a href="#lsquoautorsquo0"><code class=css>auto</code></a>’
+   keyword computes to ‘<a href="#lsquostretchrsquo0"><code
+   class=css>stretch</code></a>’ on absolutely-positioned elements, and to
+   the computed value of ‘<a href="#justify-items"><code
+   class=property>justify-items</code></a>’ on the parent (minus any ‘<a
+   href="#lsquolegacyrsquo"><code class=css>legacy</code></a>’ keywords) on
+   all other boxes.
+
   <dl>
-   <dt><dfn id=lsquoautorsquo>‘<code class=css>auto</code>’</dfn>
+   <dt>Block-level Boxes:
+
+   <dd>
+    <p>The ‘<a href="#align-self"><code
+     class=property>align-self</code></a>’ property does not apply to
+     block-level boxes, because there is more than one item in the <i>block
+     axis</i>.
+
+   <dt>Absolutely-positioned Boxes:
+
+   <dd>
+    <p>The ‘<a href="#justify-self"><code
+     class=property>justify-self</code></a>’ property applies along its
+     containing block's <i>inline axis</i>.
 
-   <dd> ...
+    <p>When neither margin in this dimension is ‘<a
+     href="#lsquoautorsquo0"><code class=css>auto</code></a>’ and neither
+     offset property in this dimension is ‘<a href="#lsquoautorsquo0"><code
+     class=css>auto</code></a>’, values other than ‘<a
+     href="#lsquostretchrsquo0"><code class=css>stretch</code></a>’ cause
+     <a
+     href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">non-replaced
+     absolutely-positioned boxes</a> to use shrink-to-fit sizing for
+     calculating ‘<a href="#lsquoautorsquo0"><code
+     class=css>auto</code></a>’ measures, and ‘<a
+     href="#align-self"><code class=property>align-self</code></a>’
+     dictates alignment as follows:
+
+    <p> The <a href="#alignment-container"><i>alignment container</i></a> is
+     the box's containing block as modified by the offset properties
+     (‘<code class=property>top</code>’/‘<a
+     href="#lsquorightrsquo"><code
+     class=property>right</code></a>’/‘<code
+     class=property>bottom</code>’/‘<a href="#lsquoleftrsquo"><code
+     class=property>left</code></a>’). The <a
+     href="#alignment-subject"><i>alignment subject</i></a> is the box's
+     margin box.
+
+    <p> The default <a href="#overflow-alignment"><i>overflow
+     alignment</i></a> is ‘<a href="#lsquosafersquo"><code
+     class=css>safe</code></a>’. In terms of CSS2.1 formatting <a
+     href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>, the rules
+     for "over-constrained" computations in <a
+     href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">section
+     10.6.4</a> are ignored in favor of alignment as specified here and the
+     used value of the offset properties are not adjusted to correct for the
+     over-constraint.
+
+    <p> The ‘<a href="#lsquostretchrsquo0"><code
+     class=css>stretch</code></a>’ keyword is equivalent to ‘<a
+     href="#lsquostartrsquo"><code class=css>start</code></a>’ on replaced
+     absolutely-positioned boxes. (This is because CSS 2.1 does not stretch
+     replaced elements to fit into fixed offsets.)
+
+   <dt>Flex Items:
+
+   <dd>
+    <p>The ‘<a href="#align-self"><code
+     class=property>align-self</code></a>’ property applies along the
+     flexbox's <i>cross axis</i>.
+
+    <p>The <a href="#alignment-container"><i>alignment container</i></a> is
+     the <i>flex line</i> the item is in. The <a
+     href="#alignment-subject"><i>alignment subject</i></a> is the <i>flex
+     item</i>’s margin box. The default <a
+     href="#overflow-alignment"><i>overflow alignment</i></a> is ‘<a
+     href="#lsquotruersquo"><code class=css>true</code></a>’. See <a
+     href="#CSS3-FLEXBOX"
+     rel=biblioentry>[CSS3-FLEXBOX]<!--{{!CSS3-FLEXBOX}}--></a> for details.
+
+   <dt>Grid Items:
+
+   <dd>
+    <p>The ‘<a href="#align-self"><code
+     class=property>align-self</code></a>’ property applies along the
+     grid's <i>column axis</i>.
+
+    <p>The <a href="#alignment-container"><i>alignment container</i></a> is
+     the <i>grid cell</i>. The <a href="#alignment-subject"><i>alignment
+     subject</i></a> is the <i>grid item</i>’s margin box. The default <a
+     href="#overflow-alignment"><i>overflow alignment</i></a> is ‘<a
+     href="#lsquotruersquo"><code class=css>true</code></a>’.
   </dl>
 
   <h2 id=default-alignment><span class=secno>6. </span> Default Alignment</h2>
@@ -1266,17 +1358,17 @@ <h3 id=justify-items-property><span class=secno>6.1. </span>
    have the following meanings:
 
   <dl>
-   <dt><dfn id=lsquoautorsquo0>‘<code class=css>auto</code>’</dfn>
+   <dt><dfn id=lsquoautorsquo>‘<code class=css>auto</code>’</dfn>
 
    <dd>
     <p> If the element has a parent, and its computed value for ‘<a
      href="#justify-items"><code class=css>justify-items</code></a>’
      includes the ‘<a href="#lsquolegacyrsquo"><code
      class=css>legacy</code></a>’ keyword, ‘<a
-     href="#lsquoautorsquo1"><code class=css>auto</code></a>’ computes to
+     href="#lsquoautorsquo0"><code class=css>auto</code></a>’ computes to
      the parent's value.
 
-    <p> Otherwise, ‘<a href="#lsquoautorsquo1"><code
+    <p> Otherwise, ‘<a href="#lsquoautorsquo0"><code
      class=css>auto</code></a>’ computes to:
 
     <ul>
@@ -1370,7 +1462,7 @@ <h3 id=align-items-property><span class=secno>6.2. </span> Block/Cross-Axis
    have the following meanings:
 
   <dl>
-   <dt><dfn id=lsquoautorsquo1>‘<code class=css>auto</code>’</dfn>
+   <dt><dfn id=lsquoautorsquo0>‘<code class=css>auto</code>’</dfn>
 
    <dd>
     <p> Computes to:
@@ -1682,9 +1774,8 @@ <h2 class=no-num id=index> Index</h2>
     title="section 7.2."><strong>7.2.</strong></a>
 
    <li>‘<code class=css>auto</code>’, <a href="#lsquoautorsquo"
-    title="section 5.2."><strong>5.2.</strong></a>, <a
-    href="#lsquoautorsquo0" title="section 6.1."><strong>6.1.</strong></a>,
-    <a href="#lsquoautorsquo1" title="section 6.2."><strong>6.2.</strong></a>
+    title="section 6.1."><strong>6.1.</strong></a>, <a
+    href="#lsquoautorsquo0" title="section 6.2."><strong>6.2.</strong></a>
 
    <li>‘<code class=css>baseline</code>’, <a href="#lsquobaselinersquo"
     title="section 3.2."><strong>3.2.</strong></a>
diff --git a/css-align/Overview.src.html b/css-align/Overview.src.html
@@ -535,7 +535,7 @@ <h3 id='justify-self-property'>
   </table>
 
   <p>
-    Justifies the box within its parent along the inline/row axis:
+    Justifies the box within its parent along the inline/row/main axis:
     the box's outer edges are aligned within its <i>alignment container</i>
     <a href="#alignment-values">as described by its alignment value</a>.
 
@@ -558,7 +558,7 @@ <h3 id='justify-self-property'>
         and are placed next to a float,
         the <i>alignment container</i> is reduced by the space taken up by the float.
         (Note: This is the legacy behavior of HTML <code>align</code>.)
-        The <i>alignment subject</i> is block's margin box.
+        The <i>alignment subject</i> is the block's margin box.
 
       <p>
         The default <i>overflow alignment</i> is ''safe''.
@@ -608,7 +608,7 @@ <h3 id='justify-self-property'>
       <p>The 'justify-self' property applies along the grid's <i>row axis</i>.
 
       <p>The <i>alignment container</i> is the <i>grid cell</i>.
-        The <i>alignment subject</i> is <i>grid item</i>’s margin box.
+        The <i>alignment subject</i> is the <i>grid item</i>’s margin box.
         The default <i>overflow alignment</i> is ''true''.
   </dl>
 
@@ -664,10 +664,65 @@ <h3 id='align-self-property'>
       <td><abbr title="follows order of property value definition">per grammar</abbr>
   </table>
 
+  <p>
+    Aligns the box within its parent along the block/column/cross axis:
+    the box's outer edges are aligned within its <i>alignment container</i>
+    <a href="#alignment-values">as described by its alignment value</a>.
+
+  <p>
+    The ''auto'' keyword computes to
+    ''stretch'' on absolutely-positioned elements,
+    and to the computed value of 'justify-items' on the parent
+    (minus any ''legacy'' keywords) on all other boxes.
+
   <dl>
-    <dt><dfn>''auto''</dfn>
+    <dt>Block-level Boxes:
+    <dd>
+      <p>The 'align-self' property does not apply to block-level boxes,
+        because there is more than one item in the <i>block axis</i>.
+
+    <dt>Absolutely-positioned Boxes:
+    <dd>
+      <p>The 'justify-self' property applies along its containing block's <i>inline axis</i>.
+
+      <p>When neither margin in this dimension is ''auto''
+        and neither offset property in this dimension is ''auto'',
+        values other than ''stretch'' cause <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">non-replaced absolutely-positioned boxes</a>
+        to use shrink-to-fit sizing for calculating ''auto'' measures,
+        and 'align-self' dictates alignment as follows:
+
+      <p>
+        The <i>alignment container</i> is the box's containing block
+        as modified by the offset properties ('top'/'right'/'bottom'/'left').
+        The <i>alignment subject</i> is the box's margin box.
+
+      <p>
+        The default <i>overflow alignment</i> is ''safe''.
+        In terms of CSS2.1 formatting [[!CSS21]],
+        the rules for "over-constrained" computations in <a href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height">section 10.6.4</a>
+        are ignored in favor of alignment as specified here
+        and the used value of the offset properties are not adjusted to correct for the over-constraint.
+
+      <p>
+        The ''stretch'' keyword is equivalent to ''start'' on replaced absolutely-positioned boxes.
+        (This is because CSS 2.1 does not stretch replaced elements to fit into fixed offsets.)
+
+    <dt>Flex Items:
     <dd>
-      ...
+      <p>The 'align-self' property applies along the flexbox's <i>cross axis</i>.
+
+      <p>The <i>alignment container</i> is the <i>flex line</i> the item is in.
+        The <i>alignment subject</i> is the <i>flex item</i>’s margin box.
+        The default <i>overflow alignment</i> is ''true''.
+        See [[!CSS3-FLEXBOX]] for details.
+
+    <dt>Grid Items:
+    <dd>
+      <p>The 'align-self' property applies along the grid's <i>column axis</i>.
+
+      <p>The <i>alignment container</i> is the <i>grid cell</i>.
+        The <i>alignment subject</i> is the <i>grid item</i>’s margin box.
+        The default <i>overflow alignment</i> is ''true''.
   </dl>
 
 <h2 id='default-alignment'>
