Overview.bs

<pre class='metadata'>
Title: CSS Gap Decorations Module Level 1
Shortname: css-gaps
Level: 1
Status: ED
Prepare for TR: no
Group: csswg
Work Status: revising
Repository: w3c/csswg-drafts
URL: https://drafts.csswg.org/css-gaps-1/
TR: https://www.w3.org/TR/css-gaps-1/
Editor: Kevin Babbitt, Microsoft, https://github.com/kbabbitt, w3cid 124689
Abstract: This module introduces several properties to add row and column gap decorations to container layout types such as grid and flex.
WPT Path Prefix: css/css-gaps/
WPT Display: open
</pre>
<pre class='anchors'>
urlPrefix: https://drafts.csswg.org/css-grid-3/; type: dfn; spec: CSS-GRID-3; text: grid lanes container
</pre>
<pre class='link-defaults'>
spec:css-backgrounds-3; type:property; text:border-style
spec:css-backgrounds-3; type:type; text:<line-style>
spec:css-backgrounds-3; type:type; text:<line-width>
spec:css-backgrounds-3; type:value; for:<line-style>; text:hidden
spec:css-backgrounds-3; type:value; for:<line-style>; text:none
spec:css-color-5; type:type; text:<color>
</pre>

<h2 id="intro">
Introduction</h2>

	<em>This section is not normative.</em>

	[[CSS-MULTICOL-1#column-gaps-and-rules]] allows for rules to be drawn
	between columns in a <a>multicol container</a>. This specification expands
	upon the 'column-rule-width', 'column-rule-style', and 'column-rule-color'
	properties, adding equivalents in the row direction, expanding their
	application to other container layouts, and giving advanced control over
	where and how gap decorations are painted.

<h3 id="values">
Value Definitions</h3>

	This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]
	using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].
	Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]].
	Combination with other CSS modules may expand the definitions of these value types.

	In addition to the property-specific values listed in their definitions,
	all properties defined in this specification
	also accept the <a>CSS-wide keywords</a> as their property value.
	For readability they have not been repeated explicitly.

<!-- Big Text: GAPS

 ███▌   ███▌  ████▌   ███▌ 
█▌  █▌ ▐█ ▐█  █▌  █▌ █▌  █▌
█▌     █▌  █▌ █▌  █▌ █▌    
█▌ ██▌ █▌  █▌ ████▌   ███▌ 
█▌  █▌ █████▌ █▌         █▌
█▌  █▌ █▌  █▌ █▌     █▌  █▌
 ███▌  █▌  █▌ █▌      ███▌ 
