css-display/independent-flow-root/changes.diff

diff --git a/original.bs b/index.bs
index ec64c9c..f5b53e8 100644
--- a/original.bs
+++ b/index.bs
@@ -1,8 +1,8 @@
 <h1>CSS Display Module Level 3</h1>
 
 <pre class='metadata'>
-Status: ED
-Work Status: Refining
+Status: UD
+Work Status: exploring
 ED: https://drafts.csswg.org/css-display/
 Shortname: css-display
 Group: csswg
@@ -17,7 +17,7 @@ Abstract: This module describes how the CSS formatting box tree is generated fro
 Ignored Terms: display-model, display-role, table row group box, absolutely positioned, table formatting context
 At Risk: Application of ''::first-letter'' in the presence of run-ins
 At Risk: ''display: run-in''
-At Risk: All two-keyword values of 'display' and ''display: inline-list-item''
+At Risk: All multi-keyword values of 'display' and ''display: inline-list-item''
 </pre>
 <pre class="link-defaults">
 spec:css-break-3; type:dfn; text:fragment;
@@ -118,11 +118,11 @@ Box Layout Modes: the 'display' property</h2>
 
 	<pre class="propdef">
 	Name: display
-	Value: [ <<display-outside>> || <<display-inside>> ] | <<display-listitem>> | <<display-internal>> | <<display-box>> | <<display-legacy>>
+	Value: <<display-normal>> | <<display-listitem>> | <<display-internal>> | <<display-box>> | <<display-legacy>>
 	Initial: inline
 	Applies to: all elements
 	Inherited: no
-	Computed value: as specified
+	Computed value: see prose
 	Animatable: no
 	Media: all
 	</pre>
@@ -137,27 +137,50 @@ Box Layout Modes: the 'display' property</h2>
 	* the <dfn export local-lt="outer">outer display type</dfn>,
 		which dictates how the box participates in its parent formatting context.
 
-	Some 'display' values have additional side-effects:
-	such as ''list-item'', which also generates a ''::marker'' pseudo-element,
-	and ''display/none'', which causes the element's entire subtree to be left out of the box tree.
+	Some 'display' values have additional side-effects, such as:
+
+	* ''flow-root'', which makes the element <a>become a formatting context</a>.
+	* ''list-item'', which also generates a ''::marker'' pseudo-element.
+	* ''display/none'', which causes the element's entire subtree to be left out of the box tree.
 
 	Values are defined as follows:
 
 	<pre class='prod'>
-	<dfn>&lt;display-outside></dfn>  = block | inline | run-in ;
-	<dfn>&lt;display-inside></dfn>   = flow | flow-root | table | flex | grid | ruby ;
-	<dfn>&lt;display-listitem></dfn> = list-item && <<display-outside>>? && [ flow | flow-root ]?
+	<dfn>&lt;display-outside></dfn>  = block-level | inline-level | run-in ;
+	<dfn>&lt;display-inside></dfn>   = auto | block | table | flex | grid | ruby ;
+	<dfn>&lt;display-normal></dfn>   = <<display-outside>> || <<display-inside>> || flow-root ;
+	<dfn>&lt;display-listitem></dfn> = list-item && <<display-outside>>? && [ auto | block ]? && flow-root? ;
 	<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-box></dfn>      = contents | none ;
-	<dfn>&lt;display-legacy></dfn>   = inline-block | inline-list-item |
+	<dfn>&lt;display-legacy></dfn>   = inline | inline-block | inline-list-item |
 	                     inline-table | inline-flex | inline-grid ;
 	</pre>
 
