[css-display-4] Define 'reading-order: auto' #7387

Author: fantasai

css-display-4/Overview.bs

@@ -1043,15 +1043,15 @@ Display Order Shorthand: the 'order' property</h3>
 		<dd>
 			If one integer and no keyword is specified,
 			then sets 'layout-order' to the specified integer,
-			and sets 'reading-order' to zero.
+			and sets 'reading-order' to ''reading-order/auto''.
 			If two integers are specified,
 			the first sets 'layout-order' and the second sets 'reading-order'.
 			Otherwise sets the appropriate [=longhand=](s) to the specified integer(s).
 
 		<dt><dfn>layout</dfn>
 		<dd>
 			Indicates setting 'layout-order' to the specified integer.
-			If ''reading'' is not specified, 'reading-order' is set to zero.
+			If ''reading'' is not specified, 'reading-order' is set to ''reading-order/auto''.
 
 		<dt><dfn>reading</dfn>
 		<dd>
@@ -1142,8 +1142,8 @@ Reading Order: the 'reading-order' property</h3>
 
 	<pre class='propdef'>
 	Name: reading-order
-	Value: <<integer>>
-	Initial: 0
+	Value: auto | <<integer>>
+	Initial: auto
 	Applies to: all elements
 	Inherited: no
 	Computed value: specified integer
@@ -1153,10 +1153,22 @@ Reading Order: the 'reading-order' property</h3>
 	The 'reading-order' property controls the order in which
 	elements are rendered to speech
 	or are navigated to when using (linear) sequention navigation methods.
-	It takes a single <dfn value for=reading-order><<integer>></dfn> value,
-	which specifies which ordinal group the item belongs to.
-	Sibling elements are ordered starting from the lowest numbered ordinal group and going up;
-	elements with the same ordinal group are keep the order they appear in the source document.
+	This is their <dfn>reading and navigation order</dfn>.
+
+	<dl dfn-type=value dfn-for=reading-order>
+		<dt><dfn>auto</dfn>
+		<dd>
+			Same as ''0'' except that in [=randomizing formatting contexts=]
+			(which are only reasonable to apply to inherently unordered content)
+			the reading order is matched to the layout order.
+			See [[#randomizing-layout]].
+
+		<dt><dfn><<integer>></dfn>
+		<dd>
+			Specifies which ordinal group the item belongs to.
+			Sibling elements are ordered starting from the lowest numbered ordinal group and going up;
+			elements with the same ordinal group are keep the order they appear in the source document.
+	</dl>
 
 	The 'reading-order' property affects neither layout nor painting order
 	and therefore has no effect on rendering to the visual [=canvas=].
@@ -1180,6 +1192,39 @@ Reading Order: the 'reading-order' property</h3>
 
 	ISSUE: Is this the most appropriate interaction with with <code>tabindex</code>?
 
+<h4 id="randomizing-layout">
+Randomizing Layout Methods and ''reading-order: auto''</h4>
+
+	<dfn>Randomizing formatting contexts</dfn>
+	are formatting contexts that can indiscriminately scramble the layout order,
+	as listed below.
+	Since use of such methods indicates that the underlying order of the elements
+	is not important,
+	the UA will match the [=reading and navigation order=] of the elements
+	to match the layout order of their boxes as follows:
+
+	<dl>
+		<dt>''grid-auto-flow: dense''
+		<dd>
+			When ''grid-auto-flow: dense'' <a spec=css-grid-1>automatic placement</a>
+			changes the relative order of an item
+			with respect to other items with ''reading-order/auto'' or ''reading-order/0'' 'reading-order'
+			by shifting it earlier in the grid placement order,
+			then its placement in the [=reading and navigation order=] is likewise shifted.
+
+			<div class="example">
+				For example, [=grid items=] are laid out in a ''grid-auto-flow: column dense'' grid,
+				they are first re-ordered to [=order-modified document order=]
+				before applying the [[css-grid-1#auto-placement-algo]].
+				Among the subset of these items whose ''reading-order'' is ''0'' or ''auto'',
+				those with ''reading-order: auto'' are shifted
+				to the latest position in the [=reading and navigation order=]
+				that is also after any items with ''reading-order: 0'' or ''reading-order: auto''
+				that came earlier in the [=grid-modified document order=]
+				(with the major axis as specified by ''grid-auto-flow'').
+			</div>
+	</dl>
+
 <h3 id='layout-order'>
 Box Order: the 'layout-order' property</h3>