[css-display-3] Add auto value to display-inside, rename block-inside/block to block/block-level, and remove some values no longer needed.

--HG--
extra : rebase_source : 9506e7c6def3d3a3d6a595ff78a26257af9a01ad

Author: tabatkins

css-display-3/Overview.html

@@ -255,12 +255,12 @@ <h3 id=the-display-inside><span class=secno>2.1. </span> Setting the layout
     <tr>
      <th>Value:
 
-     <td>block-inside | inline-inside | table | table-inside | flex | grid
+     <td>auto | block | table | flex | grid
 
     <tr>
      <th>Initial:
 
-     <td>inline-inside
+     <td>auto
 
     <tr>
      <th>Applies To:
@@ -283,56 +283,37 @@ <h3 id=the-display-inside><span class=secno>2.1. </span> Setting the layout
      <td>a keyword
   </table>
 
-  <p class=issue> Not super happy with the name ‘<a
-   href="#display-inside:block-inside"><code
-   class=css>block-inside</code></a>’, because it doesn't match the
-   behavior of the other ‘<code class=css>*-inside</code>’ values, but I
-   need ‘<a href="#display-inside"><code
-   class=property>display-inside</code></a>’ and ‘<a
-   href="#display-outside"><code class=property>display-outside</code></a>’
-   to have unique sets of values.
-
   <dl>
-   <dt><dfn id="display-inside:block-inside">block-inside</dfn>
+   <dt><dfn id="display-inside:block">block</dfn>
 
    <dd> The element lays out its contents using block layout. <a
     href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
 
-   <dt><dfn id="display-inside:inline-inside">inline-inside</dfn>
+   <dt><dfn id="display-inside:auto">auto</dfn>
 
    <dd> If the element's computed ‘<a href="#display-outside"><code
     class=property>display-outside</code></a>’ value is ‘<a
     href="#display:inline"><code class=css>inline</code></a>’, then it lays
     out its contents using inline layout. <a href="#CSS21"
-    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> Otherwise, this value
-    computes to ‘<a href="#display-inside:block-inside"><code
-    class=css>block-inside</code></a>’.
+    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> If the element's computed
+    ‘<a href="#display-outside"><code
+    class=property>display-outside</code></a>’ value is ‘<code
+    class=css>table-row-group</code>’, ‘<code
+    class=css>table-header-group</code>’, ‘<code
+    class=css>table-footer-group</code>’, ‘<code
+    class=css>table-row</code>’, ‘<code
+    class=css>table-column-group</code>’, or ‘<code
+    class=css>table-column</code>’, this elements acts as normal for its
+    given ‘<a href="#display-outside"><code
+    class=property>display-outside</code></a>’ value. Otherwise, this value
+    computes to ‘<a href="#display:block"><code
+    class=css>block</code></a>’.
 
    <dt><dfn id="display-inside:table">table</dfn>
 
    <dd> The element lays out its contents using table layout. <a
     href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
 
-   <dt><dfn id="display-inside:table-inside">table-inside</dfn>
-
-   <dd> If the element's computed ‘<a href="#display-outside"><code
-    class=property>display-outside</code></a>’ value is ‘<a
-    href="#display:table-row-group"><code
-    class=css>table-row-group</code></a>’, ‘<a
-    href="#display:table-header-group"><code
-    class=css>table-header-group</code></a>’, ‘<a
-    href="#display:table-footer-group"><code
-    class=css>table-footer-group</code></a>’, ‘<a
-    href="#display:table-row"><code class=css>table-row</code></a>’, ‘<a
-    href="#display:table-column-group"><code
-    class=css>table-column-group</code></a>’, or ‘<a
-    href="#display:table-column"><code class=css>table-column</code></a>’,
-    this elements acts as normal for its given ‘<a
-    href="#display-outside"><code
-    class=property>display-outside</code></a>’ value. Otherwise, this value
-    computes to ‘<a href="#display-inside:block-inside"><code
-    class=css>block-inside</code></a>’.
-
    <dt><dfn id="display-inside:flex">flex</dfn>
 
    <dd> The element lays out its contents using flex layout. <a
@@ -358,7 +339,7 @@ <h3 id=the-display-outside><span class=secno>2.2. </span> Interacting with
     <tr>
      <th>Value:
 
-     <td>block | inline | table-row-group | table-header-group |
+     <td>block-level | inline | table-row-group | table-header-group |
       table-footer-group | table-row | table-cell | table-column-group |
       table-column | table-caption
 
@@ -389,7 +370,7 @@ <h3 id=the-display-outside><span class=secno>2.2. </span> Interacting with
   </table>
 
   <dl>
-   <dt><dfn id="display-outside:block"> </dfn>
+   <dt><dfn id="display-outside:block-level"> </dfn>
   </dl>
 
   <h3 id=the-display-box><span class=secno>2.3. </span> Controlling box
