[css-display] Initial work to use flow/flow-root. Needs some more cleanup.

Author: tabatkins

css-display/Overview.bs

@@ -71,7 +71,7 @@ Controlling Layout Modes: the 'display' property</h2>
 
 	<pre class="propdef">
 	Name: display
-	Value: [ <<display-inside>> || <<display-outside>> || list-item ] | <<display-internal>> | <<display-legacy>>
+	Value: [ <<display-inside>> || <<display-outside>> || list-item ] <<display-box>> | <<display-internal>> | <<display-legacy>>
 	Initial: inline
 	Applies to: all elements
 	Inherited: no
@@ -81,10 +81,16 @@ Controlling Layout Modes: the 'display' property</h2>
 	</pre>
 
 	<pre class='prod'>
-	<dfn>&lt;display-inside></dfn>   = auto | block | table | flex | grid | ruby ;
-	<dfn>&lt;display-outside></dfn>  = block-level | inline-level | run-in | contents | none ;
-	<dfn>&lt;display-internal></dfn> = table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container ;
-	<dfn>&lt;display-legacy></dfn>   = inline | inline-list-item | inline-table | inline-flex | inline-grid ;
+	<dfn>&lt;display-inside></dfn>   = flow | flow-root | table | flex | grid | ruby ;
+	<dfn>&lt;display-outside></dfn>  = block | inline | run-in;
+	<dfn>&lt;display-box></dfn> = contents | none ;
+	<dfn>&lt;display-internal></dfn> = table-row-group | table-header-group |
+	                     table-footer-group | table-row | table-cell |
+	                     table-column-group | table-column | table-caption |
+	                     ruby-base | ruby-text | ruby-base-container |
+	                     ruby-text-container ;
+	<dfn>&lt;display-legacy></dfn>   = inline-block | inline-list-item |
+	                     inline-table | inline-flex | inline-grid ;
 	</pre>
 
 	The 'display' property defines how an element generates boxes,
@@ -100,86 +106,91 @@ Controlling Layout Modes: the 'display' property</h2>
 	Additional, it controls some other box-generation details,
 	such as whether an element is a <a>list item</a> that generates a ''::marker'' pseudo-element.
 
+<h3>
+The Major Layout Modes</h3>
+
+	The most common values of display correspond directly to the major layout algorithms in CSS.
+
 	The <<display-inside>> keywords are defined as follows:
 
 	<dl dfn-type="value" dfn-for="display, <display-inside>">
-		<dt><dfn>auto</dfn>
+		<dt><dfn>flow</dfn>
 		<dd>
-			If the element's computed <a>outer display type</a> value is ''inline-level'',
-			the element is an inline element,
-			and lays out its contents using inline layout. [[!CSS21]]
-			Otherwise, this value computes to ''block''.
+			The element lays out its contents using flow layout.
+			(Also known as "block" or "inline" layout.) [[!CSS21]]
 
-			Issue: No need for ''auto'' anymore;
-			just remove it, add a value specifically for ''display: inline'',
-			and rewrite the other things that currently depend on it.
-
-		<dt><dfn>block</dfn>
+		<dt><dfn>flow-root</dfn>
 		<dd>
-			The element lays out its contents using block layout. [[!CSS21]]
-
-			If <<display-outside>> is unspecified, it defaults to ''block-level''.
+			The element lays out its contents using flow layout,
+			and establishes a <a>block formatting context</a>. [[!CSS21]]
 
 		<dt><dfn>table</dfn>
 		<dd>
 			The element lays out its contents using table layout. [[!CSS21]]
 
-			If <<display-outside>> is unspecified, it defaults to ''block-level''.
-
 		<dt><dfn>flex</dfn>
 		<dd>
 			The element lays out its contents using flex layout. [[!CSS3-FLEXBOX]]
 
-			If <<display-outside>> is unspecified, it defaults to ''block-level''.
-
 		<dt><dfn>grid</dfn>
 		<dd>
 			The element lays out its contents using grid layout. [[!CSS3-GRID-LAYOUT]]
 
