[css-display-4] Adds source-order value for reading-flow

As per resolution in #11208 (comment)

Author: rachelandrew

css-display-4/Overview.bs

@@ -1166,7 +1166,7 @@ Reordering and Accessibility</h3>
 <h2 id='reading-flow'>
 Reading Order: the 'reading-flow' property</h2>
 
-A <dfn export>reading flow container</dfn> is a flex or grid container
+A <dfn export>reading flow container</dfn> is a block, flex or grid container
 with a valid 'reading-flow' value other than ''normal''.
 
 The <dfn export>rendering-defined sibling reading flow</dfn> of a <a>reading flow container</a>
@@ -1179,16 +1179,16 @@ ISSUE(9922): Should this property also apply to tables?
 
 	<pre class='propdef'>
 	Name: reading-flow
-	Value: normal | flex-visual | flex-flow | grid-rows | grid-columns | grid-order
+	Value: normal | source-order | flex-visual | flex-flow | grid-rows | grid-columns | grid-order
 	Initial: normal
-	Applies to: flex and grid containers
+	Applies to: block, flex and grid containers
 	Inherited: no
 	Computed value: as specified
 	Animation type: not animatable
 	</pre>
 
 	The 'reading-flow' property controls the order in which
-	elements in a flex or grid layout are rendered to speech
+	elements are rendered to speech
 	or are navigated to when using (linear) sequential navigation methods.
 
 	It takes one keyword value. Values are defined as follows:
@@ -1197,6 +1197,13 @@ ISSUE(9922): Should this property also apply to tables?
 		<dt><dfn>normal</dfn>
 		<dd>
 			Follow the order of elements in the DOM.
+		<dt><dfn>source-order</dfn>
+		<dd>
+			Applies to grid, flex, and block layouts.
+			Creates a reading flow container,
+			and enables the use of the 'reading-order' property on direct children.
+			Other than respecting the 'reading-order' property,
+			follows the order of elements in the DOM.
 		<dt><dfn>flex-visual</dfn>
 		<dd>
 			Only takes effect on flex containers.
@@ -1324,7 +1331,7 @@ ISSUE(9922): Should this property also apply to tables?
 	Name: reading-order
 	Value: <<integer>>
 	Initial: 0
-	Applies to: Direct children of a reading flow container
+	Applies to: Direct block-level, grid item, or flex item children of a reading flow container.
 	Inherited: no
 	Computed value: specified integer
 	Animation type: by computed value type
@@ -1370,6 +1377,31 @@ ISSUE(9922): Should this property also apply to tables?
 		</pre>
 	</div>
 
+	<div class='example'>
+		In this example there are five direct block-level children of a block container
+		where 'reading-flow' has a value of ''source-order''.
+		The third item has a 'reading-order' value of '-1'.
+		The reading flow visits the third item first, then the rest in source order.
+
+		<pre class="lang-markup">
+		&lt;div class="wrapper"&gt;
+			&lt;a href="#"&gt;Item 1&lt;/a&gt;
+			&lt;a href="#"&gt;Item 2&lt;/a&gt;
+			&lt;a href="#"&gt;Item 3&lt;/a&gt;
+			&lt;a href="#"&gt;Item 4&lt;/a&gt;
+			&lt;a href="#"&gt;Item 5&lt;/a&gt;
+		&lt;/div&gt;
+		</pre>
+
+		<pre class="lang-css">
+		.wrapper { reading-flow: source-order; }
+
+		.wrapper > a { display: block; }
+
+		.wrapper a:nth-child(3){ reading-order: -1; }
+		</pre>
+	</div>
+
 	Advisement: The source document should express
 	the underlying logical order of elements.
 	The 'reading-flow' and 'reading-order' properties exist for cases where a given document