-	The following informative table summarizes the values of 'display':
+	The computed value is obtained from the following algorithm,
+	after the <a>display types</a> have been modified by a possible <a>blockification</a> or <a>inlinification</a>,
+	and after converting an ''auto'' <a>inner display type</a> to ''block'' when the <a>outer display type</a> is ''block-level''.
+
+	* The computed value is the specified value in case of ''display/none'' or ''display/contents''.
+	* Otherwise, if all the following conditions hold, it's the equivalent <a href="#legacy-display">precomposed inline-level display value</a>.
+		* The <a>outer display type</a> is ''inline-level''.
+		* The <a>inner display type</a> is not ''ruby''.
+		* The <a>inner display type</a> is ''auto'' or the ''list-item'' keyword was not specified.
+		* The ''flow-root'' keyword was not specified.
+	* Otherwise, it is the concatenation of:
+		* The ''list-item'' keyword, if specified.
+		* The <a>outer display type</a>, if none of the following holds:
+			* It is ''block-level'' and the <a>inner display type</a> is not ''auto'' nor ''ruby''.
+			* It is ''inline-level'' and the <a>inner display type</a> is ''ruby''.
+		* The <a>inner display type</a>, if none of the following holds:
+			* It is ''auto''.
+			* The <a>outer display type</a> is <a>layout-internal</a>.
+		* The ''flow-root'' keyword, if specified.
+
+	The following informative table summarizes the basic values of 'display':
 
 	<style>
 		#display-value-summary td,
@@ -181,68 +204,68 @@ Box Layout Modes: the 'display' property</h2>
 		<tbody title="Flow Layout Display Types">
 			<tr>
 				<td>''block''
-				<td>''block flow''
+				<td>''block-level block''
 				<td><a>block-level</a> <a>block container</a>
 				    <abbr title="also known as">aka</abbr> <a>block box</a>
 			<tr>
 				<td>''flow-root''
-				<td>''block flow-root''
+				<td>''block-level auto flow-root''
 				<td><a>block-level</a> <a>block container</a>
 				    that establishes a new <a>block formatting context</a> (<a>BFC</a>)
 			<tr>
 				<td>''inline''
-				<td>''inline flow''
+				<td>''inline-level auto''
 				<td><a>inline box</a>
 			<tr>
 				<td>''inline-block''
-				<td>''inline flow-root''
+				<td>''inline-level block''
 				<td><a>inline-level</a> <a>block container</a>
 			<tr>
 				<td>''run-in''
-				<td>''run-in flow''
+				<td>''run-in auto''
 				<td><a>run-in box</a> (<a>inline box</a> with special box-tree-munging rules)
 			<tr>
 				<td>''list-item''
-				<td>''list-item block flow''
+				<td>''list-item block-level auto''
 				<td><a>block box</a>
 				    with additional <a href="https://www.w3.org/TR/CSS2/generate.html#lists">marker box</a>
 			<tr>
 				<td>''inline-list-item''
-				<td>''list-item inline flow''
+				<td>''list-item inline-level auto''
 				<td><a>inline box</a>
 				    with additional <a href="https://www.w3.org/TR/CSS2/generate.html#lists">marker box</a>
 		<tbody title="Formatting Context Root Display Types">
 			<tr>
 				<td>''flex''
-				<td>''block flex''
+				<td>''block-level flex''
 				<td><a>block-level</a> <a>flex container</a>
 			<tr>
 				<td>''inline-flex''
-				<td>''inline flex''
+				<td>''inline-level flex''
 				<td><a>inline-level</a> <a>flex container</a>
 			<tr>
 				<td>''grid''
-				<td>''block grid''
+				<td>''block-level grid''
 				<td><a>block-level</a> <a>grid container</a>
 			<tr>
 				<td>''inline-grid''
-				<td>''inline grid''
+				<td>''inline-level grid''
 				<td><a>inline-level</a> <a>grid container</a>
 			<tr>
 				<td>''ruby''
-				<td>''inline ruby''
+				<td>''inline-level ruby''
 				<td><a>inline-level</a> <a>ruby container</a>
 			<tr>
 				<td>''block ruby''
-				<td>''block ruby''
+				<td>''block-level ruby''
 				<td><a>block box</a> containing <a>ruby container</a>
 			<tr>
 				<td>''table''
