[css-display] Tablify the one-keyword 'display' property values.

--HG--
extra : rebase_source : 88aa03260685c6a3833ae8766f2119902f8bfa42

Author: tabatkins

css-display/Overview.bs

@@ -155,7 +155,7 @@ Interacting with Ancestors and Siblings: the 'display-outside' property</h3>
 			For the purposes of box generation and layout,
 			the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.
 			<p class='issue'>
-				''contents'' currently only has an effect on box generation and layout.
+				''display-outside/contents'' currently only has an effect on box generation and layout.
 				Other things that care about the document tree are unaffected, like counter scopes.
 				Is this what we want?
 
@@ -217,7 +217,7 @@ The 'display' shorthand property</h3>
 
 	<pre class="propdef">
 	Name: display
-	Value: inline | block | list-item | inline-list-item | inline-block | table | inline-table | table-cell | table-caption | flex | inline-flex | grid | inline-grid | [ <<'display-inside'>> || <<'display-outside'>> || <<'display-list'>> ]
+	Value: [ <<'display-inside'>> || <<'display-outside'>> || <<'display-list'>> ] | inline | inline-list-item | inline-table | inline-flex | inline-grid
 	Initial: see individual properties
 	Applies to: see individual properties
 	Inherited: see individual properties
@@ -226,69 +226,117 @@ The 'display' shorthand property</h3>
 	Media: see individual properties
 	</pre>
 