-->

	<h2 id="gaps">
	Gaps</h2>

	Various layouts in CSS such as
	<a>multicol containers</a>, <a>flex containers</a>, <a>grid containers</a>, and <a>grid lanes containers</a>
	position child boxes adjacent to each other with [=gaps=], also known as <a>gutters</a>, between them.

	For the purposes of this specification, <dfn>gap</dfn>, <dfn>column gap</dfn>, and <dfn>row gap</dfn> are defined as follows depending on the type of container:

	<dl>
		<dt id="gap-multicol"><a>multi-column containers</a>
		<dd>
			In the column direction, [=gap=] ([=column gap=]) refers to the [=gutter=] between adjacent <a>column boxes</a> within each [=multicol line=],
			see [[CSS-MULTICOL-1]].
			In the row direction, [=gap=] ([=row gap=]) refers to the [=gutter=] between the rows of [=column boxes=] established by 'column-height',
			see [[CSS-MULTICOL-2]].

		<dt id="gap-flex"><a>flex containers</a>
		<dd>
			In the <a>main axis</a>
			(e.g. 'column-gap' in a ''flex-flow/row'' <a>flex container</a>),
			[=gap=] ([=column gap=]) refers to the [=gutter=] between items within a single [=flex line=].

			In the <a>cross axis</a>
			(e.g. 'row-gap' in a ''flex-flow/row'' <a>flex container</a>),
			[=gap=] ([=row gap=]) refers to the [=gutter=] between adjacent <a>flex lines</a>.
		<dt id="gap-grid"><a>grid containers</a>
		<dd>
			[=row gaps=] and [=column gaps=]
			refer to the [=gutters=] between <a>grid rows</a> and <a>grid columns</a>,
			respectively.
			See [[css-grid-1#gutters]] for precise details.
	</dl>

	Note: As specified in [[CSS-ALIGN-3#column-row-gap]],
	additional spacing between items added by 'justify-content' and 'align-content'
	is included in [=gap=] size.

	<div class="example">
		<figure>
			<img alt="" src="images/multicol-gaps-2.png">
			<figcaption>
				[=Column gaps=] in orange in a multicol container with a spanner element.
				Note that [=column gaps=] break when they encounter the spanner.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<figure>
			<img alt="" src="images/multicol-gaps.png">
			<figcaption>
				Gaps in a multicol container with `column-wrap: wrap`; [=column gaps=] in orange and [=row gaps=] in blue).
				Note that [=column gaps=] in multicol containers do not overlap [=row gaps=], similar to flex.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<figure>
			<img alt="" src="images/grid-gaps.png">
			<figcaption>
				Gaps in a grid container; [=column gaps=] in orange and [=row gaps=] in blue.
				Note the shaded areas where gaps overlap.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<figure>
			<img alt="" src="images/flex-gaps.png">
			<figcaption>
				Gaps in a flex container; [=column gaps=] in orange and [=row gaps=] in blue.
				Note that, unlike in grid, gaps in flex do not overlap.
			</figcaption>
		</figure>
	</div>

<!-- Big Text: Decorations

████▌  █████▌  ███▌   ███▌  ████▌   ███▌  █████▌ ████  ███▌  █    █▌  ███▌ 
█▌  █▌ █▌     █▌  █▌ █▌  █▌ █▌  █▌ ▐█ ▐█    █▌    ▐▌  █▌  █▌ █▌   █▌ █▌  █▌
█▌  █▌ █▌     █▌     █▌  █▌ █▌  █▌ █▌  █▌   █▌    ▐▌  █▌  █▌ ██▌  █▌ █▌    
█▌  █▌ ████   █▌     █▌  █▌ ████▌  █▌  █▌   █▌    ▐▌  █▌  █▌ █▌▐█ █▌  ███▌ 
█▌  █▌ █▌     █▌     █▌  █▌ █▌▐█   █████▌   █▌    ▐▌  █▌  █▌ █▌  ██▌     █▌
█▌  █▌ █▌     █▌  █▌ █▌  █▌ █▌ ▐█  █▌  █▌   █▌    ▐▌  █▌  █▌ █▌   █▌ █▌  █▌
████▌  █████▌  ███▌   ███▌  █▌  █▌ █▌  █▌   █▌   ████  ███▌  █▌   ▐▌  ███▌ 
-->
<h2 id="gap-decorations">
Gap decorations</h2>

	[=Gaps=] may contain a <dfn>gap decoration</dfn>,
	which is a visible separator (such as a line) painted between adjacent boxes.

	<a>Gap decorations</a> do not take up space.
	That is, the presence or width of a <a>gap decoration</a> will not alter the placement of anything else.
	If a <a>gap decoration</a> is wider than its gap,
	any adjacent boxes will overlap the decoration,
	and in some cases the decoration may extend outside the box of the container.

	<a>Gap decorations</a> are painted just above the border of the container.
	For scrollable containers,
	note that while the border and background of the container aren't scrolled,
	the decorations need to scroll along with items in the container.

<!--
	<div class="example">
		<pre>
			.grid-with-spans {
			  display: grid;
			  grid-template: repeat(4, 100px) / repeat(4, 100px);
			  gap: 20px;
			  row-rule: 6px solid red;
			  column-rule: 6px solid blue;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-grid-with-spans.png">
			<figcaption>A grid with spanning items and gap decorations.</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.flex {
			  display: flex;
			  flex-wrap: wrap;
			  gap: 20px;
			  width: 500px;
			  row-rule: 6px solid red;
			  column-rule: 6px solid blue;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-flex.png">
			<figcaption>A flexbox with gap decorations.</figcaption>
		</figure>
	</div>
-->

<!-- Big Text: Geometry

 ███▌  █████▌  ███▌  █     █ █████▌ █████▌ ████▌  █   ▐▌
█▌  █▌ █▌     █▌  █▌ ██   ██ █▌       █▌   █▌  █▌ ▐▌  █ 
█▌     █▌     █▌  █▌ █▌█ █▐█ █▌       █▌   █▌  █▌  █ ▐▌ 
█▌ ██▌ ████   █▌  █▌ █▌ █ ▐█ ████     █▌   ████▌   ▐▌█  
█▌  █▌ █▌     █▌  █▌ █▌   ▐█ █▌       █▌   █▌▐█     █▌  
█▌  █▌ █▌     █▌  █▌ █▌   ▐█ █▌       █▌   █▌ ▐█    █▌  
 ███▌  █████▌  ███▌  █▌   ▐█ █████▌   █▌   █▌  █▌   █▌  
-->

<h3 id="geometry">
Geometry</h3>

	[=Gap decorations=] are painted within a [=gap=] as one or more [=gap decoration segments=].

<h4 id="segment-endpoints">
Segment endpoints</h4>

	A <dfn>segment endpoint</dfn> is a point on a [=gap's=] centerline where a <a>gap decoration segment</a>
	may start or end.
	There are two endpoint types:
	<ul>
		<li><dfn>start segment endpoint</dfn>: Point at which a segment begins.
		<li><dfn>end segment endpoint</dfn>: Point at which a segment ends.
	</ul>

	<div algorithm="create segment endpoints">
		To <dfn>create segment endpoints</dfn> for a gap |G|:
		<ol>
			<li>Bounds of a Gap:
				<p>Create endpoints at |G|'s two bounds:
				<ul>
					<li>At the centerpoint of |G|'s start edge, create a <a>start segment endpoint</a>.
					<li>At the centerpoint of |G|'s end edge, create an <a>end segment endpoint</a>.
				</ul>
				<p class="note">When a gap runs to the content boundary, these endpoints coincide with the corresponding content edge.

			<li>Within a Gap:
				<p>A <dfn>gap junction</dfn> is a region of |G|
				where one or more [=gaps=] abut or overlap |G|.
				Two [=segment endpoints=] are created for each [=gap junction=]:
				<ul>
					<li>Entering a [=gap junction=]: At the point where a cross gap appears on at least one side of |G|, create an <a>end segment endpoint</a>.
					<li>Exiting a [=gap junction=]: At the point where no cross gap exists on either side of |G|, create a <a>start segment endpoint</a>.
				</ul>
				<p class="note">This ordering (end segment endpoint, start segment endpoint) reflects that the [=gap junction=] corresponds to
				the end of one track/item/column and the beginning of another.
		</ol>
	</div>
	The following examples illustrate the locations of <a>segment endpoints</a>,
	with a purple <span style="color:#72C">+</span> for <a> start segment endpoints</a> and a
	green <span style="color:#285">+</span> for <a> end segment endpoints</a> in each case.
	[=Gap junctions=] are shown with a dashed box.

	<div class="example">
		<pre>
			.grid-with-spans {
			  display: grid;
			  grid-template: repeat(4, 100px) / repeat(4, 100px);
			  gap: 20px;
			  background: rgb(255 255 128);
			}
			.grid > * {
			  border: 1px dashed black;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-grid-segment-endpoints.png">
			<figcaption>
				Locations of <a>segment endpoints</a> and [=gap junctions=] in a grid with spanning items.
				[=Segment endpoints=] are created at the bounds of each gap (which coincide with the edges of the container),
				and within each gap in an end-start manner where the row and column gaps overlap.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.flex {
			  display: flex;
			  flex-wrap: wrap;
			  gap: 20px;
			  width: 500px;
			  background: rgb(255 255 128);
			}
			.flex > * {
			  border: 1px dashed black;
			}
		</pre>
		<figure>
			<img alt="" src="images/flex-and-segment-endpoints.png">
			<figcaption>Locations of <a>segment endpoints</a> and [=gap junctions=] in a flex container.
				Column gaps create endpoints at their bounds; some bounds coincide with the container edges
				(like the start of the gaps between #1 and #2, and #2 and #3 which coincide with the top edge of the container,
				and the end of the gap between #7 and #8 which coincides with the bottom edge of the container).
				Row gaps (between flex lines) create endpoints at their bounds,
				which coincide with the left and right edges of the container.
				Where column gaps abut row gaps, two endpoints are created in an end-start manner.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.multi-column {
			  column-count: 3;
			  column-width: 100px;
			  column-height: 50px;
			  column-wrap: wrap;
			  gap: 20px;
			  background: rgb(255 255 128);
			}

			.multi-column > * {
			  height: 100px;
			  border: 1px dashed black;
			}	
		</pre>
		<figure>
			<img alt="" src="images/multi-col-segment-endpoints.png">
			<figcaption>Locations of <a>segment endpoints</a> and [=gap junctions=] in a multi-column container.
				Column gaps (between column boxes) create endpoints at their bounds;some bounds coincide with the container edges
				(like the starts of the first 2 column gaps which coincide with the top edge,
				and the ends of the last 2 column gaps which coincide with the bottom edge).
				The row gap (between rows of column boxes) creates endpoints at its bounds,
				which coincide with the left and right edges of the container.
				Where column gaps abut the row gap, two endpoints are created in an end-start manner.
			</figcaption>
		</figure>
	</div>

<h4 id="segments">
Gap decoration segments</h4>

	<h5 class="no-toc no-num" id="segments-definitions">
	Definitions</h5>

	A <dfn>gap decoration segment</dfn> is formed by pairing a [=start segment endpoint=] with an [=end segment endpoint=].
	Each [=gap=] forms a collection of [=gap decoration segments=].

	In this section, we represent a [=gap decoration segment=] |s| as
	<code>|s| = [|s|.start, |s|.end]</code>,
	where <code>|s|.start</code> is the <a>start segment endpoint</a> of the segment,
	and <code>|s|.end</code> is the <a>end segment endpoint</a> of the segment.

	Let <dfn>UNION</dfn>(|s1|, |s2|) be equal to [|s1|.start, |s2|.end].

	A [=gap decoration segment=] is <dfn>flanked by spanning items</dfn> if, for
	every [=gap junction=] between its endpoints, there exist items on opposing sides of
	the gap that span across all perpendicular [=gaps=] contributing to that junction.

	In the context of a given [=gap=], a pair of <a>segment endpoints</a> |a| and |b| is considered <dfn>discontiguous</dfn>
	if a line segment from |a| to |b|, with the same width as the [=gap=], intersects a child item in the container.

	<h5 class="no-toc no-num" id="segments-algorithms">
	Algorithms</h5>

	<div algorithm>
		To <dfn>determine gap decoration segments</dfn> for a given [=gap=] |G|:
		<ol>
			<li>
				Let |S| be an empty list.
			</li>
			<li>
				Let |endpoints| be the result of [=creating segment endpoints=] for |G|,
				ordered by their position along |G|'s centerline from start to end.

				Note: This list is guaranteed to contain an even number of elements that strictly alternate
				between [=start segment endpoint=] and [=end segment endpoint=], beginning with a [=start segment endpoint=].
			</li>
			<li>
				If |endpoints| is empty, return |S|.
			</li>
			<li>
				Let |break| be the used value of either 'column-rule-break' or 'row-rule-break', whichever applies to the gap.
			</li>
			<li>If |break| is ''column-rule-break/none'':
				<ol>
					<li>Let |first| be the first item in |endpoints|.
					<li>Let |last| be the last item in |endpoints|.
					<li>Create a [=gap decoration segment=] |segment| = [|first|, |last|].
					<li>[=Apply offsets to a segment|Apply offsets to=] |segment|, then append it to |S|.
					<li>Return |S|.
				</ol>
			</li>

			<li><em>Empty Check:</em> If |endpoints| is empty, return |S|.

			<li>Create a [=gap decoration segment=] |s| from the first two items in |endpoints|. Remove them both from the list.

			<li>If |s|'s endpoints are <a>discontiguous</a>, go back to <em>Empty Check</em>.

			<li>While |endpoints| is not empty:
				<ol>
					<li>Create a [=gap decoration segment=] |next| from the first two items in |endpoints|, leaving them both in the list.
					<li>Let |candidate| be <a>UNION</a>(|s|, |next|).
					<li>If |candidate|'s endpoints are <a>discontiguous</a>, exit this loop.
					<li>If |break| is ''column-rule-break/intersection'' and |candidate| is not <a>flanked by spanning items</a>, exit this loop.
					<li>Remove the first two items from |endpoints|.
					<li>Set |s| to <a>UNION</a>(|s|, |next|).
				</ol>
			</li>

			<li>[=Apply offsets to a segment|Apply offsets to=] |s|, then append it to |S|.

			<li>Go back to <em>Empty Check</em>.
		</ol>
	</div>

	<div algorithm>
		To <dfn>apply offsets to a segment</dfn> |s| = [|start|, |end|]:
		<ol>
			<li>Offset |start| by the used value of the applicable [[#inset|rule-inset]] property.
			<li>Offset |end| by the used value of the applicable [[#inset|rule-inset]] property.
			<li>Update |s| with the adjusted [|start|, |end|].
		</ol>
	</div>

	<div class="example">
		<figure>
			<img alt="" src="images/grid-gap-decoration-segments.png">
			<figcaption>
				Illustration of <a>gap decoration segments</a> (blue and red rectangles) in a grid container.
				The segments are drawn between pairs of <a>segment endpoints</a>,
				with <a>start segment endpoints</a> marked with purple crosses and <a>end segment endpoints</a> marked with green crosses.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<figure>
			<img alt="" src="images/flex-gap-decoration-segments.png">
			<figcaption>
				Illustration of <a>gap decoration segments</a> (blue and red rectangles) in a flex container.
				The segments are drawn between pairs of <a>segment endpoints</a>,
				with <a>start segment endpoints</a> marked with purple crosses and <a>end segment endpoints</a> marked with green crosses.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<figure>
			<img alt="" src="images/multicol-gap-decoration-segments.png">
			<figcaption>
				Illustration of <a>gap decoration segments</a> (blue and red rectangles) in a multicol container (with column-wrap: wrap).
				The segments are drawn between pairs of <a>segment endpoints</a>,
				with <a>start segment endpoints</a> marked with purple crosses and <a>end segment endpoints</a> marked with green crosses.
			</figcaption>
		</figure>
	</div>

	<div class="example" id="example-unpaired-endpoints-1">
		<figure>
			<img alt="" src="images/flex-negative-gap-decoration-segments.png">
			<figcaption>
				Illustration of <a>gap decoration segments</a> (blue and red rectangles) in a flex container.
				The segments are drawn between pairs of <a>segment endpoints</a>,
				with <a>start segment endpoints</a> marked with purple crosses and <a>end segment endpoints</a> marked with green crosses.
			</figcaption>
		</figure>
	</div>

	<div class="example" id="example-unpaired-endpoints-2">
		<figure>
			<img alt="" src="images/flex-negative-gap-decoration-segments-example-2.png">
			<figcaption>
				Illustration of <a>gap decoration segments</a> (blue and red rectangles) in a flex container.
				The segments are drawn between pairs of <a>segment endpoints</a>,
				with <a>start segment endpoints</a> marked with purple crosses and <a>end segment endpoints</a> marked with green crosses.
			</figcaption>
		</figure>
	</div>

	<wpt>
		flex/flex-gap-decorations-001.html
		flex/flex-gap-decorations-006.html
		flex/flex-gap-decorations-007.html
		flex/flex-gap-decorations-008.html
		flex/flex-gap-decorations-015.html
		flex/flex-gap-decorations-016.html
		flex/flex-gap-decorations-020.html
		flex/flex-gap-decorations-021.html
		flex/flex-gap-decorations-022.html
		flex/flex-gap-decorations-023.html
		flex/flex-gap-decorations-024.html
		flex/flex-gap-decorations-025.html
		flex/flex-gap-decorations-026-crash.html
		flex/flex-gap-decorations-027.html
		flex/flex-gap-decorations-032.html
		grid/grid-gap-decorations-001.html
		grid/grid-gap-decorations-029.html
		grid/grid-gap-decorations-030.html
		grid/grid-gap-decorations-031.html
		grid/grid-gap-decorations-032.html
		grid/grid-gap-decorations-033.html
		grid/grid-gap-decorations-034.html
		grid/grid-gap-decorations-035.html
		grid/grid-gap-decorations-036.html
		grid/grid-gap-decorations-037.html
		grid/grid-gap-decorations-041-crash.html
		grid/grid-gap-decorations-042.html
		grid/grid-gap-decorations-043-crash.html
		grid/grid-gap-decorations-044-crash.html
		grid/grid-gap-decorations-045.html
		grid/grid-gap-decorations-046.html
		grid/grid-gap-decorations-047.html
		grid/subgrid/subgrid-gap-decorations-001.html
		grid/subgrid/subgrid-gap-decorations-002.html
		grid/subgrid/subgrid-gap-decorations-003.html
		grid/subgrid/subgrid-gap-decorations-009.html
		grid/subgrid/subgrid-gap-decorations-010.html
		grid/subgrid/subgrid-gap-decorations-011.html
		grid/subgrid/subgrid-gap-decorations-012.html
		grid/subgrid/subgrid-gap-decorations-013.html
		grid/subgrid/subgrid-gap-decorations-014.html
		grid/subgrid/subgrid-gap-decorations-015.html
		grid/subgrid/subgrid-gap-decorations-016.html
		grid/subgrid/subgrid-gap-decorations-018.html
		multicol/multicol-gap-decorations-001.html
		multicol/multicol-gap-decorations-002.html
		multicol/multicol-gap-decorations-003.html
		multicol/multicol-gap-decorations-005.html
		multicol/multicol-gap-decorations-006.html
		multicol/multicol-gap-decorations-007.html
		multicol/multicol-gap-decorations-013.html
		multicol/multicol-gap-decorations-015.html
		multicol/multicol-gap-decorations-016.html
		multicol/multicol-gap-decorations-018.html
		multicol/multicol-gap-decorations-024.html
	</wpt>

<!-- Big Text: Breaks

████▌  ████▌  █████▌  ███▌  █▌  █▌  ███▌ 
█▌  █▌ █▌  █▌ █▌     ▐█ ▐█  █▌ █▌  █▌  █▌
█▌  █▌ █▌  █▌ █▌     █▌  █▌ █▌█▌   █▌    
█████  ████▌  ████   █▌  █▌ ██      ███▌ 
█▌  █▌ █▌▐█   █▌     █████▌ █▌█▌       █▌
█▌  █▌ █▌ ▐█  █▌     █▌  █▌ █▌ █▌  █▌  █▌
████▌  █▌  █▌ █████▌ █▌  █▌ █▌  █▌  ███▌ 
-->

<h3 id="break">
Break behaviors at intersections: The 'column-rule-break', 'row-rule-break', and 'rule-break' properties</h3>

	<pre class='propdef'>
		Name: column-rule-break, row-rule-break
		Value: ''none'' | ''normal'' | ''intersection''
		Initial: ''normal''
		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
		Inherited: no
		Animation type: discrete
	</pre>

	Sets the behavior for breaking decorations within a given gap into segments
	at visible "T" or "cross" intersections formed by items in the container.
	Precise details for how to apply these values are given in the steps to [=determine gap decoration segments=].

	<dl dfn-type="value" dfn-for="column-rule-break, row-rule-break">
		<dt><dfn>none</dfn>
		<dd>
			Gap decorations do not start or end at visible "T" or "cross" intersections.
			Instead, a single continuous decoration is painted from one end of the gap to the other.
		</dd>
		<dt><dfn>normal</dfn>
		<dd>
			Behavior depends on the type of container.

			<dl>
				<dt><a>Grid containers</a>
				<dd>
					Gap decorations start and end at visible "T" intersections
					but continue through visible "cross" intersections.
				</dd>
				<dt><a>Flex containers</a>
				<dd>
					Behaves the same as ''column-rule-break/none''.
				</dd>
				<dt><a>Multicol containers</a>
				<dd>
					On 'column-rule-break', behaves the same as ''column-rule-break/intersection''.
					On 'row-rule-break', behaves the same as ''row-rule-break/none''.
				</dd>
			</dl>
		</dd>
		<dt><dfn>intersection</dfn>
		<dd>
			Gap decorations start and end at visible "T" and "cross" intersections.
		</dd>
	</dl>

	<wpt>
		flex/flex-gap-decorations-009.html
		flex/flex-gap-decorations-010.html
		flex/flex-gap-decorations-028.html
		flex/flex-gap-decorations-031.html
		grid/grid-gap-decorations-006.html
		grid/grid-gap-decorations-007.html
		grid/grid-gap-decorations-008.html
		grid/grid-gap-decorations-009.html
		grid/grid-gap-decorations-040.html
		grid/subgrid/subgrid-gap-decorations-004.html
		grid/subgrid/subgrid-gap-decorations-005.html
		grid/subgrid/subgrid-gap-decorations-006.html
		multicol/multicol-gap-decorations-014.html
		multicol/multicol-gap-decorations-020.html
	</wpt>

	<pre class='propdef shorthand'>
		Name: rule-break
		Value: <<'column-rule-break'>>
		Applies to: Same as 'column-rule-break' and 'row-rule-break'
	</pre>

	Sets the 'column-rule-break' and 'row-rule-break' properties to the same value.

	<wpt>
		parsing/rule-break-computed.html
		parsing/rule-break-invalid.html
		parsing/rule-break-shorthand.html
		parsing/rule-break-valid.html
	</wpt>

	The following examples illustrate various settings for the <a href="#break">*-rule-break</a> properties.

	<div class="example">
		<pre>
			.break-normal-grid {
				display: grid;
				grid-template: repeat(4, 100px) / repeat(4, 100px);
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-break: normal;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-break-normal-grid.png">
			<figcaption>
				Default break behavior for [=gap decorations=] in a grid.
				Each decoration stops when it encounters an item spanning across the gap.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.break-none-grid {
				display: grid;
				grid-template: repeat(4, 100px) / repeat(4, 100px);
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-break: none;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-break-none-grid.png">
			<figcaption>
				Grid <a>gap decorations</a> with no breaks.
				Note that the <a>gap decorations</a> extend "behind" items placed in the grid.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.break-intersection-grid {
				display: grid;
				grid-template: repeat(4, 100px) / repeat(4, 100px);
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-break-intersection-grid.png">
			<figcaption>
				Grid <a>gap decorations</a> contained within each [=gap decoration segment=]
				that is not flanked by spanning items on opposing sides.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.break-normal-multicol {
				column-width: 150px;
				column-height: 300px;
				gap: 1em;
				row-rule: 4px solid red;
				column-rule: 4px solid blue;
				rule-break: normal;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-break-normal-multicol.png">
			<figcaption>
				Multicol <a>gap decorations</a> with rule-break set to ''normal''.
				Note that in the column direction it behaves as if rule-break were set to ''intersection'',
				while in the row direction it behaves as if rule-break were set to ''none''.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.break-intersection-multicol {
				column-width: 150px;
				column-height: 300px;
				gap: 1em;
				row-rule: 4px solid red;
				column-rule: 4px solid blue;
				rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-break-intersection-multicol.png">
			<figcaption>
				Multicol <a>gap decorations</a> with rule-break set to ''intersection''.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.break-normal-flex {
				display: flex;
				flex-wrap: wrap;
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-break: normal;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-break-normal-flex.png">
			<figcaption>
				Default break behavior for [=gap decorations=] in a flex container.
			</figcaption>
		</figure>
		Note that each flex line has its own distinct [=gaps=] between items.
		This has two implications:
		<ol>
			<li>[=Gap decorations=] in adjacent flex lines are separate from each other even if the gaps happen to line up.
			<li>''column-rule-break/none'' would have the same visual effect as ''column-rule-break/normal''.
		</ol>
	</div>

	<div class="example">
		<pre>
			.break-intersection-flex {
				display: flex;
				flex-wrap: wrap;
				gap: 20px;
				width: 500px;
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-break-intersection-flex.png">
			<figcaption>
				Flexbox <a>gap decorations</a> contained within each [=gap decoration segment=].
			</figcaption>
		</figure>
	</div>

<!-- Big Text: Insets

████ █    █▌  ███▌  █████▌ █████▌  ███▌ 
 ▐▌  █▌   █▌ █▌  █▌ █▌       █▌   █▌  █▌
 ▐▌  ██▌  █▌ █▌     █▌       █▌   █▌    
 ▐▌  █▌▐█ █▌  ███▌  ████     █▌    ███▌ 
 ▐▌  █▌  ██▌     █▌ █▌       █▌       █▌
 ▐▌  █▌   █▌ █▌  █▌ █▌       █▌   █▌  █▌
████ █▌   ▐▌  ███▌  █████▌   █▌    ███▌ 
-->

<h3 id="inset">
Adjusting gap decoration endpoints: The 'rule-inset' properties</h3>

	<pre class='propdef'>
		Name: column-rule-edge-inset-start, column-rule-edge-inset-end, column-rule-interior-inset-start, column-rule-interior-inset-end, row-rule-edge-inset-start, row-rule-edge-inset-end, row-rule-interior-inset-start, row-rule-interior-inset-end
		Value: <<length-percentage>>
		Initial: ''0''
		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
		Inherited: no
		Percentages: refer to the <a>crossing gap width</a>
		Animation type: by computed value type
	</pre>

	These properties can be used to offset the start and end points of <a>gap decorations</a> relative to the
	<a>segment endpoints</a> which would normally determine where decorations start and end.

	<p>An <dfn>edge segment endpoint</dfn> is any [=segment endpoint=] created at the content edges of the container.</p>
	<p>An <dfn>interior segment endpoint</dfn> is any [=segment endpoint=] created at a [=gap junction=].</p>

	Percentages are resolved against the <dfn>crossing gap width</dfn>, defined as follows:
	<dl>
		<dt>
			Edge segment endpoints
		<dd>
			The <a>crossing gap width</a> is ''0''.

		<dt>
			Interior segment endpoints
		<dd>
			The <a>crossing gap width</a> is the used value of the 'column-gap' or 'row-gap' property,
			whichever applies to the intersecting gap.
	</dl>

	<p>
		The 'column-rule-edge-inset-start' and 'row-rule-edge-inset-start' properties apply to [=start segment endpoints=] that are [=edge segment endpoints=].
		The 'column-rule-interior-inset-start' and 'row-rule-interior-inset-start' properties apply to [=start segment endpoints=] that are [=interior segment endpoints=].
		For these properties, positive values offset in the forward direction, and negative values offset in the reverse direction, along the axis of the gap.
	</p>
	<p>
		The 'column-rule-edge-inset-end' and 'row-rule-edge-inset-end' properties apply to [=end segment endpoints=] that are [=edge segment endpoints=].
		The 'column-rule-interior-inset-end' and 'row-rule-interior-inset-end' properties apply to [=end segment endpoints=] that are [=interior segment endpoints=].
		For these properties, positive values offset in the reverse direction, and negative values offset in the forward direction, along the axis of the gap.
	</p>

	<wpt>
		parsing/rule-edge-start-end-inset-computed.html
		parsing/rule-edge-start-end-inset-invalid.html
		parsing/rule-interior-start-end-inset-computed.html
		parsing/rule-interior-start-end-inset-invalid.html
		flex/flex-gap-decorations-011.html
		flex/flex-gap-decorations-013.html
		flex/flex-gap-decorations-014.html
		flex/flex-gap-decorations-029.html
		flex/flex-gap-decorations-030.html
		grid/grid-gap-decorations-010.html
		grid/grid-gap-decorations-011.html
		grid/grid-gap-decorations-012.html
		grid/grid-gap-decorations-013.html
		grid/grid-gap-decorations-014.html
		grid/grid-gap-decorations-015.html
		grid/grid-gap-decorations-038.html
		grid/grid-gap-decorations-052.html
		grid/grid-gap-decorations-053.html
		grid/subgrid/subgrid-gap-decorations-007.html
		grid/subgrid/subgrid-gap-decorations-008.html
		multicol/multicol-gap-decorations-008.html
		multicol/multicol-gap-decorations-009.html
		multicol/multicol-gap-decorations-010.html
		multicol/multicol-gap-decorations-011.html
		multicol/multicol-gap-decorations-012.html
	</wpt>

	<h4 id="insets-start-end">
	''-start'' and ''-end'' shorthands</h4>

	These shorthands allow authors to achieve uniform asymmetric decorations.

	<div class="example">
		<pre>
			.inset-start-8px-end-0px {
				column-rule-inset-start: 8px;
				column-rule-inset-end: 0px;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-column-start-end-edge-interior-insets.png">
			<figcaption>
				A start inset of ''8px'' recedes the starts of [=gap decorations=],
				while an end inset of ''0px'' aligns the ends of [=gap decorations=] with content edges.
			</figcaption>
		</figure>
	</div>

	<pre class='propdef shorthand'>
		Name: column-rule-inset-start, column-rule-inset-end, row-rule-inset-start, row-rule-inset-end
		Value: <<length-percentage>>
		Applies to: Same as 'column-rule-edge-inset-start', 'column-rule-interior-inset-start', 'column-rule-edge-inset-end', 'column-rule-interior-inset-end', 'row-rule-edge-inset-start', 'row-rule-interior-inset-start', 'row-rule-edge-inset-end', and 'row-rule-interior-inset-end'
	</pre>

	Set the corresponding ''-edge-'' and ''-interior-'' properties to the same value.
	For example, 'column-rule-inset-start' sets both 'column-rule-edge-inset-start' and 'column-rule-interior-inset-start' to the same value.

	<pre class='propdef shorthand'>
		Name: rule-inset-start
		Value: <<'column-rule-inset-start'>>
		Applies to: Same as 'column-rule-inset-start' and 'row-rule-inset-start'
	</pre>

	Sets the 'column-rule-inset-start' and 'row-rule-inset-start' properties to the same value.

	<pre class='propdef shorthand'>
		Name: rule-inset-end
		Value: <<'column-rule-inset-end'>>
		Applies to: Same as 'column-rule-inset-end' and 'row-rule-inset-end'
	</pre>

	Sets the 'column-rule-inset-end' and 'row-rule-inset-end' properties to the same value.

	<h4 id="insets-edge-interior">
	''-edge-'' and ''-interior-'' shorthands</h4>

	These shorthands allow authors to achieve different treatments at edge versus interior intersections.

	<div class="example">
		<pre>
			.inset-edge-0px-interior-negative-5px {
				column-rule-edge-inset: 0px;
				column-rule-interior-inset: -5px;
				column-rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-column-interior-inset-5px.png">
			<figcaption>
				An interior inset of ''-5px'' extends the endpoints of interior <a>gap decorations</a>
				slightly beyond the edges of adjacent items. An edge inset of ''0px'' aligns the endpoints of edge <a>gap decorations</a>
				with the content edges.
			</figcaption>
		</figure>
	</div>

	<pre class='propdef shorthand'>
		Name: column-rule-edge-inset, column-rule-interior-inset, row-rule-edge-inset, row-rule-interior-inset
		Value: <<length-percentage>> [ <<length-percentage>> ]?
		Applies to: Same as 'column-rule-edge-inset-start', 'column-rule-edge-inset-end', 'column-rule-interior-inset-start', 'column-rule-interior-inset-end', 'row-rule-edge-inset-start', 'row-rule-edge-inset-end', 'row-rule-interior-inset-start', and 'row-rule-interior-inset-end'
	</pre>

	These shorthands set the corresponding ''-start'' and ''-end'' properties.
	For example, 'column-rule-edge-inset' sets both 'column-rule-edge-inset-start' and 'column-rule-edge-inset-end'.
	If one value is specified, both properties are set to that value.
	If two values are specified, ''-start'' is set to the first and ''-end'' is set to the second.

	<pre class='propdef shorthand'>
		Name: rule-edge-inset
		Value: <<'column-rule-edge-inset'>>
		Applies to: Same as 'column-rule-edge-inset' and 'row-rule-edge-inset'
	</pre>

	Sets the 'column-rule-edge-inset' and 'row-rule-edge-inset' properties to the same value.

	<pre class='propdef shorthand'>
		Name: rule-interior-inset
		Value: <<'column-rule-interior-inset'>>
		Applies to: Same as 'column-rule-interior-inset' and 'row-rule-interior-inset'
	</pre>

	Sets the 'column-rule-interior-inset' and 'row-rule-interior-inset' properties to the same value.

	<wpt>
		parsing/rule-edge-inset-bidirectional-shorthand.html
		parsing/rule-edge-interior-inset-computed.html
		parsing/rule-edge-interior-inset-invalid.html
		parsing/rule-edge-interior-inset-shorthand.html
		parsing/rule-edge-interior-inset-valid.html
		parsing/rule-interior-inset-bidirectional-shorthand.html
	</wpt>

	<h4 id="insets-universal">
	Universal shorthands</h4>

	These shorthands allow authors to achieve uniform treatments throughout a container.

	<div class="example">
		<pre>
			.inset-0px {
				column-rule-inset: 0px;
				column-rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-column-inset-0px.png">
			<figcaption>
				An inset of ''0px'' aligns the ends of <a>gap decorations</a> with adjacent items.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.inset-positive-5px {
				column-rule-inset: 5px;
				column-rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-column-inset-minus-5px.png">
			<figcaption>
				An inset of ''5px'' shortens the ends of <a>gap decorations</a>
				relative to the edges of adjacent items.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.inset-negative-5px {
				column-rule-inset: -5px;
				column-rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-column-inset-5px.png">
			<figcaption>
				An inset of ''-5px'' extends the ends of <a>gap decorations</a>
				slightly beyond the edges of adjacent items.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.inset-negative-50percent {
				column-rule-inset: -50%;
				column-rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-column-inset-50percent.png">
		<figcaption>
			An inset of ''-50%'' extends each end of a <a>gap decoration</a>
			halfway into its intersection.
			Neighboring <a>gap decorations</a> "meet in the middle" to create a continuous line.
			Note that at the edges of the container, the <a>crossing gap width</a> is defined to be ''0'',
			so the inset value of ''-50%'' resolves to ''0''
			and thus the <a>gap decoration</a> does not extend beyond the bounds of the container.
			(Contrast with the previous example, which specified an inset in ''px'' units.)
		</figcaption>
		</figure>
	</div>

	<pre class='propdef shorthand'>
		Name: column-rule-inset, row-rule-inset
		Value: <<'column-rule-edge-inset'>> [ / <<'column-rule-interior-inset'>> ]?
		Applies to: Same as 'column-rule-edge-inset', 'column-rule-interior-inset', 'row-rule-edge-inset', and 'row-rule-interior-inset'
	</pre>

	These shorthands set the corresponding edge and interior start and end values.
	The order of values is:
	<pre class='prod'>
		edge-start edge-end? [/ interior-start interior-end?]?
	</pre>

	Omitted values are filled in as follows:
	<ol>
		<li>If the interior values are omitted, they are copied from the edge values.
		<li>Any omitted end value is copied from the corresponding start value.
	</ol>

	<pre class='propdef shorthand'>
		Name: rule-inset
		Value: <<'column-rule-inset'>>
		Applies to: Same as 'column-rule-inset' and 'row-rule-inset'
	</pre>

	Sets the 'column-rule-inset' and 'row-rule-inset' properties to the same value.

	<wpt>
		parsing/rule-inset-bidirectional-shorthand.html
		parsing/rule-inset-computed.html
		parsing/rule-inset-invalid.html
		parsing/rule-inset-shorthand.html
		parsing/rule-inset-valid.html
	</wpt>

<!-- Big Text: Visibility

█▌   █▌ ████  ███▌  ████ ████▌  ████ █▌    ████ █████▌ █   ▐▌
█▌   █▌  ▐▌  █▌  █▌  ▐▌  █▌  █▌  ▐▌  █▌     ▐▌    █▌   ▐▌  █ 
█▌   █▌  ▐▌  █▌      ▐▌  █▌  █▌  ▐▌  █▌     ▐▌    █▌    █ ▐▌ 
▐▌   █   ▐▌   ███▌   ▐▌  █████   ▐▌  █▌     ▐▌    █▌    ▐▌█  
 █  ▐▌   ▐▌      █▌  ▐▌  █▌  █▌  ▐▌  █▌     ▐▌    █▌     █▌  
 ▐▌ █    ▐▌  █▌  █▌  ▐▌  █▌  █▌  ▐▌  █▌     ▐▌    █▌     █▌  
  ▐█    ████  ███▌  ████ ████▌  ████ █████ ████   █▌     █▌  
-->
<h3 id="visibility">
Gap decoration visibility: The 'rule-visibility-items' properties</h3>
	<pre class='propdef'>
		Name: column-rule-visibility-items, row-rule-visibility-items
		Value: ''all'' | ''around'' | ''between''
		Initial: ''all''
		Applies to: <a>grid containers</a>, and <a>multicol containers</a>
		Inherited: no
		Computed value: as specified
		Animation type: discrete
	</pre>

	These properties control whether a [=gap decoration segment=] is painted
	in portions of [=gaps=] adjacent to empty areas.

	<dl dfn-type="value" dfn-for="column-rule-visibility-items, row-rule-visibility-items">
		<dt><dfn>all</dfn>
		<dd>Paint decorations in all gap segments, regardless of whether adjacent items are present.
		<dt><dfn>around</dfn>
		<dd>Paint decorations in a gap segment if at least one of the two adjacent areas is occupied by an item.
		<dt><dfn>between</dfn>
		<dd>Paint decorations in a gap segment if both adjacent areas are occupied by items.
	</dl>

	<pre class='propdef shorthand'>
		Name: rule-visibility-items
		Value: <<'column-rule-visibility-items'>>
		Applies to: Same as 'column-rule-visibility-items' and 'row-rule-visibility-items'
	</pre>

	Sets the 'column-rule-visibility-items' and 'row-rule-visibility-items' properties to the same value.

	<div class="example">
		<pre>
			.break-normal-with-around-grid {
				display: grid;
				grid-template: repeat(3, 100px) / repeat(3, 100px);
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-visibility-items: around;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-vis-rules-around-spn.png">
			<figcaption>
				Gap decorations with 'rule-break' ''column-rule-break/normal'' and 'rule-visibility-items' ''column-rule-visibility-items/around''.
			</figcaption>
		</figure>
	</div>
	
	<div class="example">
		<pre>
			.break-intersection-with-around-grid {
				display: grid;
				grid-template: repeat(3, 100px) / repeat(3, 100px);
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-inset: 0px;
				rule-visibility-items: around;
				rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-vis-rules-around-int.png">
			<figcaption>
				Gap decorations with and 'rule-break' ''column-rule-break/intersection'' and 'rule-visibility-items' ''column-rule-visibility-items/around''.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.break-intersection-with-between-grid {
				display: grid;
				grid-template: repeat(3, 100px) / repeat(3, 100px);
				gap: 20px;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
				rule-inset: 0px;
				rule-visibility-items: between;
				rule-break: intersection;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-vis-rules-btwn-int.png">
			<figcaption>
				Gap decorations with 'rule-break' ''column-rule-break/intersection'' and 'rule-visibility-items' ''column-rule-visibility-items/between''.
			</figcaption>
		</figure>
	</div>

	<wpt>
		grid/grid-gap-decorations-054.html
		grid/grid-gap-decorations-055.html
		grid/grid-gap-decorations-056.html
		grid/grid-gap-decorations-057.html
		grid/fragmentation/grid-gap-decorations-fragmentation-025.html
		grid/fragmentation/grid-gap-decorations-fragmentation-026.html
		grid/fragmentation/grid-gap-decorations-fragmentation-027.html
		grid/subgrid/subgrid-gap-decorations-019.html
		grid/subgrid/subgrid-gap-decorations-020.html
		grid/subgrid/subgrid-gap-decorations-021.html
		grid/subgrid/subgrid-gap-decorations-022.html
		grid/subgrid/subgrid-gap-decorations-023.html
		grid/subgrid/subgrid-gap-decorations-024.html
		grid/subgrid/subgrid-gap-decorations-025.html
		parsing/rule-visibility-items-computed.html
		parsing/rule-visibility-items-invalid.html
		parsing/rule-visibility-items-shorthand.html
		parsing/rule-visibility-items-valid.html
	</wpt>

<!-- Big Text: Overlap

 ███▌  █▌   █▌ █████▌ ████▌  █▌     ███▌  ████▌ 
█▌  █▌ █▌   █▌ █▌     █▌  █▌ █▌    ▐█ ▐█  █▌  █▌
█▌  █▌ █▌   █▌ █▌     █▌  █▌ █▌    █▌  █▌ █▌  █▌
█▌  █▌ ▐▌   █  ████   ████▌  █▌    █▌  █▌ ████▌ 
█▌  █▌  █  ▐▌  █▌     █▌▐█   █▌    █████▌ █▌    
█▌  █▌  ▐▌ █   █▌     █▌ ▐█  █▌    █▌  █▌ █▌    
 ███▌    ▐█    █████▌ █▌  █▌ █████ █▌  █▌ █▌    
-->

<h3 id="overlap">
Gap decoration overlap: The 'rule-overlap' property</h3>

	<pre class='propdef'>
		Name: rule-overlap
		Value: ''row-over-column'' | ''column-over-row''
		Initial: ''row-over-column''
		Applies to: <a>grid containers</a>, <a>flex containers</a>, and <a>grid lanes containers</a>
		Inherited: no
		Animation type: discrete
	</pre>

	Sets the paint order for overlapping <a>gap decorations</a>.

	<dl dfn-type="value" dfn-for="rule-overlap">
		<dt><dfn>row-over-column</dfn>
		<dd>Row-direction decorations are painted above column-direction decorations.
		<dt><dfn>column-over-row</dfn>
		<dd>Column-direction decorations are painted above row-direction decorations.
	</dl>

	<div class="example">
		<pre>
			.row-over-column {
				rule-overlap: row-over-column;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-row-over-column.png">
			<figcaption>
				Row-over-column gap decoration overlap.
			</figcaption>
		</figure>
	</div>

	<div class="example">
		<pre>
			.column-over-row {
				rule-overlap: column-over-row;
				row-rule: 6px solid red;
				column-rule: 6px solid blue;
			}
		</pre>
		<figure>
			<img alt="" src="images/example-column-over-row.png">
			<figcaption>
				Column-over-row gap decoration overlap.
			</figcaption>
		</figure>
	</div>

	<wpt>
		flex/flex-gap-decorations-012.html
		grid/grid-gap-decorations-023.html
		parsing/rule-overlap-computed.html
		parsing/rule-overlap-invalid.html
		parsing/rule-overlap-valid.html
	</wpt>

<!-- Big Text: Fragmentation 

█████▌ ████▌   ███▌   ███▌  █     █ █████▌ █    █▌ █████▌  ███▌  █████▌ ████  ███▌  █    █▌
█▌     █▌  █▌ ▐█ ▐█  █▌  █▌ ██   ██ █▌     █▌   █▌   █▌   ▐█ ▐█    █▌    ▐▌  █▌  █▌ █▌   █▌
█▌     █▌  █▌ █▌  █▌ █▌     █▌█ █▐█ █▌     ██▌  █▌   █▌   █▌  █▌   █▌    ▐▌  █▌  █▌ ██▌  █▌
████   ████▌  █▌  █▌ █▌ ██▌ █▌ █ ▐█ ████   █▌▐█ █▌   █▌   █▌  █▌   █▌    ▐▌  █▌  █▌ █▌▐█ █▌
█▌     █▌▐█   █████▌ █▌  █▌ █▌   ▐█ █▌     █▌  ██▌   █▌   █████▌   █▌    ▐▌  █▌  █▌ █▌  ██▌
█▌     █▌ ▐█  █▌  █▌ █▌  █▌ █▌   ▐█ █▌     █▌   █▌   █▌   █▌  █▌   █▌    ▐▌  █▌  █▌ █▌   █▌
█▌     █▌  █▌ █▌  █▌  ███▌  █▌   ▐█ █████▌ █▌   ▐▌   █▌   █▌  █▌   █▌   ████  ███▌  █▌   ▐▌
-->

<h3 id="fragmentation">
Fragmentation</h3>

	[[css-align-3#column-row-gap]] specifies that gaps disappear
	where they coincide with a [=fragmentation break=].
	Because there is no gap in such locations,
	no [=gap decoration=] is drawn in them either.

	<wpt>
		flex/fragmentation/flex-gap-decorations-fragmentation-001.html
		flex/fragmentation/flex-gap-decorations-fragmentation-002.html
		flex/fragmentation/flex-gap-decorations-fragmentation-003.html
		flex/fragmentation/flex-gap-decorations-fragmentation-004.html
		flex/fragmentation/flex-gap-decorations-fragmentation-005.html
		flex/fragmentation/flex-gap-decorations-fragmentation-006.html
		flex/fragmentation/flex-gap-decorations-fragmentation-007.html
		flex/fragmentation/flex-gap-decorations-fragmentation-008.html
		flex/fragmentation/flex-gap-decorations-fragmentation-009.html
		flex/fragmentation/flex-gap-decorations-fragmentation-010.html
		flex/fragmentation/flex-gap-decorations-fragmentation-011.html
		flex/fragmentation/flex-gap-decorations-fragmentation-012.html
		flex/fragmentation/flex-gap-decorations-fragmentation-013.html
		flex/fragmentation/flex-gap-decorations-fragmentation-014.html
		grid/fragmentation/grid-gap-decorations-fragmentation-001.html
		grid/fragmentation/grid-gap-decorations-fragmentation-002.html
		grid/fragmentation/grid-gap-decorations-fragmentation-003.html
		grid/fragmentation/grid-gap-decorations-fragmentation-004.html
		grid/fragmentation/grid-gap-decorations-fragmentation-005.html
		grid/fragmentation/grid-gap-decorations-fragmentation-006.html
		grid/fragmentation/grid-gap-decorations-fragmentation-007.html
		grid/fragmentation/grid-gap-decorations-fragmentation-008.html
		grid/fragmentation/grid-gap-decorations-fragmentation-009.html
		grid/fragmentation/grid-gap-decorations-fragmentation-010.html
		grid/fragmentation/grid-gap-decorations-fragmentation-011.html
		grid/fragmentation/grid-gap-decorations-fragmentation-012.html
		grid/fragmentation/grid-gap-decorations-fragmentation-013.html
		grid/fragmentation/grid-gap-decorations-fragmentation-014.html
		grid/fragmentation/grid-gap-decorations-fragmentation-015.html
		grid/fragmentation/grid-gap-decorations-fragmentation-016.html
		grid/fragmentation/grid-gap-decorations-fragmentation-017.html
		grid/fragmentation/grid-gap-decorations-fragmentation-018-crash.html
		grid/fragmentation/grid-gap-decorations-fragmentation-019-crash.html
		grid/fragmentation/grid-gap-decorations-fragmentation-020.html
		grid/fragmentation/grid-gap-decorations-fragmentation-021.html
		grid/fragmentation/grid-gap-decorations-fragmentation-022.html
		grid/fragmentation/grid-gap-decorations-fragmentation-023.html
		grid/fragmentation/grid-gap-decorations-fragmentation-024.html
		grid/fragmentation/grid-gap-decorations-fragmentation-025.html
		grid/fragmentation/grid-gap-decorations-fragmentation-026.html
		grid/fragmentation/grid-gap-decorations-fragmentation-027.html
		grid/fragmentation/grid-gap-decorations-fragmentation-028.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-001.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-002.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-003.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-004.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-005.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-006.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-007.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-008.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-009.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-010.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-011.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-012.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-013.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-014.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-015.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-016.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-017.html
		grid/subgrid/fragmentation/subgrid-gap-decorations-fragmentation-018.html
	</wpt>

<!-- Big Text: Color-Style-Width 

 ███▌   ███▌  █▌     ███▌  ████▌         ███▌  █████▌ █   ▐▌ █▌    █████▌       █▌    █▌ ████ ████▌  █████▌ █▌  █▌
█▌  █▌ █▌  █▌ █▌    █▌  █▌ █▌  █▌       █▌  █▌   █▌   ▐▌  █  █▌    █▌           █▌    █▌  ▐▌  █▌  █▌   █▌   █▌  █▌
█▌     █▌  █▌ █▌    █▌  █▌ █▌  █▌       █▌       █▌    █ ▐▌  █▌    █▌           █▌    █▌  ▐▌  █▌  █▌   █▌   █▌  █▌
█▌     █▌  █▌ █▌    █▌  █▌ ████▌  ████▌  ███▌    █▌    ▐▌█   █▌    ████   ████▌ █▌    █▌  ▐▌  █▌  █▌   █▌   █████▌
█▌     █▌  █▌ █▌    █▌  █▌ █▌▐█             █▌   █▌     █▌   █▌    █▌           █▌ ▐  █▌  ▐▌  █▌  █▌   █▌   █▌  █▌
█▌  █▌ █▌  █▌ █▌    █▌  █▌ █▌ ▐█        █▌  █▌   █▌     █▌   █▌    █▌           █▌ █▌ █▌  ▐▌  █▌  █▌   █▌   █▌  █▌
 ███▌   ███▌  █████  ███▌  █▌  █▌        ███▌    █▌     █▌   █████ █████▌        ██ ▐█▌  ████ ████▌    █▌   █▌  █▌
-->

<h2 id="color-style-width">
Color, style, and width</h2>

Property definitions in this section supersede the definitions of properties with the same names in
[[CSS-MULTICOL-1]].

<h3 id="column-row-rule-color">
Gap decoration color: The 'column-rule-color', 'row-rule-color', and 'rule-color' properties</h3>

	<pre class='propdef'>
		Name: column-rule-color, row-rule-color
		Value: <<line-color-list>> | <<auto-line-color-list>>
		Initial: currentcolor
		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
		Inherited: no
		Animation type: repeatable list, see [[#interpolation-behavior]].
	</pre>

	<pre class='prod'>
		<dfn>&lt;line-color-list&gt;</dfn>          = <<line-color-or-repeat>>#

	<dfn>&lt;auto-line-color-list&gt;</dfn>     = <<line-color-or-repeat>>#? ,
											         <<auto-repeat-line-color>> ,
											         <<line-color-or-repeat>>#?

	<dfn>&lt;line-color-or-repeat&gt;</dfn>     = [ <<color>> | <<repeat-line-color>> ]

	<dfn>&lt;repeat-line-color&gt;</dfn>        = repeat( [ <<integer [1,∞]>> ] , [ <<color>> ]# )

	<dfn>&lt;auto-repeat-line-color&gt;</dfn>   = repeat( auto , [ <<color>> ]# )
	</pre>

	Sets the color of <a>gap decorations</a>.

	<pre class='propdef shorthand'>
		Name: rule-color
		Value: <<'column-rule-color'>>
		Inherited: no
		Applies to: Same as 'column-rule-color' and 'row-rule-color'
	</pre>

	Sets the 'column-rule-color' and 'row-rule-color' properties to the same value.

	<wpt>
		agnostic/gap-decorations-003.html
		agnostic/gap-decorations-004.html
		agnostic/gap-decorations-010-crash.html
		grid/grid-gap-decorations-022.html
		grid/grid-gap-decorations-024.html
		grid/grid-gap-decorations-025.html
		grid/grid-gap-decorations-026.html
		grid/grid-gap-decorations-027.html
		grid/grid-gap-decorations-028.html
		grid/grid-gap-decorations-048.html
		grid/grid-gap-decorations-049.html
		grid/grid-gap-decorations-050.html
		grid/grid-gap-decorations-051.html
		multicol/multicol-gap-decorations-019.html
		parsing/gap-decorations-color-computed.html
		parsing/gap-decorations-color-invalid.html
		parsing/gap-decorations-color-valid.html
	</wpt>

<h3 id="column-row-rule-style">
Gap decoration style: The 'column-rule-style', 'row-rule-style', and 'rule-style' properties</h3>

	<pre class='propdef'>
		Name: column-rule-style, row-rule-style
		Value: <<line-style-list>> | <<auto-line-style-list>>
		Initial: none
		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
		Inherited: no
		Animation type: discrete
	</pre>

	<pre class='prod'>
		<dfn>&lt;line-style-list&gt;</dfn>          = <<line-style-or-repeat>>#

	<dfn>&lt;auto-line-style-list&gt;</dfn>     = <<line-style-or-repeat>>#? ,
											         <<auto-repeat-line-style>> ,
											         <<line-style-or-repeat>>#?

	<dfn>&lt;line-style-or-repeat&gt;</dfn>     = [ <<line-style>> | <<repeat-line-style>> ]

	<dfn>&lt;repeat-line-style&gt;</dfn>        = repeat( [ <<integer [1,∞]>> ] , [ <<line-style>> ]# )

	<dfn>&lt;auto-repeat-line-style&gt;</dfn>   = repeat( auto , [ <<line-style>> ]# )
	</pre>

	Sets the styles of <a>gap decorations</a>.
	The <<line-style>> values apply the same as for 'border-style'.

	<pre class='propdef shorthand'>
		Name: rule-style
		Value: <<'column-rule-style'>>
		Inherited: no
		Applies to: Same as 'column-rule-style' and 'row-rule-style'
	</pre>

	Sets the 'column-rule-style' and 'row-rule-style' properties to the same value.

	<wpt>
		flex/flex-gap-decorations-002.html
		flex/flex-gap-decorations-003.html
		flex/flex-gap-decorations-004.html
		flex/flex-gap-decorations-005.html
		flex/flex-gap-decorations-017.html
		flex/flex-gap-decorations-018.html
		grid/grid-gap-decorations-002.html
		grid/grid-gap-decorations-003.html
		grid/grid-gap-decorations-004.html
		grid/grid-gap-decorations-005.html
		grid/grid-gap-decorations-016.html
		grid/grid-gap-decorations-017.html
		grid/grid-gap-decorations-020.html
		grid/grid-gap-decorations-021.html
		grid/grid-gap-decorations-039.html
		parsing/gap-decorations-style-computed.html
		parsing/gap-decorations-style-invalid.html
		parsing/gap-decorations-style-valid.html
	</wpt>

<h3 id="column-row-rule-width">
Gap decoration width: The 'column-rule-width', 'row-rule-width', and 'rule-width' properties</h3>

	<pre class='propdef'>
		Name: column-rule-width, row-rule-width
		Value: <<line-width-list>> | <<auto-line-width-list>>
		Initial: medium
		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>grid lanes containers</a>
		Inherited: no
		Computed value: list of absolute lengths, <a>snapped as a border width</a>
		Animation type: repeatable list, see [[#interpolation-behavior]].
	</pre>

	<pre class='prod'>
		<dfn>&lt;line-width-list&gt;</dfn>          = <<line-width-or-repeat>>#

		<dfn>&lt;auto-line-width-list&gt;</dfn>     = <<line-width-or-repeat>>#? ,
											           <<auto-repeat-line-width>> ,
											           <<line-width-or-repeat>>#?

		<dfn>&lt;line-width-or-repeat&gt;</dfn>     = [ <<line-width>> | <<repeat-line-width>> ]

		<dfn>&lt;repeat-line-width&gt;</dfn>        = repeat( [ <<integer [1,∞]>> ] , [ <<line-width>> ]# )

		<dfn>&lt;auto-repeat-line-width&gt;</dfn>   = repeat( auto , [ <<line-width>> ]# )
	</pre>

	Sets the widths of <a>gap decorations</a>. Negative values are not allowed.

	<pre class='propdef shorthand'>
		Name: rule-width
		Value: <<'column-rule-width'>>
		Inherited: no
		Applies to: Same as 'column-rule-width' and 'row-rule-width'
	</pre>

	Sets the 'column-rule-width' and 'row-rule-width' properties to the same value.

	<wpt>
		agnostic/gap-decorations-009-crash.html
		grid/grid-gap-decorations-018.html
		grid/grid-gap-decorations-019.html
		multicol/multicol-gap-decorations-004.html
		parsing/gap-decorations-col-rule-width.html
		parsing/gap-decorations-width-computed.html
		parsing/gap-decorations-width-invalid.html
		parsing/gap-decorations-width-valid.html
	</wpt>

<!-- Big Text: Shorthands 

 ███▌  █▌  █▌  ███▌  ████▌  █████▌ █▌  █▌  ███▌  █    █▌ ████▌   ███▌ 
█▌  █▌ █▌  █▌ █▌  █▌ █▌  █▌   █▌   █▌  █▌ ▐█ ▐█  █▌   █▌ █▌  █▌ █▌  █▌
█▌     █▌  █▌ █▌  █▌ █▌  █▌   █▌   █▌  █▌ █▌  █▌ ██▌  █▌ █▌  █▌ █▌    
 ███▌  █████▌ █▌  █▌ ████▌    █▌   █████▌ █▌  █▌ █▌▐█ █▌ █▌  █▌  ███▌ 
    █▌ █▌  █▌ █▌  █▌ █▌▐█     █▌   █▌  █▌ █████▌ █▌  ██▌ █▌  █▌     █▌
█▌  █▌ █▌  █▌ █▌  █▌ █▌ ▐█    █▌   █▌  █▌ █▌  █▌ █▌   █▌ █▌  █▌ █▌  █▌
 ███▌  █▌  █▌  ███▌  █▌  █▌   █▌   █▌  █▌ █▌  █▌ █▌   ▐▌ ████▌   ███▌ 
-->

<h3 id="gap-decoration-shorthands">
Gap decoration shorthands: The 'column-rule', 'row-rule', and 'rule' properties</h3>

	<pre class='propdef shorthand'>
		Name: column-rule, row-rule
		Value: <<gap-rule-list>> | <<gap-auto-rule-list>>
	</pre>

	<pre class='prod'>
		<dfn>&lt;gap-rule-list&gt;</dfn>        = <<gap-rule-or-repeat>>#

		<dfn>&lt;gap-auto-rule-list&gt;</dfn>   = <<gap-rule-or-repeat>>#? ,
								             <<gap-auto-repeat-rule>> ,
								             <<gap-rule-or-repeat>>#?

		<dfn>&lt;gap-rule-or-repeat&gt;</dfn>   = <<gap-rule>> | <<gap-repeat-rule>>

		<dfn>&lt;gap-repeat-rule&gt;</dfn>      = repeat( <<integer [1,∞]>> , <<gap-rule>># )

		<dfn>&lt;gap-auto-repeat-rule&gt;</dfn> = repeat( auto , <<gap-rule>># )

		<dfn>&lt;gap-rule&gt;</dfn>             = <<line-width>> || <<line-style>> || <<color>>
	</pre>

	Sets the corresponding width, style, and color properties as a set.

	<pre class='propdef shorthand'>
		Name: rule
		Value: <<'column-rule'>>
		Inherited: no
		Applies to: Same as 'column-rule' and 'row-rule'
	</pre>

	Sets the 'column-rule' and 'row-rule' properties to the same values.

	<wpt>
		flex/flex-gap-decorations-019.html
		parsing/gap-decorations-bidirectional-shorthands.html
		parsing/gap-decorations-rule-initial-value-crash.html
		parsing/gap-decorations-rule-shorthand-computed.html
		parsing/gap-decorations-rule-shorthand-invalid.html
		parsing/gap-decorations-rule-shorthand-valid.html
		parsing/gap-decorations-rule-shorthand.html
	</wpt>

<!-- Big Text: Repeaters

████▌  █████▌ ████▌  █████▌  ███▌  █████▌ █████▌ ████▌   ███▌ 
█▌  █▌ █▌     █▌  █▌ █▌     ▐█ ▐█    █▌   █▌     █▌  █▌ █▌  █▌
█▌  █▌ █▌     █▌  █▌ █▌     █▌  █▌   █▌   █▌     █▌  █▌ █▌    
████▌  ████   ████▌  ████   █▌  █▌   █▌   ████   ████▌   ███▌ 
█▌▐█   █▌     █▌     █▌     █████▌   █▌   █▌     █▌▐█       █▌
█▌ ▐█  █▌     █▌     █▌     █▌  █▌   █▌   █▌     █▌ ▐█  █▌  █▌
█▌  █▌ █████▌ █▌     █████▌ █▌  █▌   █▌   █████▌ █▌  █▌  ███▌ 
-->

<h3 id="lists-repeat">
Lists of values and the ''repeat()'' notation</h3>

	Each of the properties in this section accepts a comma-separated list of values.
	Setting multiple values in this way allows for varying <a>gap decorations</a> within a given container.

	<div class="example">
		An author might specify alternating red and blue column rules as follows:
		<pre>
			column-rule-width: 1px;
			column-rule-style: solid;
			column-rule-color: red, blue;
		</pre>
	</div>

	Such a list may contain <dfn for="<repeat-line-color>,<auto-repeat-line-color>,<repeat-line-style>,<auto-repeat-line-style>,<repeat-line-width>,<auto-repeat-line-width>">repeat()</dfn> notations.
	Similar to [[css-grid-1#repeat-notation]], these notations allow a series of <a>gap decorations</a>
	that exhibit a recurring pattern to be written in a more compact form.

	The generic form of the ''repeat()'' syntax is, approximately,
	<pre class='prod'>
		repeat( [ <<integer [1,∞]>> | auto ] , &lt;value&gt;# )
	</pre>

	The first argument to ''repeat()'' specifies the number of repetitions.
	<dl>
		<dt><<integer>>
		<dd>
			Specifies an <dfn>integer repeater</dfn>.
			An <a>integer repeater</a> expands out to the list of values in the second argument,
			repeated as many times as specified by the first argument.

			<div class="example">
				An author may write:
				<pre>
					column-rule-color: gray, red, blue, red, blue, red, blue, gray;
				</pre>
				Or shorten to the following, which produces the same sequence of colors:
				<pre>
					column-rule-color: gray, repeat(3, red, blue), gray;
				</pre>
			</div>

		<dt><dfn value for="repeat()">auto</dfn>
		<dd>
			Specfies an <dfn>auto repeater</dfn>.
			An <a>auto repeater</a> will be used to fill in values for gaps
			that would not otherwise receive values from other parts of the list.
			At most one ''repeat()'' in a given list of values may be an <a>auto repeater</a>.

			<div class="example">
				Continuing from the previous example, if the author does not know how
				many columns will be in the final layout, they might instead write:
				<pre>
					column-rule-color: gray, repeat(auto, red, blue), gray;
				</pre>
				Which will produce a gray decoration in the first and last column gaps,
				and alternating red and blue decorations in the in-between column gaps.
			</div>
	</dl>

	The second argument to ''repeat()'' is a comma-separated list of values
	that would be accepted by the property in which the ''repeat()'' appears.

<!-- Big Text: Assigning 

 ███▌   ███▌   ███▌  ████  ███▌  █    █▌ ████ █    █▌  ███▌ 
▐█ ▐█  █▌  █▌ █▌  █▌  ▐▌  █▌  █▌ █▌   █▌  ▐▌  █▌   █▌ █▌  █▌
█▌  █▌ █▌     █▌      ▐▌  █▌     ██▌  █▌  ▐▌  ██▌  █▌ █▌    
█▌  █▌  ███▌   ███▌   ▐▌  █▌ ██▌ █▌▐█ █▌  ▐▌  █▌▐█ █▌ █▌ ██▌
█████▌     █▌     █▌  ▐▌  █▌  █▌ █▌  ██▌  ▐▌  █▌  ██▌ █▌  █▌
█▌  █▌ █▌  █▌ █▌  █▌  ▐▌  █▌  █▌ █▌   █▌  ▐▌  █▌   █▌ █▌  █▌
█▌  █▌  ███▌   ███▌  ████  ███▌  █▌   ▐▌ ████ █▌   ▐▌  ███▌ 
-->

<h3 id="assigning">
Assigning gap decoration values to gaps</h3>

	Gap decorations are [=assigned gap decoration values|assigned=] after [=collapsed gutter|gutter collapsing=] has been applied.
	A given set of [=collapsed gutters=] consume exactly one [=gap decoration=]; the next [=gap decoration=]
	is applied to the next gutter (or set of [=collapsed gutters=]). Therefore, [=collapsed gutters=] are treated as a
	single [=gap=] for decoration purposes.

	<div algorithm>
		To <dfn>assign gap decoration values</dfn> to a list of |gaps| using a list of |values|:

		<ol>
			<li>
				Replace any <a>integer repeaters</a> in |values| with their expanded-out equivalents.
			</li>

			<li>
				If the list contains no <a>auto repeater</a>, then:
			</li>

				<ol>
					<li>
						Beginning from the first item in |values| and the first item in |gaps|,
						assign each value to the corresponding gap.
						If there are fewer values than gaps,
						repeat beginning from the first item in |values|,
						as many times as needed.
					</li>
					
					<li>
						End this algorithm.
					</li>
				</ol>

			<li>
				|values| contains an <a>auto repeater</a>.
				Let |leading count| be the number of items in |values| before the <a>auto repeater</a>.
				Let |trailing count| be the number of items in |values| after the <a>auto repeater</a>.
			</li>

			<li>
				Partition |gaps| as follows:

				<ol>
					<li>
						Let |leading gaps| contain the first |leading count| items in |gaps|.
					</li>
					<li>
						Let |trailing gaps| contain the last |trailing count| items in |gaps|,
						excluding any items in |leading gaps|.
					</li>
					<li>
						Let |auto gaps| contain any items in |gaps|
						that are not in either |leading gaps| or |trailing gaps|.
					</li>
				</ol>
			
			<li>
				If |leading gaps| is non-empty,
				<a>assign gap decoration values</a> to |leading gaps|
				using the first |leading count| items in |values|.
			</li>
			
			<li>
				If |trailing gaps| is non-empty,
				<a>assign gap decoration values</a> to |trailing gaps|
				using the first |trailing count| items in |values|.
			</li>
			
			<li>
				If |auto gaps| is non-empty,
				<a>assign gap decoration values</a> to |auto gaps|
				using the list of values in the second argument of the <a>auto repeater</a>.
			</li>
		</ol>
	</div>

	<wpt>
		agnostic/gap-decorations-011-crash.html
	</wpt>

<!-- Big Text: Interpolation 

████ █    █▌ █████▌ █████▌ ████▌  ████▌   ███▌  █▌     ███▌  █████▌ ████  ███▌  █    █▌
 ▐▌  █▌   █▌   █▌   █▌     █▌  █▌ █▌  █▌ █▌  █▌ █▌    ▐█ ▐█    █▌    ▐▌  █▌  █▌ █▌   █▌
 ▐▌  ██▌  █▌   █▌   █▌     █▌  █▌ █▌  █▌ █▌  █▌ █▌    █▌  █▌   █▌    ▐▌  █▌  █▌ ██▌  █▌
 ▐▌  █▌▐█ █▌   █▌   ████   ████▌  ████▌  █▌  █▌ █▌    █▌  █▌   █▌    ▐▌  █▌  █▌ █▌▐█ █▌
 ▐▌  █▌  ██▌   █▌   █▌     █▌▐█   █▌     █▌  █▌ █▌    █████▌   █▌    ▐▌  █▌  █▌ █▌  ██▌
 ▐▌  █▌   █▌   █▌   █▌     █▌ ▐█  █▌     █▌  █▌ █▌    █▌  █▌   █▌    ▐▌  █▌  █▌ █▌   █▌
████ █▌   ▐▌   █▌   █████▌ █▌  █▌ █▌      ███▌  █████ █▌  █▌   █▌   ████  ███▌  █▌   ▐▌
-->

<h3 id="interpolation-behavior">Interpolation of list values</h3>
When interpolating ''repeat()'' values, or lists of values for 'rule-color' or 'rule-width', the interpolation proceeds in two steps:

	<ol>
	<li><em>Expansion:</em> Expand any [=integer repeater=] into its equivalent list of values. </li>
	<li><em>List Interpolation:</em> Apply the [=repeatable list=] interpolation algorithm to the expanded lists, interpolating each item against its counterpart.</li>
	</ol>
	<div class="example">
		<pre class="lang-css">
		@keyframes example {
			from { column-rule-width: 10px; }
			to   { column-rule-width: 20px, 40px; }
		}
		</pre>
		Interpolation of the above values would result in expansion of the
		"from" and "to" values to create lists of equal lengths:
		<pre>
		From:   10px, 10px
		At 50%: 15px, 25px
		To:     20px, 40px
		</pre>
	</div>
	<div class="example">
		<pre class="lang-css">
		@keyframes example {
			from { column-rule-width: repeat(2, 5px, 10px); }
			to   { column-rule-width: repeat(2, 15px, 20px); }
		}
		</pre>
		Interpolation of the above values would result in expansion of the
		"from" and "to" values to create lists of equal lengths:
		<pre>
		From:    5px, 10px,  5px, 10px
		At 50%: 10px, 15px, 10px, 15px
		To:     15px, 20px, 15px, 20px
		</pre>
	</div>

	<div class="example">
		<pre class="lang-css">
		@keyframes example {
			from { column-rule-width: repeat(2, 10px, 20px); }
			to   { column-rule-width: 20px; }
		}
		</pre>
		Interpolation of the above values would result in expansion of the
		"from" and "to" values to create lists of equal lengths:
		<pre>
		From:   10px, 20px, 10px, 20px
		At 50%: 15px, 20px, 15px, 20px
		To:     20px, 20px, 20px, 20px
		</pre>
	</div>
	<div class="example">
		<pre class="lang-css">
		@keyframes example {
			from { column-rule-width: repeat(2, 10px, 20px); }
			to   { column-rule-width: 20px, 30px; }
		}
		</pre>
		Interpolation of the above values would result in expansion of the
		"from" and "to" values to create lists of equal lengths:
		<pre>
		From:   10px, 20px, 10px, 20px
		At 50%: 15px, 25px, 15px, 25px
		To:     20px, 30px, 20px, 30px
		</pre>
	</div>

	<div algorithm="interpolate with auto repeaters">

		When either of the lists we are interpolating between (|from| and |to|) include an <a>auto repeater</a>:

			<ol>
				<li>
					Split each of |from| and |to| into segments, similar to how we [=assign gap decoration values=]:
					<ol>
						<li>Let |leading values| be the values before the <a>auto repeater</a>.</li>
						<li>Let |trailing values| be the values after the <a>auto repeater</a>.</li>
						<li>Let |auto values| be the values inside the <a>auto repeater</a>.</li>
					</ol>
				</li>
				<li>If only one of |from| or |to| contains an auto-repeater, we fall back to [=discrete=] interpolation.</li>
				<li>Expand any integer repeaters on each segment.</li>
				<li>
					If the length of |leading values| in |from| and |leading values| in |to| don't match, we fall back to [=discrete=] interpolation.
					If the length of |trailing values| in |from| and |trailing values| in |to| don't match, we fall back to [=discrete=] interpolation.
				</li>
				<li>
					When both |from| and |to| contain auto-repeaters, and the length of their segments match as described above,
					apply [=repeatable list=] interpolation to the lists of values in each |auto values|.
				</li>
			</ol>

		<div class="example">
			<pre class="lang-css">
			@keyframes example {
				from { column-rule-width: 10px, repeat(auto, 20px), 30px }
				to   { column-rule-width: 20px, repeat(auto, 40px), 40px }
			}
			</pre>
			Length of the |leading values| and |trailing values| across |from| and |to| match, so we can apply the [=repeatable list=] algorithm to each segment.
			<pre>
			From:   10px, repeat(auto, 20px), 30px
			At 50%: 15px, repeat(auto, 30px), 35px
			To:     20px, repeat(auto, 40px), 40px
			</pre>
		</div>

		<div class="example">
			<pre class="lang-css">
			@keyframes example {
				from { column-rule-width: 10px, 20px, repeat(auto, 20px), 30px }
				to   { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px), 40px }
			}
			</pre>
			Length of the |leading values| and |trailing values| across |from| and |to| match, so we can apply the [=repeatable list=] algorithm to each segment.
			<pre>
			From:   10px, 20px, repeat(auto, 20px, 20px), 30px
			At 50%: 15px, 25px, repeat(auto, 30px, 35px), 35px
			To:     20px, 30px, repeat(auto, 40px, 50px), 40px
			</pre>
		</div>

		<div class="example">
			<pre class="lang-css">
			@keyframes example {
				from { column-rule-width: 10px, repeat(auto, 20px) }
				to   { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px) }
			}
			</pre>
			Length of the |from| |leading values| and |to| |leading values| don't match, so we fall back to [=discrete=] interpolation.
		</div>

		<div class="example">
			<pre class="lang-css">
			@keyframes example {
				from { column-rule-width: 10px, repeat(auto, 20px), 30px }
				to   { column-rule-width: 20px, repeat(auto, 40px), 40px, 50px }
			}
			</pre>
			Length of the |from| |trailing values| and |to| |trailing values| don't match, so we fall back to [=discrete=] interpolation.
		</div>

		<div class="example">
			<pre class="lang-css">
			@keyframes example {
				from { column-rule-width: 10px, repeat(auto, 20px), 30px }
				to   { column-rule-width: 20px }
			}
			</pre>
			Only |from| contains an <a>auto repeater</a>, so we fall back to [=discrete=] interpolation.
		</div>
	</div>

	<wpt>
		animation/column-rule-outset-interpolation.html
		animation/gap-decorations-color-neutral-keyframe-001.html
		animation/gap-decorations-color-neutral-keyframe-002.html
		animation/gap-decorations-color-neutral-keyframe-003.html
		animation/gap-decorations-color-neutral-keyframe-004.html
		animation/gap-decorations-color-neutral-keyframe-005.html
		animation/gap-decorations-outset-neutral-keyframe-001.html
		animation/gap-decorations-outset-neutral-keyframe-002.html
		animation/gap-decorations-width-neutral-keyframe-001.html
		animation/gap-decorations-width-neutral-keyframe-002.html
		animation/gap-decorations-width-neutral-keyframe-003.html
		animation/gap-decorations-width-neutral-keyframe-004.html
		animation/gap-decorations-width-neutral-keyframe-005.html
		animation/row-rule-color-interpolation.html
		animation/row-rule-outset-interpolation.html
		animation/row-rule-width-interpolation.html
		animation/rule-color-interpolation-conversion-001.html
		animation/rule-color-interpolation-conversion-002.html
		animation/rule-color-interpolation-conversion-crash.html
		animation/rule-color-interpolation-multiple-values-001.html
		animation/rule-color-interpolation-repeaters-001.html
		animation/rule-width-interpolation-conversion-001.html
		animation/rule-width-interpolation-conversion-002.html
		animation/rule-width-interpolation-multiple-values-001.html
		animation/rule-width-interpolation-multiple-values-002.html
		animation/rule-width-interpolation-repeaters.html
	</wpt>

<!-- Big Text: Serialization 

 ███▌  █████▌ ████▌  ████  ███▌  █▌    ████ █████▌  ███▌  █████▌ ████  ███▌  █    █▌
█▌  █▌ █▌     █▌  █▌  ▐▌  ▐█ ▐█  █▌     ▐▌      ▐▌ ▐█ ▐█    █▌    ▐▌  █▌  █▌ █▌   █▌
█▌     █▌     █▌  █▌  ▐▌  █▌  █▌ █▌     ▐▌     ▐▌  █▌  █▌   █▌    ▐▌  █▌  █▌ ██▌  █▌
 ███▌  ████   ████▌   ▐▌  █▌  █▌ █▌     ▐▌    █▌   █▌  █▌   █▌    ▐▌  █▌  █▌ █▌▐█ █▌
    █▌ █▌     █▌▐█    ▐▌  █████▌ █▌     ▐▌   █     █████▌   █▌    ▐▌  █▌  █▌ █▌  ██▌
█▌  █▌ █▌     █▌ ▐█   ▐▌  █▌  █▌ █▌     ▐▌  █      █▌  █▌   █▌    ▐▌  █▌  █▌ █▌   █▌
 ███▌  █████▌ █▌  █▌ ████ █▌  █▌ █████ ████ █████▌ █▌  █▌   █▌   ████  ███▌  █▌   ▐▌
-->

<h3 id="serialization">Serialization</h3>

	The 'column-rule', 'row-rule', and 'rule' shorthands
	are serialized from component longhand properties
	only if the longhand properties are [=repeater aligned=].
	If the longhand properties are not [=repeater aligned=],
	the shorthand serializes as an empty string.

	<div algorithm>
		Let |W|, |S| and |C| be the values for the width, style, and color
		longhand properties respectively. Recall that each is a list of
		items, where an item is either a single value or a ''repeat()'' notation.
		The longhand properties are <dfn>repeater aligned</dfn>
		if and only if all of the following are true:

		<ol>
			<li>
				|W|, |S| and |C| all have the same number of items.
			</li>
			<li>
				For each item index |i|, |W|[|i|], |S|[|i|] and |C|[|i|] all have the same shape:
				<ol>
					<li>
						they are either all non-repeat values, all <a>integer repeaters</a>, or all <a>auto repeaters</a>.
					</li>
					<li>
						If they are <a>integer repeaters</a>, the <<integer>> values are equal.
					</li>
					<li>
						Each ''repeat()'' notation contains the same number of values.
					</li>
				</ol>
			</li>
		</ol>
	</div>

	<div class="example">
		This shorthand declaration:
		<pre>
			column-rule: 1px solid red, 2px dashed green, 3px dotted blue;
		</pre>

		Breaks down to the following longhand values:

		<pre>
			column-rule-width: 1px, 2px, 3px;
			column-rule-style: solid, dashed, dotted;
			column-rule-color: red, green, blue;
		</pre>

		Which serialize back to the same original shorthand value,
		because the longhands are <a>repeater aligned</a>:
		all three properties have the same number of items (3),
		and each item is a single value (not a repeater).

		The same behavior would occur if the three longhands were specified directly
		rather than coming from a shorthand.
	</div>

	<div class="example">
		This shorthand declaration:
		<pre>
			column-rule: 1px solid red, repeat(2, 2px dashed green);
		</pre>

		Breaks down to the following longhand values:

		<pre>
			column-rule-width: 1px, repeat(2, 2px);
			column-rule-style: solid, repeat(2, dashed);
			column-rule-color: red, repeat(2, green);
		</pre>

		Which serialize back to the same original shorthand value,
		because the longhands are <a>repeater aligned</a>:
		all three properties have the same number of items (2),
		and at each index the items have matching types
		(single values at index 0, integer repeaters at index 1),
		the integer repeaters have the same repeat count (2),
		and the integer repeaters contain the same number of values (1).

		The same behavior would occur if the three longhands were specified directly
		rather than coming from a shorthand.
	</div>

	<div class="example">
		This shorthand declaration:
		<pre>
			column-rule: repeat(auto, 1px solid red, 2px dashed green);
		</pre>

		Breaks down to the following longhand values:

		<pre>
			column-rule-width: repeat(auto, 1px, 2px);
			column-rule-style: repeat(auto, solid, dashed);
			column-rule-color: repeat(auto, red, green);
		</pre>

		Which serialize back to the same original shorthand value,
		because the longhands are <a>repeater aligned</a>:
		all three properties have the same number of items (1),
		each item is an auto repeater,
		and the auto repeaters contain the same number of values (2).

		The same behavior would occur if the three longhands were specified directly
		rather than coming from a shorthand.
	</div>

	<div class="example">
		These declarations:
		<pre>
			column-rule: repeat(auto, 1px solid red, 2px dashed green);
			column-rule-width: repeat(auto, 3px, 4px, 5px);
		</pre>

		Break down to the following longhand values:

		<pre>
			column-rule-width: repeat(auto, 3px, 4px, 5px);
			column-rule-style: repeat(auto, solid, dashed);
			column-rule-color: repeat(auto, red, green);
		</pre>

		The 'column-rule' shorthand will serialize as an empty string
		because the longhands are not <a>repeater aligned</a>:
		the auto repeaters contain different numbers of values.

		The same behavior would occur if the three longhands were specified directly
		rather than coming from a shorthand.
	</div>

	<div class="example">
		These declarations:
		<pre>
			column-rule: repeat(2, 1px solid red, 2px dashed green);
			column-rule-style: dashed, dotted, solid;
		</pre>

		Break down to the following longhand values:

		<pre>
			column-rule-width: repeat(2, 1px, 2px);
			column-rule-style: dashed, dotted, solid;
			column-rule-color: repeat(2, red, green);
		</pre>

		The 'column-rule' shorthand will serialize as an empty string
		because the longhands are not <a>repeater aligned</a>:
		the items at index 0 have mismatched types
		(integer repeater for width and color, single value for style).

		The same behavior would occur if the three longhands were specified directly
		rather than coming from a shorthand.
	</div>

	<div class="example">
		These declarations:
		<pre>
			column-rule: repeat(2, 1px solid red, 2px dashed green);
			column-rule-color: repeat(4, red, cyan);
		</pre>

		Break down to the following longhand values:

		<pre>
			column-rule-width: repeat(2, 1px, 2px);
			column-rule-style: repeat(2, solid, dashed);
			column-rule-color: repeat(4, red, cyan);
		</pre>

		The 'column-rule' shorthand will serialize as an empty string
		because the longhands are not <a>repeater aligned</a>:
		the integer repeaters have different repeat counts.

		The same behavior would occur if the three longhands were specified directly
		rather than coming from a shorthand.
	</div>

	<wpt>
		agnostic/gap-decorations-007-crash.html
		agnostic/gap-decorations-008-crash.html
		multicol/multicol-gap-decorations-021.html
		parsing/gap-decorations-important.html
	</wpt>

<!-- Big Text: Acknowledgements 

 ███▌   ███▌  █▌  █▌ █    █▌  ███▌  █▌    █▌ █▌    █████▌ ████▌   ███▌  █████▌ █     █ █████▌ █    █▌ █████▌  ███▌ 
▐█ ▐█  █▌  █▌ █▌ █▌  █▌   █▌ █▌  █▌ █▌    █▌ █▌    █▌     █▌  █▌ █▌  █▌ █▌     ██   ██ █▌     █▌   █▌   █▌   █▌  █▌
█▌  █▌ █▌     █▌█▌   ██▌  █▌ █▌  █▌ █▌    █▌ █▌    █▌     █▌  █▌ █▌     █▌     █▌█ █▐█ █▌     ██▌  █▌   █▌   █▌    
█▌  █▌ █▌     ██     █▌▐█ █▌ █▌  █▌ █▌    █▌ █▌    ████   █▌  █▌ █▌ ██▌ ████   █▌ █ ▐█ ████   █▌▐█ █▌   █▌    ███▌ 
█████▌ █▌     █▌█▌   █▌  ██▌ █▌  █▌ █▌ ▐  █▌ █▌    █▌     █▌  █▌ █▌  █▌ █▌     █▌   ▐█ █▌     █▌  ██▌   █▌       █▌
█▌  █▌ █▌  █▌ █▌ █▌  █▌   █▌ █▌  █▌ █▌ █▌ █▌ █▌    █▌     █▌  █▌ █▌  █▌ █▌     █▌   ▐█ █▌     █▌   █▌   █▌   █▌  █▌
█▌  █▌  ███▌  █▌  █▌ █▌   ▐▌  ███▌   ██ ▐█▌  █████ █████▌ ████▌   ███▌  █████▌ █▌   ▐█ █████▌ █▌   ▐▌   █▌    ███▌ 
-->

<h2 id="acknowledgements">
Acknowledgements</h2>

<p>This specification is made possible by contributions and feedback from many people, including:
	Ahmad Shadeed,
	Alison Maher,
	Benoît Rouleau,
	Elika Etemad,
	Ian Kilpatrick,
	Javier Contreras Tenorio,
	Josh Tumath,
	Kurt Catti-Schmidt,
	Lea Verou,
	Oliver Williams,
	Rachel Andrew,
	Sam Davis Omekara Jr.,
	Sebastian Zartner,
	Tab Atkins-Bittner,
	and the CSS Working Group members.
	Special thanks to Mats Palmgren who drafted an initial proposal for Gap Decorations.
</p>

<h2 id="privacy">
Privacy Considerations</h2>

No new privacy considerations have been reported on this specification.

<h2 id="security">
Security Considerations</h2>

No new security considerations have been reported on this specification.

<h2 id="changes">
Changes</h2>

<h3 id="changes-20250417">
Changes since the <a href="https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/">17 April 2025 Working Draft</a></h3>

	<ul class="non-normative">
		<li>Specified the behavior when gaps are coincident due to track collapsing.
			(<a href="https://github.com/w3c/csswg-drafts/issues/11814">Issue 11814</a>)
		<li>Renamed ''rule-paint-order'' to 'rule-overlap'.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12540">Issue 12540</a>)
		<li>Updated the definition for intersections to use [=gutter=].
			(<a href="https://github.com/w3c/csswg-drafts/issues/12084">Issue 12084</a>)
		<li>Updated trailing gap decoration assignment to use values in forward order.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12527">Issue 12527</a>)
		<li>Specified the interpolation behavior for values which may contain repeaters.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12431">Issue 12431</a>)
		<li>Removed the special case of 'column-rule-width' having a computed value of ''0'' when 'column-rule-style' is ''<line-style>/none'' or ''<line-style>/hidden''.
			(<a href="https://github.com/w3c/csswg-drafts/issues/11494">Issue 11494</a>)
		<li>Changed the rule-outset properties to [[#inset|rule-inset]] and introduced related properties.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12603">Issue 12603</a>,
			 <a href="https://github.com/w3c/csswg-drafts/issues/12848">Issue 12848</a>,
			 <a href="https://github.com/w3c/csswg-drafts/issues/8402">Issue 8402</a>)
		<li>Updated the initial value of the [[#inset|inset]] properties to ''0'' and removed the auto keyword.
			(<a href="https://github.com/w3c/csswg-drafts/issues/13137">Issue 13137</a>)
		<li>Added a paragraph clarifying that gap decorations are not drawn where gaps are suppressed due to fragment breaks.
			(<a href="https://github.com/w3c/csswg-drafts/issues/11520">Issue 11520</a>)
		<li>Updated the behavior for when gaps are coincident due to track collapsing.
			(<a href="https://github.com/w3c/csswg-drafts/issues/11814">Issue 11814</a>)
		<li>Added a section for serializing shorthands from separate longhands.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12201">Issue 12201</a>)
		<li>Updated the color, width, and style longhand properties to use comma-separated lists instead of space-separated lists.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12201">Issue 12201</a>)
		<li>Added section for gap decorations next to empty grid areas.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12602">Issue 12602</a>)
		<li>Clarified that alignment space contributes to gap size.
			(<a href="https://github.com/w3c/csswg-drafts/issues/12922">Issue 12922</a>)
		<li>Renamed the [[#break|break]] value ''spanning-item'' to ''column-rule-break/normal''.
			(<a href="https://github.com/w3c/csswg-drafts/issues/13127">Issue 13127</a>)
		<li>Refreshed examples to reflect changes to the specification.
		<li>Added links to WPT suite.
		<li>Added Acknowledgements section.
	</ul>