-				<td>''block table''
+				<td>''block-level table''
 				<td><a>block-level</a> <a>table wrapper box</a> containing <a>table box</a>
 			<tr>
 				<td>''inline-table''
-				<td>''inline table''
+				<td>''inline-level table''
 				<td><a>inline-level</a> <a>table wrapper box</a> containing <a>table box</a>
 		<tbody title="Layout-internal display types">
 			<!--
@@ -274,19 +297,19 @@ Box Layout Modes: the 'display' property</h2>
 	[[CSSOM]]
 
 <h3 id="outer-role">
-Outer Display Roles for Flow Layout: the ''block'', ''inline'', and ''run-in'' keywords</h3>
+Outer Display Roles for Flow Layout: the ''block-level'', ''inline-level'', and ''run-in'' keywords</h3>
 
 	The <<display-outside>> keywords specify the element's <a>outer display type</a>,
 	which is essentially its role in <a>flow layout</a>.
 	They are defined as follows:
 
 	<dl dfn-type="value" dfn-for="display, <display-outside>">
-		<dt><dfn>block</dfn>
+		<dt><dfn>block-level</dfn>
 		<dd>
 			The element generates a <dfn dfn for>block-level box</dfn>
 			when placed in <a>flow layout</a>. [[!CSS2]]
 
-		<dt><dfn>inline</dfn>
+		<dt><dfn>inline-level</dfn>
 		<dd>
 			The element generates an <dfn dfn for>inline-level box</dfn>
 			when placed in <a>flow layout</a>. [[!CSS2]]
@@ -301,10 +324,14 @@ Outer Display Roles for Flow Layout: the ''block'', ''inline'', and ''run-in'' k
 	</dl>
 
 	If a <<display-outside>> value is specified but <<display-inside>> is omitted,
-	the element's <a>inner display type</a> defaults to ''flow''.
+	the element's <a>inner display type</a> defaults to ''auto''.
+
+	If the element has an <a>inner display type</a> that generates multiple boxes,
+	such as ''table'' or ''ruby'', the <a>outer display type</a> applies to the
+	<a>principal box</a>.
 
 <h3 id="inner-model">
-Inner Display Layout Models: the ''flow'', ''flow-root'', ''table'', ''flex'', ''grid'', and ''ruby'' keywords</h3>
+Inner Display Layout Models: the ''auto'', ''block'', ''table'', ''flex'', ''grid'', and ''ruby'' keywords</h3>
 
 	The <<display-inside>> keywords specify the element's <a>inner display type</a>,
 	which defines the type of formatting context that lays out its contents
@@ -312,38 +339,32 @@ Inner Display Layout Models: the ''flow'', ''flow-root'', ''table'', ''flex'', '
 	They are defined as follows:
 
 	<dl dfn-type="value" dfn-for="display, <display-inside>">
-		<dt><dfn>flow</dfn>
+		<dt><dfn>auto</dfn>
 		<dd>
-			The element lays out its contents using <dfn dfn for>flow layout</dfn>
-			(<a href="https://www.w3.org/TR/CSS2/visuren.html">block-and-inline layout</a>).
+			If (after <a>inlinifying</a> or <a>blockifying</a>, when applicable)
+			the element's <a>outer display type</a> is ''block-level'',
+			then ''auto'' is changed to ''block'', and 'display' computes accordingly.
 
-			If its <a>outer display type</a> is ''inline'' or ''run-in'',
-			and it is participating in a
-			<a lt="block formatting context">block</a>
-			or <a lt="inline formatting context">inline</a>
-			formatting context,
-			then it generates an <a>inline box</a>.
+			Otherwise, the element generates an <a>inline box</a>.
 
-			Otherwise it generates a <a>block container</a> box.
+		<dt><dfn>block</dfn>
+		<dd>
+			The element generates a <a>block container</a> box,
+			and lays out its contents using <dfn dfn for>flow layout</dfn>.
 
