[css-grid-3][masonry] Add tie threshold property for masonry placement w3c#9328

Author: fantasai

css-grid-3/Overview.bs

@@ -719,6 +719,48 @@ Masonry Placement</h3>
 	(and their 'grid-column' shorthand).
 </section>
 
+<h3 id="masonry-slack">
+Placement Precision: the 'masonry-slack' property</h3>
+
+	<pre class=propdef>
+	Name: masonry-slack
+	Value: <<length-percentage>>
+	Initial: 1em
+	Percentages: relative to the [=grid-axis=] [=content box=] size of the [=masonry container=]
+	Inherited: no
+	Applies to: [=masonry containers=]
+	Computed value: a computed length
+	Animation type: discrete
+	</pre>
+
+	[=Masonry containers=] are filled
+	by placing each [=masonry item=]
+	in whichever [=masonry track=] is currently the least filled.
+	When multiple tracks are tied for least-filled,
+	placing the items in order looks good.
+	But if tracks are only <em>very slightly</em> different heights,
+	it can look strange to have them not fill in order,
+	as the height differences aren't perceived as <em>meaningfully</em> different.
+
+	The 'masonry-slack' property specifies what the threshold is
+	for considering tracks to be “the same height”,
+	causing them to fill in order.
+
+	<dl dfn-type=value dfn-for=masonry-slack>
+		: <dfn><<length>></dfn>
+		:: Specifies the <dfn dfn for=masonry>tie threshold</dfn>
+			for the [=masonry container=].
+			Placement positions are considered to be equally good (“tied”)
+			if they are within the specified distance
+			from the shortest position.
+
+			Note: The initial value is a “small” distance (''1em'')
+			that is probably appropriate to represent “close enough”.
+	</dl>
+
+	Issue: Is ''1em'' the right default?
+
+
 <h3 id="masonry-layout-algorithm">
 Masonry Layout and Placement Algorithm</h3>
 
@@ -735,24 +777,21 @@ Masonry Layout and Placement Algorithm</h3>
 
 			ISSUE: Should this also update the placement cursor?
 
-			Otherwise, resolve its [=grid axis=] placement using these substeps:
+Otherwise, resolve its [=grid axis=] placement using these substeps:
 
 			<ol>
-				<li>Starting at the first [=grid axis=] line in the [=implicit grid=].
-				<li>Find the largest [=running position=] of the [=grid axis=] tracks
+				<li>Starting at the first [=grid axis=] line in the [=implicit grid=],
+					find the largest [=running position=] of the [=grid axis=] tracks
 					that the item would span if it were placed at this line,
 					and call this position <var>max_pos</var>.
 				<li>Increment the line number and repeat step 2
 					until the item would no longer fit inside the grid.
-				<li>Pick the line that resulted in the smallest <var>max_pos</var>
-					as the item's definite placement in the [=grid axis=].
-					If multiple lines qualify,
-					choose the first one greater than or equal to the [=auto-placement cursor=],
-					or if there are none such,
-					choose the first one.
-				<li>Update the [=auto-placement cursor=] to point to item's last line;
-					however if this is the last line in the grid,
-					switch it to the first line.
+				<li>Let |possible lines| be the line that resulted in the smallest <var>max_pos</var>,
+					and all lines that result in a <var>max_pos</var> within the [=tie threshold=] of this <var>max_pos</var>.
+				<li>Choose the first line in |possible lines| greater than or equal to the [=auto-placement cursor=]
+					as the item's definite placement in the [=grid axis=];
+					or if there are none such, choose the first one.
+				<li>Update the [=auto-placement cursor=] to point to item's last line.
 			</ol>
 
 		<li>