[css-display-3] Yay, last batch of initial commits. Spec is now ready for public consumption.

--HG--
extra : rebase_source : 096250f819da4190548a54bf6afbd2e0b76d8833

Author: tabatkins

css-display-3/Overview.html

@@ -11,10 +11,10 @@
 
   <meta content="CSS Display Module Level 3" name=dcterms.title>
   <meta content=text name=dcterms.type>
-  <meta content=2012-10-18 name=dcterms.issued>
+  <meta content=2012-10-19 name=dcterms.issued>
   <meta content="http://dev.w3.org/csswg/cssN-FIXME/" name=dcterms.creator>
   <meta content=W3C name=dcterms.publisher>
-  <meta content="http://www.w3.org/TR/2012/ED-cssN-FIXME-20121018/"
+  <meta content="http://www.w3.org/TR/2012/ED-cssN-FIXME-20121019/"
    name=dcterms.identifier>
   <link href="#contents" rel=contents>
   <link href="#index" rel=index>
@@ -47,14 +47,14 @@
 
    <h1>CSS Display Module Level 3</h1>
 
-   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 18 October
+   <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 19 October
     2012</h2>
 
    <dl>
     <dt>This version:
 
     <dd><a class=replaceme
-     href="http://www.w3.org/TR/2012/ED-cssN-FIXME-20121018/">http://www.w3.org/TR/2012/ED-cssN-FIXME-20121018/</a>
+     href="http://www.w3.org/TR/2012/ED-cssN-FIXME-20121019/">http://www.w3.org/TR/2012/ED-cssN-FIXME-20121019/</a>
 
     <dt>Latest version:
 
@@ -232,14 +232,17 @@ <h3 id=values><span class=secno>1.2. </span> Values</h3>
 
   <p>In addition to the property-specific values listed in their definitions,
    all properties defined in this specification also accept the <a
-   href="http://www.w3.org/TR/CSS21/cascade.html#value-def-inherit">inherit</a>
-   keyword as their property value. For readability it has not been repeated
-   explicitly.
+   href="http://www.w3.org/TR/css3-values/#common-keywords">CSS-wide
+   keywords</a> as their property value. For readability it has not been
+   repeated explicitly.
 
   <h2 id=the-display-properties><span class=secno>2. </span> The Display
    Properties</h2>
 
-  <p> ...
+  <p> The ‘<a href="#display"><code class=property>display</code></a>’
+   shorthand and its associated family of properties control the layout mode
+   of elements (how the element determines the sizes and positions of itself
+   and its descendants), and what boxes they and their descendants generate.
 
   <h3 id=the-display-inside><span class=secno>2.1. </span> Setting the layout
    mode: the ‘<a href="#display-inside"><code
@@ -284,31 +287,38 @@ <h3 id=the-display-inside><span class=secno>2.1. </span> Setting the layout
   </table>
 
   <dl>
-   <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: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> 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
+    href="#display-outside:inline-level"><code
+    class=css>inline-level</code></a>’, the element is an <i>inline
+    element</i>, and lays out its contents using inline layout. <a
+    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a> If the
+    element's computed ‘<a href="#display-outside"><code
+    class=property>display-outside</code></a>’ value is ‘<a
+    href="#display-outside:table-row-group"><code
+    class=css>table-row-group</code></a>’, ‘<a
+    href="#display-outside:table-header-group"><code
+    class=css>table-header-group</code></a>’, ‘<a
+    href="#display-outside:table-footer-group"><code
+    class=css>table-footer-group</code></a>’, ‘<a
+    href="#display-outside:table-row"><code
+    class=css>table-row</code></a>’, ‘<a
+    href="#display-outside:table-column-group"><code
+    class=css>table-column-group</code></a>’, or ‘<a
+    href="#display-outside: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:block"><code
     class=css>block</code></a>’.
 
+   <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:table">table</dfn>
 
    <dd> The element lays out its contents using table layout. <a
@@ -339,14 +349,14 @@ <h3 id=the-display-outside><span class=secno>2.2. </span> Interacting with
     <tr>
      <th>Value:
 
-     <td>block-level | inline | table-row-group | table-header-group |
+     <td>block-level | inline-level | table-row-group | table-header-group |
       table-footer-group | table-row | table-cell | table-column-group |
       table-column | table-caption
 
     <tr>
      <th>Initial:
 
-     <td>inline
+     <td>inline-level
 
     <tr>
      <th>Applies To:
@@ -370,9 +380,47 @@ <h3 id=the-display-outside><span class=secno>2.2. </span> Interacting with
   </table>
 
   <dl>