-			Depending on the value of other properties (such as 'position', 'float', or 'overflow')
-			and whether it is itself participating in a block or inline <a>formatting context</a>,
-			it either establishes a new <a>block formatting context</a> for its contents
+			Depending on the <a>outer display type</a>,
+			the value of other properties (such as 'position', 'float', or 'overflow')
+			and whether it is itself participating in a block <a>formatting context</a>,
+			the element either establishes a new <a>block formatting context</a> for its contents
 			or integrates its contents into its parent <a>formatting context</a>.
 			See <a href="https://www.w3.org/TR/CSS2/visuren.html">CSS2.1 Chapter 9</a>. [[!CSS2]]
 
-		<dt><dfn>flow-root</dfn>
-		<dd>
-			The element generates a <a>block container</a> box,
-			and lays out its contents using <a>flow layout</a>.
-			It always establishes a new <a>block formatting context</a> for its contents. [[!CSS2]]
-
 		<dt><dfn>table</dfn>
 		<dd>
 			The element generates a principal <a>table wrapper box</a>
 			that establishes a <a>block formatting context</a>,
 			and which contains
-			an additionally-generated <a>table box</a>
+			an additionally-generated block-level <a>table box</a>
 			that establishes a <a>table formatting context</a>. [[!CSS2]]
 
 		<dt><dfn>flex</dfn>
@@ -358,16 +379,46 @@ Inner Display Layout Models: the ''flow'', ''flow-root'', ''table'', ''flex'', '
 
 		<dt><dfn>ruby</dfn>
 		<dd>
-			The element generates a principal <a>ruby container</a> box,
-			and establishes a <a>ruby formatting context</a>
+			The element generates a principal ''auto'' container box,
+			which contains an additionally-generated inline-level <a>ruby container</a>
+			that establishes a <a>ruby formatting context</a>
 			in addition to integrating its base-level contents
-			into its parent <a>formatting context</a>
-			if it is inline. [[!CSS3RUBY]]
+			into its parent <a>formatting context</a>. [[!CSS3RUBY]]
 	</dl>
 
 	If a <<display-inside>> value is specified but <<display-outside>> is omitted,
-	the element's <a>outer display type</a> defaults to ''block''--
-	except for ''ruby'', which defaults to ''inline''.
+	the element's <a>outer display type</a> defaults to ''block-level''--
+	except for ''ruby'' and ''auto'', which default to ''inline-level''.
+
+<h3 id="flow-root">
+Becoming a formatting context: the ''flow-root'' keyword</h3>
+
+	The <dfn value for="display, <display-flow-root>">flow-root</dfn> keyword
+	causes the element to <dfn export lt='become a formatting context|becomes a formatting context|becoming a formatting context'>become a <a>formatting context</a></dfn>.
+	If the element's <a>inner display type</a> is ''table'', ''flex'', ''grid'',
+	this condition is satisfied.
+	Otherwise, if the element's <a>inner display type</a> is ''auto'', ''block'' or ''ruby'',
+	the <a>principal box</a> becomes a <a>block container</a> which establishes a <a>BFC</a>.
+	This change does not affect the <a>computed value</a> of the 'display' property.
+
+	If the ''flow-root'' keyword is specified and both <<display-outside>> and <<display-inside>> are omitted,
+	the element's <a>outer display type</a> defaults to ''block-level''.
+	If only one <a>display type</a> is ommitted, it defaults as usual.
+
+	In some circumstances, an element may <a>become a formatting context</a>
+	by other means than the ''flow-root'' keyword
+	(see [[CSS-CONTAIN-1]] or [[CSS3-MULTICOL]] for examples).
+
+	Note: the ''flow-root'' keyword usually has no effect on an ''inline-block'',
+	because it already establishes a BFC. But if that box is blockified, with ''flow-root''
+	the resulting <a>block box</a> will continue establishing a BFC. Without ''flow-root'', it might
+	integrate its contents into its parent BFC instead.
+
+	Issue: How should an element with a <a>layout-internal</a> <a>inner display type</a>
+	behave when <a>becoming a formatting context</a>?
+
+	Issue: Should the ''flow-root'' keyword be allowed in <<display-internal>>?
+	It might be useful in case the element is <a>blockified</a>.
 
 <h3 id="list-items">
 Generating Marker Boxes: the ''list-item'' keyword</h3>