-	The single-keyword values listed explicitly in the grammar above are handled specially,
-	for legacy reasons.
-	All other single-keyword values,
-	and all other values in general,
-	are handled as normal for shorthands.
-
-	<dl dfn-type="value" dfn-for="display">
-		<dt><dfn>inline</dfn>
-		<dd>
-			Expands identically to ''inline-level auto''.
-
-		<dt><dfn>block</dfn>
-		<dd>
-			Expands identically to ''block-level block''.
-
-		<dt><dfn>list-item</dfn>
-		<dd>
-			Expands identically to ''block-level block list-item''.
-
-		<dt><dfn>inline-list-item</dfn>
-		<dd>
-			Expands identically to ''inline-level block list-item''.
-
-		<dt><dfn>inline-block</dfn>
-		<dd>
-			Expands identically to ''inline-level block''.
-
-		<dt><dfn>table</dfn>
-		<dd>
-			Expands identically to ''block-level table''.
-
-		<dt><dfn>inline-table</dfn>
-		<dd>
-			Expands identically to ''inline-level table''.
-
-		<dt><dfn>table-caption</dfn>
-		<dd>
-			Expands identically to ''table-caption block''.
-
-		<dt><dfn>table-cell</dfn>
-		<dd>
-			Expands identically to ''table-cell block''.
-
-		<dt><dfn>flex</dfn>
-		<dd>
-			Expands identically to ''block-level flex''.
-
-		<dt><dfn>inline-flex</dfn>
-		<dd>
-			Expands identically to ''inline-level flex''.
-
-		<dt><dfn>grid</dfn>
-		<dd>
-			Expands identically to ''block-level grid''.
+	The 'display' <a>shorthand property</a> sets all the display type properties in one declaration:
+	'display-outside', 'display-inside', and 'display-list'.
+	If only one keyword is specified
+	or only one keyword is specified together with ''display-list/list-item'',
+	the shorthand expands as specified below:
+
+	<table dfn-type="value" dfn-for="display" class='data'>
+		<thead>
+			<tr>
+				<th>'display'
+				<th>'display-outside'
+				<th>'display-inside'
+		<tbody>
+			<tr>
+				<th><dfn export>inline</dfn>
+				<td>''inline-level''
+				<td>''auto''
+			<tr>
+				<th><dfn export>block</dfn>
+				<td>''block-level''
+				<td>''display-inside/block''
+			<tr>
+				<th><dfn export>inline-block</dfn>
+				<td>''inline-level''
+				<td>''display-inside/block''
+			<tr>
+				<th><dfn>list-item</dfn> <a href="#list-item-note">*</a>
+				<td>''block-level''
+				<td>''display-inside/block''
+			<tr>
+				<th><dfn>inline-list-item</dfn> <a href="#list-item-note">*</a>
+				<td>''inline-level''
+				<td>''auto''
+		<tbody>
+			<tr>
+				<th><dfn>table</dfn>
+				<td>''block-level''
+				<td>''display-inside/table''
+			<tr>
+				<th><dfn>inline-table</dfn>
+				<td>''inline-level''
+				<td>''display-inside/table''
+			<tr>
+				<th><dfn>table-caption</dfn>
+				<td>''display-outside/table-caption''
+				<td>''display-inside/block''
+			<tr>
+				<th><dfn>table-cell</dfn>
+				<td>''display-outside/table-cell''
+				<td>''display-inside/block''
+		<tbody>
+			<tr>
+				<th><dfn>flex</dfn>
+				<td>''block-level''
+				<td>''display-inside/flex''
+			<tr>
+				<th><dfn>inline-flex</dfn>
+				<td>''inline-level''
+				<td>''display-inside/flex''
+		<tbody>
+			<tr>
+				<th><dfn>grid</dfn>
+				<td>''block-level''
+				<td>''display-inside/grid''
+			<tr>
+				<th><dfn>inline-grid</dfn>
+				<td>''inline-level''
+				<td>''display-inside/grid''
+		<tbody>
+			<tr>
+				<th><dfn>ruby</dfn>
+				<td>''inline-level''
+				<td>''display-inside/ruby''
+		<tbody>
+			<tr>
+				<th><dfn>none</dfn>
+				<td>''display-outside/none''
+				<td>''display-inside/block''
+			<tr>
+				<th><dfn>contents</dfn>
+				<td>''display-outside/contents''
+				<td>''display-inside/block''
+		<tbody>
+			<tr>
+				<th><var>all other <<'display-outside'>></var>
+				<td><<'display-outside'>>
+				<td>''auto''
+	</table>
+
+	<span id="list-item-note">* For ''display/list-item'' and ''display/inline-list-item'', additionally set 'display-list' to ''display-list/list-item''.
+
+<h3 id='transformations'>
+Automatic Box Type Transformations</h3>
+
+	Some layout effects require <dfn title="blockify|blockification">blockification</dfn>
+	or <dfn title="inlinify|inlinification">inlinification</dfn> of the box type,
+	causing the box’s 'display-outside' property, if it is not ''display-outside/none'' or ''display-outside/contents'',
+	to compute to ''block-level'' or ''inline-level'' (respectively).
+
+	<div class='example'>
+		Some examples of this include:
+
+		<ul>
+			<li>Absolute positioning or floating an element <a>blockifies</a> the box’s display type. [[CSS21]]
+			<li>Containment in a <a spec=css-ruby>ruby container</a> <a>inlinifies</a> the box’s display type, as described in [[CSS3RUBY]].
+			<li>A parent with a ''display-inside/grid'' or ''display-inside/flex'' 'display-inside' value <a>blockifies</a> the box’s display type. [[CSS3-GRID-LAYOUT]] [[CSS3-FLEXBOX]]
+		</ul>
+	</div>
 
-		<dt><dfn>inline-grid</dfn>
-		<dd>
-			Expands identically to ''inline-level grid''.
-
-		<dt><dfn>none</dfn>
-		<dd>
-			Expands identically to ''block none none''.
-	</dl>
+	The root element’s display type is always <a>blockified</a>.
+	Additionally, a 'display-outside' of ''display-outside/contents'' computes to ''block-level'' on the root element.
 
 
 
@@ -337,7 +385,6 @@ Controlling box generation: the 'box-suppress' property</h2>
 			must work as normal on this element and its descendants.
 	</dl>
 
-
 <h2 id='run-in'>
 Run-In Layout</h2>