-   <dt><dfn id="display-outside:block-level"> </dfn>
+   <dt><dfn id="display-outside:block-level">block-level</dfn>
+
+   <dd> The element is <a
+    href="#display-outside:block-level"><i>block-level</i></a>, and
+    participates in a block formatting context. Other formatting contexts,
+    such as flex formatting contexts, may also work with <a
+    href="#display-outside:block-level"><i>block-level</i></a> elements. <a
+    href="#CSS21" rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
+
+   <dt><dfn id="display-outside:inline-level">inline-level</dfn>
+
+   <dd> The element is <a
+    href="#display-outside:inline-level"><i>inline-level</i></a>, and
+    participates in an inline formatting context. <a href="#CSS21"
+    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
+
+   <dt><dfn id="display-outside:table-row-group">table-row-group</dfn>, <dfn
+    id="display-outside:table-header-group">table-header-group</dfn>, <dfn
+    id="display-outside:table-footer-group">table-footer-group</dfn>, <dfn
+    id="display-outside:table-row">table-row</dfn>, <dfn
+    id="display-outside:table-cell">table-cell</dfn>, <dfn
+    id="display-outside:table-column-group">table-column-group</dfn>, <dfn
+    id="display-outside:table-column">table-column</dfn>, <dfn
+    id="display-outside:table-caption">table-caption</dfn>
+
+   <dd> The element is an internal table element, and participates in a table
+    layout context. <a href="#CSS21"
+    rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>
   </dl>
 
+  <p class=issue> Do we need special bits about some of the interactions with
+   ‘<a href="#display-inside"><code
+   class=property>display-inside</code></a>’? For example, how ‘<code
+   class=css>display:inline-level block;</code>’ works? Or does that fall
+   out of what exists, and the definitions of Block Layout in 2.1? (...or a
+   new Block Layout spec, explaining all the 2.1 stuff more sanely?)
+
+  <p class=issue> Is <a
+   href="http://lists.w3.org/Archives/Public/www-style/2012Jul/0450.html">fantasai's
+   proposal for a run-in model</a> sane enough to include in this spec?
+
   <h3 id=the-display-box><span class=secno>2.3. </span> Controlling box
    generation: the ‘<a href="#display-box"><code
    class=property>display-box</code></a>’ property</h3>
@@ -550,10 +598,34 @@ <h3 id=the-display><span class=secno>2.5. </span> The ‘<a
    handled specially, for legacy reasons. All other single-keyword values,
    and all other values in general, are handled as normal for shorthands.
 
+  <p class=issue> The general rule for new layout modes seems to be that
+   they're block-level by default. However, this conflicts with the default
+   value of ‘<a href="#display-outside"><code
+   class=property>display-outside</code></a>’, which is ‘<a
+   href="#display-outside:inline-level"><code
+   class=css>inline-level</code></a>’. What's the best way to address this?
+   Simplest answer is to just expand this list of special values as we go
+   along. Another possibility is to magic up the expansion in a different
+   way, so that if the value is just a ‘<a href="#display-inside"><code
+   class=property>display-inside</code></a>’ keyword, ‘<a
+   href="#display-outside"><code class=property>display-outside</code></a>’
+   defaults to ‘<a href="#display-outside:block-level"><code
+   class=css>block-level</code></a>’. If the latter is chosen, we could
+   remove several more of the special expansions below (all the ones that are
+   identical to a ‘<a href="#display-inside"><code
+   class=property>display-inside</code></a>’ value).
+
+  <p class=note> Several of the "special" expansions below are actually just
+   what the shorthand would expand to normally. They're included here for
+   clarity, as they're very familiar from long usage in CSS 2.1, before the
+   ‘<a href="#display"><code class=property>display</code></a>’ property
+   became a shorthand.
+
   <dl>
    <dt><dfn id="display:inline">inline</dfn>
 
-   <dd> Expands identically to ‘<code class=css>inline auto</code>’.
+   <dd> Expands identically to ‘<code class=css>inline-level
+    auto</code>’.
 
    <dt><dfn id="display:block">block</dfn>
 
@@ -567,12 +639,13 @@ <h3 id=the-display><span class=secno>2.5. </span> The ‘<a
 
    <dt><dfn id="display:inline-list-item">inline-list-item</dfn>
 
-   <dd> Expands identically to ‘<code class=css>inline block
+   <dd> Expands identically to ‘<code class=css>inline-level block
     list-item</code>’.
 
    <dt><dfn id="display:inline-block">inline-block</dfn>
 