@@ -378,10 +429,9 @@ Generating Marker Boxes: the ''list-item'' keyword</h3>
 	(<a href="https://www.w3.org/TR/CSS2/generate.html#lists">CSS 2.1§12.5 Lists</a>) [[!CSS2]]
 	together with a principal box of the specified type for its own contents.
 
-	If no <a>inner display type</a> value is specified,
-	the principal box's <a>inner display type</a> defaults to ''flow''.
-	If no <a>outer display type</a> value is specified,
-	the principal box's <a>outer display type</a> defaults to ''block''.
+	If the ''list-item'' keyword is specified and both <<display-outside>> and <<display-inside>> are omitted,
+	the element's <a>outer display type</a> defaults to ''block-level''.
+	If only one <a>display type</a> is ommitted, it defaults as usual.
 
 	Note: In this level, as restricted in the grammar,
 	a list-item can only be a block box,
@@ -414,7 +464,7 @@ Layout-Internal Display Types: the ''table-*'' and ''ruby-*'' keywords</h3>
 			which participates in a <a>table formatting context</a>.
 			See <a href="https://www.w3.org/TR/CSS2/tables.html#table-display">CSS2&sect;17.2</a> [[!CSS2]].
 
-			''table-cell'' boxes have a ''flow-root'' <a>inner display type</a>.
+			''table-cell'' boxes have a ''block'' <a>inner display type</a>.
 
 		<dt><dfn>table-caption</dfn>
 		<dd>
@@ -422,7 +472,7 @@ Layout-Internal Display Types: the ''table-*'' and ''ruby-*'' keywords</h3>
 			which is a <a>block box</a> with special behavior with respect to table and table wrapper boxes.
 			See <a href="https://www.w3.org/TR/CSS2/tables.html#table-display">CSS2&sect;17.2</a> [[!CSS2]].
 
-			''table-caption'' boxes have a ''flow-root'' <a>inner display type</a>.
+			''table-caption'' boxes have a ''block'' <a>inner display type</a>.
 		<dt>
 
 		<dt><dfn>ruby-base</dfn>, <dfn>ruby-text</dfn>, <dfn>ruby-base-container</dfn>, <dfn>ruby-text-container</dfn>
@@ -431,7 +481,7 @@ Layout-Internal Display Types: the ''table-*'' and ''ruby-*'' keywords</h3>
 			It generates the appropriate <dfn dfn for>internal ruby box</dfn>
 			which participates in a <a>ruby formatting context</a>. [[!CSS3RUBY]]
 
-			''ruby-base'' and ''ruby-text'' have a ''flow'' <a>inner display type</a>.
+			''ruby-base'' and ''ruby-text'' have an ''auto'' <a>inner display type</a>.
 	</dl>
 
 	Boxes with layout-specific display types generate anonymous wrapper boxes around themselves
@@ -553,21 +603,29 @@ Precomposed Inline-level Display Values</h3>
 	These <<display-legacy>> keywords map as follows:
 
 	<dl dfn-type=value dfn-for="display, <display-legacy>">
+		<dt><dfn>inline</dfn>
+		<dd>
+			Behaves as ''inline-level''.
+
 		<dt><dfn>inline-block</dfn>
 		<dd>
-			Behaves as ''inline flow-root''.
+			Behaves as ''inline-level block''.
 
 		<dt><dfn>inline-table</dfn>
 		<dd>
-			Behaves as ''inline table''.
+			Behaves as ''inline-level table''.
 
 		<dt><dfn>inline-flex</dfn>
 		<dd>
-			Behaves as ''inline flex''.
+			Behaves as ''inline-level flex''.
 
 		<dt><dfn>inline-grid</dfn>
 		<dd>