-			If <<display-outside>> is unspecified, it defaults to ''block-level''.
-
 		<dt><dfn>ruby</dfn>
 		<dd>
 			The element lays out its contents using ruby layout. [[!CSS3RUBY]]
-
-			If <<display-outside>> is unspecified, it defaults to ''inline-level''.
 	</dl>
 
 	The <<display-outside>> keywords are defined as follows:
 
 	<dl dfn-type="value" dfn-for="display, <display-outside>">
-		<dt><dfn>block-level</dfn>
+		<dt><dfn>block</dfn>
 		<dd>
 			The element generates a <dfn dfn>block-level box</dfn>,
 			and participates in a block formatting context.
 			Other formatting contexts,
 			such as flex formatting contexts,
 			may also work with block-level elements. [[!CSS21]]
 
-			If <<display-inside>> is unspecified, it defaults to ''block''.
-
-		<dt><dfn>inline-level</dfn>
+		<dt><dfn>inline</dfn>
 		<dd>
-			The element generates an <dfn dfn>inline-level box</dfn>,
-			and participates in an inline formatting context. [[!CSS21]]
-
-			If <<display-inside>> is unspecified, it defaults to ''inline''.
+			The element generates an <dfn dfn>inline-level box</dfn>. [[!CSS21]]
 
 		<dt><dfn>run-in</dfn>
 		<dd>
 			The element generates a <a>run-in box</a>.
 			Run-in elements act like inlines or blocks,
 			depending on the surrounding elements.
 			See [[#run-in]] for details.
+	</dl>
 
+	If a <<display-inside>> is specified but <<display-outside>> is omitted,
+	<<display-outside>> defaults to ''block'',
+	except that ''ruby'' defaults to ''inline''.
+
+	If a <<display-outside>> is specified but <<display-inside>> is omitted,
+	<<display-inside>> defaults to ''flow''.
+
+	The <dfn value for=display>list-item</dfn> keyword
+	makes the element a <a>list item</a>.
+	If <<display-inside>> is unspecified,
+	it defaults to ''flow''.
+	If <<display-outside>> is unspecified,
+	it defaults to ''block''.
+
+<h3>
+Box Generation</h3>
+
+
+	<dl dfn-type=value dfn-for="display, <display-box>">
 		<dt><dfn>contents</dfn>
 		<dd>
 			The element itself does not generate any boxes,
 			but its children and pseudo-elements still generate boxes as normal.
 			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.
 
-			Issue: ''display-outside/contents'' currently only has an effect on box generation and layout.
+			Issue: ''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?
 
@@ -196,15 +207,8 @@ Controlling Layout Modes: the 'display' property</h2>
 			for when it's no longer suppressed.
 	</dl>
 
-	Issue: ''run-in'', ''contents'', and ''none'' shouldn't be <<display-outside>>,
-	they should just be lone values.
-	They were only in the display-outside property because it was the most appropriate of the two,
-	but none of them actually use the <<display-inside>> value.
-
-	The <dfn value for=display>list-item</dfn> keyword
-	makes the element a <a>list item</a>.
-	If <<display-inside>> is unspecified, ???.
-	If <<display-outside>> is unspecified, ???.
+<h3>
+Layout-Specific Display Types</h3>
 
 	The <<display-internal>> keywords are defined as follows:
 
@@ -214,7 +218,7 @@ Controlling Layout Modes: the 'display' property</h2>
 			The element is an <dfn dfn>internal table element</dfn>,
 			and participates in a table layout context. [[!CSS21]]
 
-			''display-outside/table-cell'' and ''display-outside/table-caption'' are <a>layout-specific leaf types</a>;
+			''table-cell'' and ''table-caption'' are <a>layout-specific leaf types</a>;
 			the rest are <a>layout-specific internal types</a>.
 
 		<dt><dfn>ruby-base</dfn>, <dfn>ruby-text</dfn>, <dfn>ruby-base-container</dfn>, <dfn>ruby-text-container</dfn>
@@ -249,28 +253,31 @@ Controlling Layout Modes: the 'display' property</h2>
 	when placed in an incompatible parent,
 	as defined by their respective specifications.
 
+<h3>
+Legacy Display Values</h3>
+
 	The <<display-legacy>> keywords are defined as follows:
 
 	<dl dfn-type=value dfn-for="display, <display-legacy>">
-		<dt><dfn>inline</dfn>
+		<dt><dfn>inline-block</dfn>
 		<dd>
-			Behaves as ''inline-level auto''.
+			Behavas as ''inline flow-root''.
 
 		<dt><dfn>inline-list-item</dfn>
 		<dd>
-			Behaves as ''inline-level auto list-item''.
+			Behaves as ''inline list-item''.
 
 		<dt><dfn>inline-table</dfn>
 		<dd>
-			Behaves as ''inline-level table''.
+			Behaves as ''inline table''.
 
 		<dt><dfn>inline-flex</dfn>
 		<dd>
-			Behaves as ''inline-level flex''.
+			Behaves as ''inline flex''.
 
 		<dt><dfn>inline-grid</dfn>
 		<dd>
-			Behaves as ''inline-level grid''.
+			Behaves as ''inline grid''.
 	</dl>
 
 <h3 id='transformations'>
@@ -279,7 +286,7 @@ Automatic Box Type Transformations</h3>
 	Some layout effects require <dfn export lt="blockify|blockification">blockification</dfn>
 	or <dfn export lt="inlinify|inlinification">inlinification</dfn> of the box type,
 	causing the box’s <a>outer display type</a>, if it is not ''none'' or ''contents'',
-	to compute to ''block-level'' or ''inline-level'' (respectively).
+	to compute to ''block'' or ''inline'' (respectively).
 
 	<div class='example'>
 		Some examples of this include:
@@ -298,7 +305,7 @@ Automatic Box Type Transformations</h3>
 	break up the inline formatting context in which it participates.
 
 	The root element’s display type is always <a>blockified</a>.
-	Additionally, a 'display' of ''contents'' computes to ''block-level'' on the root element.
+	Additionally, a 'display' of ''contents'' computes to ''block'' on the root element.
 
 
 <h2 id='box-suppress'>
@@ -419,7 +426,7 @@ Run-In Layout</h2>
 			(up to, but not including, the next <a>run-in sequence</a>, if any).
 
 		<li>
-			A <a>run-in box</a> with ''display: auto'' <a>inlinifies</a> its contents.
+			A <a>run-in box</a> with ''display: flow'' <a>inlinifies</a> its contents.
 	</ul>
 
 	A <dfn>run-in sequence</dfn> is a maximal sequence of consecutive sibling <a>run-in boxes</a>
@@ -504,13 +511,13 @@ Appendix B: Glossary</h2>
 
 		<dt><dfn lt="inline|inline box">inline</dfn>
 		<dd>
-			A non-replaced <a>inline-level</a> box whose 'display' is ''auto''.
+			A non-replaced <a>inline-level</a> box whose 'display' is ''flow''.
 			The contents of an inline box participate in the same inline formatting context as the inline box itself.
 
 		<dt><dfn lt="atomic inline|atomic inline box">atomic inline</dfn>
 		<dd>
 			An inline-level box that is replaced or that establishes a new formatting context.
-			(An inline-level box whose 'display' is not ''auto'' establishes a new formatting context of the specified type.)
+			(An inline-level box whose 'display' is not ''flow'' establishes a new formatting context of the specified type.)
 
 		<dt><dfn lt="block container|block container box">block container</dfn>
 		<dd>
@@ -552,6 +559,8 @@ Appendix B: Glossary</h2>
 
 			Issue: wordsmith this.
 
+		<dt><dfn>block formatting context</dfn>
+		<dd>
 			Block and inline formatting contexts are defined in CSS 2.1 Section 9.4.
 	</dl>