[css-grid-3] [Masonry] Remove Align-Tracks and Justify-Tracks (#9529)

Issues #8208 and #8207

css-grid-3/Overview.bs

@@ -513,136 +513,6 @@ Alignment and Spacing</h2>
 	the [=grid container=]'s [=content box=] in the [=masonry axis=],
 	then the [=masonry box=] would be larger than the [=grid container=]'s [=content box=].
 
-<h3 id="tracks-alignment">
-The ''align-tracks'' and ''justify-tracks'' Properties
-</h3>
-
-	This specification adds two new properties to align
-	the items in the [=masonry axis=]
-	for each individual [=grid axis=] track:
-
-	<pre class='propdef'>>
-		Name: align-tracks
-		Value: [normal | <<baseline-position>> | <<content-distribution>> | <<overflow-position>>? <<content-position>>]#
-		Initial: normal
-		Applies to: [=grid containers=] with [=masonry layout=] in their [=block axis=]
-		Inherited: no
-		Percentages: n/a
-		Computed value: specified keyword(s)
-		Animation type: discrete
-	</pre>
-
-	<pre class='propdef'>
-		Name: justify-tracks
-		Value: [normal | <<content-distribution>> | <<overflow-position>>? [ <<content-position>> | left | right ] ]#
-		Initial: normal
-		Applies to: [=grid containers=] with [=masonry layout=] in their [=inline axis=]
-		Inherited: no
-		Percentages: n/a
-		Computed value: specified keyword(s)
-		Animation type: discrete
-	</pre>
-
-	Note: These values are the same as for 'align-content' / 'justify-content',
-	but here we accept multiple values in a comma-separated list.
-
-	Unlike 'align-content' / 'justify-content',
-	''align-tracks/normal'' behaves as ''align-tracks/start'' for these properties.
-	So the default rendering is the expected packed [=masonry layout=]
-	as shown in the top left corner in the example below.
-	When multiple values are specified,
-	the first track in the [=grid axis=] uses the first value,
-	the second track uses the second value, etc.
-	If there are fewer values than tracks,
-	then the last value is used for the remaining tracks.
-	If there are more values than tracks,
-	then the remaining values have no effect on the rendering.
-
-	<div class="example">
-		Here's a <a href="examples/align-tracks-example-1.html">testcase</a>
-		that demonstrates a few 'align-tracks' alignment possibilities.
-
-		<figure>
-			<img src="images/align-tracks-example-1.png">
-			<figcaption>
-				The rendering of the ''align-tracks'' example above.
-			</figcaption>
-		</figure>
-	</div>
-
-<h3 id="masonry-axis-stretch-alignment">
-Stretch Alignment in the Masonry Axis</h3>
-
-	''align-tracks/stretch'' will stretch the items in the [=masonry axis=]
-	for each track separately,
-	to fill the [=grid container=]'s [=content box=].
-	Any item can opt out from stretching by setting ''align-self'' / ''justify-self''
-	to something other than ''align-self/normal'' or ''align-self/stretch''
-	in the relevant axis.
-	A stretched item with an [=indefinite size=] in the [=masonry axis=]
-	will stretch its [=content-box=] size,
-	but only up to its [=max size=].
-	An item with a [=definite size=] and an ''margin/auto'' margin in the [=masonry axis=]
-	will stretch by increasing ''margin/auto'' margin(s).
-	Otherwise, the item doesn't stretch.
-
-	<div class="example">
-		Here's a <a href="examples/align-tracks-example-2.html">testcase</a>
-		that demonstrates stretching items in the [=masonry axis=].
-
-		<figure>
-			<video src="images/align-tracks-example-2.webm" controls></video>
-			<figcaption>
-				Visualization of the ''align-tracks: stretch'' example above.
-			</figcaption>
-		</figure>
-
-		Only the purple items have ''height/auto'' height,
-		so they are the ones that may grow by default.
-		A few items worth noting:
-		item 4 has ''max-height: 40px'' so it only grows up to that size
-		and then the other items in its track picks up the remaining size.
-		Item 16 opts out from resizing by setting ''align-self: end''.
-		Item 18 has ''margin-block: auto''
-		so it's centered in its allotted space instead of growing.
-		Item 20 has ''margin-top: auto''
-		so it's aligned to the end while its top-margin grows.
-	</div>
-
-	<div class="example">
-		Here's the corresponding <a href="examples/justify-tracks-example-1.html">testcase</a>
-		with a masonry [=inline axis=] instead.
-		<figure>
-			<video src="images/justify-tracks-example-1.webm" controls></video>
-			<figcaption>
-				Visualization of the ''justify-tracks: stretch'' example above.
-			</figcaption>
-		</figure>
-	</div>
-
-<h3 id="masonry-axis-alignment">
-Individual Track Alignment in the Masonry Axis</h3>
-
-	''align-tracks'' / ''justify-tracks'' values can be specified per track.
-
-	<div class="example">
-		Here's an <a href="examples/masonry-axis-alignment-1.html">example</a> to illustrate this.
-		Note that this example's 'align-tracks' value
-		intentionally has one value less than the number of tracks
-		to illustrate that the remaining track(s) use the last value
-		(i.e. the right-most track also uses ''align-tracks/space-evenly'').
-		(''align-tracks/baseline'' values are also supported
-		but excluded in this test,
-		see [[#masonry-axis-baseline-alignment]] for a description how that works with examples.)
-
-		<figure>
-			<img src="images/masonry-axis-alignment-1.png">
-			<figcaption>
-				Rendering of the ''align-tracks'' alignment example above.
-			</figcaption>
-		</figure>
-	</div>
-
 <h3 id="masonry-axis-baseline-alignment">
 Baseline Alignment in the Masonry Axis</h3>