-			Behaves as ''inline grid''.
+			Behaves as ''inline-level grid''.
+
+		<dt><dfn>inline-list-item</dfn>
+		<dd>
+			Behaves as ''inline-level list-item''.
 	</dl>
 
 <h3 id='transformations'>
@@ -576,7 +634,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,
 	which sets the box’s <a>outer display type</a>
-	to ''block'' or ''inline'' (respectively).
+	to ''block-level'' or ''inline-level'' (respectively).
 	(This has no effects on <a>display types</a> that generate no box at all,
 	such as ''display/none'' or ''display/contents''.)
 
@@ -590,20 +648,17 @@ Automatic Box Type Transformations</h3>
 		</ul>
 	</div>
 
-	If a ''block flow'' box is <a>inlinified</a>,
-	its <a>inner display type</a> is set to ''flow-root''
-	so that it remains a block container.
-	If an ''inline flow'' box is <a>inlinified</a>,
+	If an ''inline-level auto'' box is <a>inlinified</a>,
 	it recursively <a>inlinifies</a> all of its in-flow children,
 	so that no block-level descendants
 	break up the inline formatting context in which it participates.
 
 	If a [=layout-internal=] box is <a>blockified</a>,
-	its [=inner display type=] converts to ''flow''
+	its [=inner display type=] converts to ''auto''
 	so that it becomes a <a>block container</a>.
 
 	Issue: Should conversion of layout-internal display types also happen for inlinification?
-	If it does, should it change to ''flow'' or ''flow-root''?
+	If it does, should it change to ''auto'' or ''block''?
 	If it doesn't, then anonymous-box fixup will handle things.
 
 	The root element’s display type is always <a>blockified</a>.
@@ -748,7 +803,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 a ''flow'' <a>inner display type</a> <a>inlinifies</a> its contents.
+			A <a>run-in box</a> with an ''auto'' <a>inner display type</a> <a>inlinifies</a> its contents.
 	</ul>
 
 	A <dfn>run-in sequence</dfn> is a maximal sequence of consecutive sibling <a>run-in boxes</a>
@@ -767,16 +822,6 @@ Run-In Layout</h2>
 
 	Note: This run-in model is slightly different from the one proposed in earlier revisions of [[!CSS2]].
 
-<h2 id="becoming-formatting-context">Becoming a formatting context</h2>
-
-In some circumstances (See [[CSS-CONTAIN-1]] or [[CSS3-MULTICOL]] for examples),
-an element may need to <dfn export lt='become a formatting context|becomes a formatting context|becoming a formatting context'>become a <a>formatting context</a></dfn>.
-If the element already establishes a <a>formatting context</a> of any kind,
-this condition is satisfied.
-Otherwise, it is made to establish a <a>BFC</a> by changing its <a>inner display type</a> to ''flow-root''.
-This change happens at <a>used value</a> time,
-and does not affect the <a>computed value</a> of the 'display' property.
-
 
 <h2 id='glossary' class=no-num>
 Appendix A: Glossary</h2>
@@ -811,7 +856,7 @@ Appendix A: Glossary</h2>
 
 		<dt><dfn>inline box</dfn>
 		<dd>
-			A non-replaced <a>inline-level</a> box whose <a>inner display type</a> is ''flow''.
+			A non-replaced <a>inline-level</a> box whose <a>inner display type</a> is ''auto''.
 			The contents of an inline box participate in the same inline formatting context as the inline box itself.
 
 		<dt><dfn>inline</dfn>
@@ -828,7 +873,7 @@ Appendix A: Glossary</h2>
 			and cannot split across lines
 			(as <a>inline boxes</a> and <a>ruby containers</a> can).
 
-			Any inline-level box whose <a>inner display type</a> is not ''flow''
+			Any inline-level box whose <a>inner display type</a> is not ''auto''
 			establishes a new formatting context of the specified <a>inner display type</a>.
 
 		<dt><dfn lt="block container|block container box">block container</dfn>