@@ -525,10 +506,8 @@ <h3 id=the-display><span class=secno>2.5. </span> The ‘<a
      <th>Value:
 
      <td>inline | block | list-item | inline-list-item | inline-block | table
-      | inline-table | table-row-group | table-header-group |
-      table-footer-group | table-row | table-column-group | table-column |
-      table-cell | table-caption | flex | inline-flex | grid | inline-grid |
-      none | [ &lt;‘<a href="#display-inside"><code
+      | inline-table | table-cell | table-caption | flex | inline-flex | grid
+      | inline-grid | none | [ &lt;‘<a href="#display-inside"><code
       class=property>display-inside</code></a>’> || &lt;‘<a
       href="#display-outside"><code
       class=property>display-outside</code></a>’> || &lt;‘<a
@@ -539,7 +518,7 @@ <h3 id=the-display><span class=secno>2.5. </span> The ‘<a
     <tr>
      <th>Initial:
 
-     <td>inline
+     <td>see individual properties
 
     <tr>
      <th>Applies To:
@@ -554,12 +533,17 @@ <h3 id=the-display><span class=secno>2.5. </span> The ‘<a
     <tr>
      <th>Percentages:
 
-     <td>N/A
+     <td>see individual properties
 
     <tr>
      <th>Computed Value:
 
-     <td>N/A
+     <td>see individual properties
+
+    <tr>
+     <th>Animatable:
+
+     <td>see individual properties
   </table>
 
   <p> The single-keyword values listed explicitly in the grammar above are
@@ -569,77 +553,64 @@ <h3 id=the-display><span class=secno>2.5. </span> The ‘<a
   <dl>
    <dt><dfn id="display:inline">inline</dfn>
 
-   <dd> Expands identically to ‘<code class=css>inline
-    inline-inside</code>’.
+   <dd> Expands identically to ‘<code class=css>inline auto</code>’.
 
    <dt><dfn id="display:block">block</dfn>
 
-   <dd> Expands identically to ‘<code class=css>block
-    block-inside</code>’.
+   <dd> Expands identically to ‘<code class=css>block-level
+    block</code>’.
 
    <dt><dfn id="display:list-item">list-item</dfn>
 
-   <dd> Expands identically to ‘<code class=css>block block-inside
+   <dd> Expands identically to ‘<code class=css>block-level block
     list-item</code>’.
 
    <dt><dfn id="display:inline-list-item">inline-list-item</dfn>
 
-   <dd> Expands identically to ‘<code class=css>inline block-inside
+   <dd> Expands identically to ‘<code class=css>inline block
     list-item</code>’.
 
    <dt><dfn id="display:inline-block">inline-block</dfn>
 
-   <dd> Expands identically to ‘<code class=css>inline
-    block-inside</code>’.
+   <dd> Expands identically to ‘<code class=css>inline block</code>’.
 
    <dt><dfn id="display:table">table</dfn>
 
-   <dd> Expands identically to ‘<code class=css>block table</code>’.
+   <dd> Expands identically to ‘<code class=css>block-level
+    table</code>’.
 
    <dt><dfn id="display:inline-table">inline-table</dfn>
 
    <dd> Expands identically to ‘<code class=css>inline table</code>’.
 
-   <dt><dfn id="display:table-row-group">table-row-group</dfn>, <dfn
-    id="display:table-header-group">table-header-group</dfn>, <dfn
-    id="display:table-footer-group">table-footer-group</dfn>, <dfn
-    id="display:table-row">table-row</dfn>, <dfn
-    id="display:table-column-group">table-column-group</dfn>, <dfn
-    id="display:table-column">table-column</dfn>
-
-   <dd> Expands identically to ‘<code class=css>[the value]
-    table-inside</code>’.
-
    <dt><dfn id="display:table-caption">table-caption</dfn>
 
    <dd> Expands identically to ‘<code class=css>table-caption
-    block-inside</code>’.
+    block</code>’.
 
    <dt><dfn id="display:table-cell">table-cell</dfn>
 
-   <dd> Expands identically to ‘<code class=css>table-cell
-    block-inside</code>’.
+   <dd> Expands identically to ‘<code class=css>table-cell block</code>’.
 
    <dt><dfn id="display:flex">flex</dfn>
 
-   <dd> Expands identically to ‘<code class=css>block flex</code>’.
+   <dd> Expands identically to ‘<code class=css>block-level flex</code>’.
 
    <dt><dfn id="display:inline-flex">inline-flex</dfn>
 
    <dd> Expands identically to ‘<code class=css>inline flex</code>’.
 
    <dt><dfn id="display:grid">grid</dfn>
 
-   <dd> Expands identically to ‘<code class=css>block grid</code>’.
+   <dd> Expands identically to ‘<code class=css>block-level grid</code>’.
 
    <dt><dfn id="display:inline-grid">inline-grid</dfn>
 
    <dd> Expands identically to ‘<code class=css>inline grid</code>’.
 
    <dt><dfn id="display:none">none</dfn>
 
-   <dd> Expands identically to ‘<code class=css>inline inline-inside
-    none</code>’.
+   <dd> Expands identically to ‘<code class=css>inline auto none</code>’.
   </dl>
   <!--
     
@@ -923,15 +894,18 @@ <h2 class=no-num id=index> Index</h2>
   <!--begin-index-->
 
   <ul class=indexlist>
-   <li>, <a href="#display-outside:block" title=""><strong>2.2.</strong></a>
+   <li>, <a href="#display-outside:block-level"
+    title=""><strong>2.2.</strong></a>
 
    <li>authoring tool, <a href="#authoring-tool"
     title="authoring tool"><strong>3.2.</strong></a>
 
-   <li>block, <a href="#display:block" title=block><strong>2.5.</strong></a>
+   <li>auto, <a href="#display-inside:auto"
+    title=auto><strong>2.1.</strong></a>
 
-   <li>block-inside, <a href="#display-inside:block-inside"
-    title=block-inside><strong>2.1.</strong></a>
+   <li>block, <a href="#display-inside:block"
+    title=block><strong>2.1.</strong></a>, <a href="#display:block"
+    title=block><strong>2.5.</strong></a>
 
    <li>contents, <a href="#display-box:contents"
     title=contents><strong>2.3.</strong></a>
@@ -970,9 +944,6 @@ <h2 class=no-num id=index> Index</h2>
    <li>inline-grid, <a href="#display:inline-grid"
     title=inline-grid><strong>2.5.</strong></a>
 
-   <li>inline-inside, <a href="#display-inside:inline-inside"
-    title=inline-inside><strong>2.1.</strong></a>
-
    <li>inline-list-item, <a href="#display:inline-list-item"
     title=inline-list-item><strong>2.5.</strong></a>
 
@@ -1007,27 +978,6 @@ <h2 class=no-num id=index> Index</h2>
 
    <li>table-cell, <a href="#display:table-cell"
     title=table-cell><strong>2.5.</strong></a>
-
-   <li>table-column, <a href="#display:table-column"
-    title=table-column><strong>2.5.</strong></a>
-
-   <li>table-column-group, <a href="#display:table-column-group"
-    title=table-column-group><strong>2.5.</strong></a>
-
-   <li>table-footer-group, <a href="#display:table-footer-group"
-    title=table-footer-group><strong>2.5.</strong></a>
-
-   <li>table-header-group, <a href="#display:table-header-group"
-    title=table-header-group><strong>2.5.</strong></a>
-
-   <li>table-inside, <a href="#display-inside:table-inside"
-    title=table-inside><strong>2.1.</strong></a>
-
-   <li>table-row, <a href="#display:table-row"
-    title=table-row><strong>2.5.</strong></a>
-
-   <li>table-row-group, <a href="#display:table-row-group"
-    title=table-row-group><strong>2.5.</strong></a>
   </ul>
   <!--end-index-->
 
@@ -1085,9 +1035,9 @@ <h2 class=no-num id=property-index> Property index</h2>
     <tr>
      <th><a class=property href="#display-inside">display-inside</a>
 
-     <td>block-inside | inline-inside | table | table-inside | flex | grid
+     <td>auto | block | table | flex | grid
 
-     <td>inline-inside
+     <td>auto
 
      <td>all elements
 
@@ -1100,7 +1050,7 @@ <h2 class=no-num id=property-index> Property index</h2>
     <tr>
      <th><a class=property href="#display-outside">display-outside</a>
 
-     <td>block | inline | table-row-group | table-header-group |
+     <td>block-level | inline | table-row-group | table-header-group |
       table-footer-group | table-row | table-cell | table-column-group |
       table-column | table-caption
 
@@ -1118,19 +1068,18 @@ <h2 class=no-num id=property-index> Property index</h2>
      <th><a class=property href="#display">display</a>
 
      <td>inline | block | list-item | inline-list-item | inline-block | table
-      | inline-table | table-row-group | table-header-group |
-      table-footer-group | table-row | table-column-group | table-column |
-      table-cell | table-caption | flex | inline-flex | grid | inline-grid |
-      none | [ &lt;‘display-inside’> || &lt;‘display-outside’> ||
-      &lt;‘display-box’> || &lt;‘display-extras’> ]
+      | inline-table | table-cell | table-caption | flex | inline-flex | grid
+      | inline-grid | none | [ &lt;‘display-inside’> ||
+      &lt;‘display-outside’> || &lt;‘display-box’> ||
+      &lt;‘display-extras’> ]
 
-     <td>inline
+     <td>see individual properties
 
      <td>all elements
 
      <td>no
 
-     <td>N/A
+     <td>see individual properties
 
      <td>
   </table>