-   <dd> Expands identically to ‘<code class=css>inline block</code>’.
+   <dd> Expands identically to ‘<code class=css>inline-level
+    block</code>’.
 
    <dt><dfn id="display:table">table</dfn>
 
@@ -581,7 +654,8 @@ <h3 id=the-display><span class=secno>2.5. </span> The ‘<a
 
    <dt><dfn id="display:inline-table">inline-table</dfn>
 
-   <dd> Expands identically to ‘<code class=css>inline table</code>’.
+   <dd> Expands identically to ‘<code class=css>inline-level
+    table</code>’.
 
    <dt><dfn id="display:table-caption">table-caption</dfn>
 
@@ -598,19 +672,22 @@ <h3 id=the-display><span class=secno>2.5. </span> The ‘<a
 
    <dt><dfn id="display:inline-flex">inline-flex</dfn>
 
-   <dd> Expands identically to ‘<code class=css>inline flex</code>’.
+   <dd> Expands identically to ‘<code class=css>inline-level
+    flex</code>’.
 
    <dt><dfn id="display:grid">grid</dfn>
 
    <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>’.
+   <dd> Expands identically to ‘<code class=css>inline-level
+    grid</code>’.
 
    <dt><dfn id="display:none">none</dfn>
 
-   <dd> Expands identically to ‘<code class=css>inline auto none</code>’.
+   <dd> Expands identically to ‘<code class=css>inline-level auto
+    none</code>’.
   </dl>
   <!--
     
@@ -894,9 +971,6 @@ <h2 class=no-num id=index> Index</h2>
   <!--begin-index-->
 
   <ul class=indexlist>
-   <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>
 
@@ -907,6 +981,9 @@ <h2 class=no-num id=index> Index</h2>
     title=block><strong>2.1.</strong></a>, <a href="#display:block"
     title=block><strong>2.5.</strong></a>
 
+   <li>block-level, <a href="#display-outside:block-level"
+    title=block-level><strong>2.2.</strong></a>
+
    <li>contents, <a href="#display-box:contents"
     title=contents><strong>2.3.</strong></a>
 
@@ -944,6 +1021,9 @@ <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-level, <a href="#display-outside:inline-level"
+    title=inline-level><strong>2.2.</strong></a>
+
    <li>inline-list-item, <a href="#display:inline-list-item"
     title=inline-list-item><strong>2.5.</strong></a>
 
@@ -973,11 +1053,32 @@ <h2 class=no-num id=index> Index</h2>
     title=table><strong>2.1.</strong></a>, <a href="#display:table"
     title=table><strong>2.5.</strong></a>
 
-   <li>table-caption, <a href="#display:table-caption"
+   <li>table-caption, <a href="#display-outside:table-caption"
+    title=table-caption><strong>2.2.</strong></a>, <a
+    href="#display:table-caption"
     title=table-caption><strong>2.5.</strong></a>
 
-   <li>table-cell, <a href="#display:table-cell"
+   <li>table-cell, <a href="#display-outside:table-cell"
+    title=table-cell><strong>2.2.</strong></a>, <a href="#display:table-cell"
     title=table-cell><strong>2.5.</strong></a>
+
+   <li>table-column, <a href="#display-outside:table-column"
+    title=table-column><strong>2.2.</strong></a>
+
+   <li>table-column-group, <a href="#display-outside:table-column-group"
+    title=table-column-group><strong>2.2.</strong></a>
+
+   <li>table-footer-group, <a href="#display-outside:table-footer-group"
+    title=table-footer-group><strong>2.2.</strong></a>
+
+   <li>table-header-group, <a href="#display-outside:table-header-group"
+    title=table-header-group><strong>2.2.</strong></a>
+
+   <li>table-row, <a href="#display-outside:table-row"
+    title=table-row><strong>2.2.</strong></a>
+
+   <li>table-row-group, <a href="#display-outside:table-row-group"
+    title=table-row-group><strong>2.2.</strong></a>
   </ul>
   <!--end-index-->
 
@@ -1050,11 +1151,11 @@ <h2 class=no-num id=property-index> Property index</h2>
     <tr>
      <th><a class=property href="#display-outside">display-outside</a>
 
-     <td>block-level | inline | table-row-group | table-header-group |
+     <td>block-level | inline-level | table-row-group | table-header-group |
       table-footer-group | table-row | table-cell | table-column-group |
       table-column | table-caption
 
-     <td>inline
+     <td>inline-level
 
      <td>all elements