[css-align-3] Define the behavior of % gaps against indefinite containers differently per layout mode, per WG resolution. Fixes #5081.

Author: tabatkins

css-align-3/Overview.bs

@@ -1928,7 +1928,7 @@ Row and Column Gutters: the 'row-gap' and 'column-gap' properties</h3>
 	Initial: normal
 	Applies to: <a>multi-column containers</a>, <a>flex containers</a>, <a>grid containers</a>
 	Inherited: no
-	Percentages: refer to corresponding dimension of the content area
+	Percentages: see [[#gap-percent]]
 	Computed value: specified keyword, else a computed <<length-percentage>> value
 	Animation type: by computed value type
 	</pre>
@@ -1955,11 +1955,8 @@ Row and Column Gutters: the 'row-gap' and 'column-gap' properties</h3>
 			see subsections below for details.
 
 			Negative values are invalid.
-			<a href="https://www.w3.org/TR/css-sizing-3/#percentage-sizing">As in the min size properties and margins/paddings</a> [[CSS-SIZING-3]],
-			[=cyclic percentages=] resolve against zero
-			for determining intrinsic size contributions,
-			but resolve against the box’s content box
-			when laying out the box’s contents.
+			For percentages,
+			see [[#gap-percent]].
 
 		: <dfn>normal</dfn>
 		:: The ''gap/normal'' represents
@@ -2040,6 +2037,39 @@ Gap Shorthand: the 'gap' property</h3>
 		beyond what is specified in 'gap'.
 	</div>
 
+<h3 id='gap-percent'>
+Percentages In 'gap' Properties</h3>
+
+	In general,
+	gaps introduced by the 'gap' properties
+	are intended to act like an empty item/track/etc
+	with the gap's size;
+	in other words,
+	an author should be able to reproduce the effects of 'gap'
+	by just inserting additional empty items/tracks/etc
+	into the container.
+
+	'gap' always resolves percentages against
+	the corresponding size of the [=content box=]
+	of the element.
+	When this size is definite,
+	the behavior is well-defined
+	and consistent across layout modes.
+	But since different layout modes treat [=cyclic percentages=] for items/tracks/etc differently,
+	'gap' does as well:
+
+	: In Grid Layout
+	::
+		<a href="https://www.w3.org/TR/css-sizing-3/#percentage-sizing">As in the min size properties and margins/paddings</a> [[CSS-SIZING-3]],
+		[=cyclic percentages=] resolve against zero
+		for determining intrinsic size contributions,
+		but resolve against the box’s content box
+		when laying out the box’s contents.
+
+	: In Flex Layout
+	::
+		[=Cyclic percentages=] resolve against zero in all cases.
+
 <h3 id='gap-legacy'>
 Legacy Gap Properties: the 'grid-row-gap', 'grid-column-gap', and 'grid-gap' properties</h3>