[css-gaps-1] Define Interpolation behavior for GapDecorations. Issue #12431

css-gaps-1/Overview.bs

@@ -712,7 +712,7 @@ Gap decoration color: The 'column-rule-color' and 'row-rule-color' properties</h
 		Initial: currentcolor
 		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>masonry containers</a>
 		Inherited: no
-		Animation type: by computed value type
+		Animation type: repeatable list, (see [[#repeat-interpolation]]).
 	</pre>
 
 	<pre class='prod'>
@@ -807,7 +807,7 @@ Gap decoration width: The 'column-rule-width' and 'row-rule-width' properties</h
 		Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>masonry containers</a>
 		Inherited: no
 		Computed value: list of absolute lengths, <a>snapped as a border width</a>, or ''0'' under conditions described below
-		Animation type: by computed value type
+		Animation type: repeatable list, (see [[#repeat-interpolation]]).
 	</pre>
 
 	<pre class='prod'>
@@ -982,6 +982,72 @@ Lists of values and the ''repeat-line-color/repeat()'' notation</h3>
 		except that in step 2, change all instances of "first" to "last".
 	</div>
 
+<h4 id="repeat-interpolation">Interpolation of ''repeat()''</h4>
+When combining ''repeat()'' values for 'rule-color', and 'rule-width',
+
+When interpolating ''repeat()'' values for 'rule-color' or 'rule-width', the interpolation proceeds in two steps:
+
+<ol>
+<li> <dfn>Expansion</dfn>: Expand each ''repeat(n, …)'' into its equivalent list of values. </li>
+<li> <dfn>List Interpolation</dfn>: Apply the [=repeatable list=] interpolation algorithm to the expanded lists, interpolating each item against its counterpart.</li>
+</ol>
+<pre class="example">
+/* Repeater → Repeater */
+from: repeat(2, 5px 10px)
+to:   repeat(2, 15px 20px)
+/* At 50%: 10px 15px 10px 15px */
+</pre>
+
+<pre class="example">
+/* Repeater → Non-Repeater */
+from: repeat(2, 10px 20px)
+to:   20px
+/* At 50%: 15px 20px 15px 20px */
+</pre>
+
+<pre class="example">
+/* Repeater → Non-Repeater */
+from: repeat(2, 10px 20px)
+to:   20px 30px
+/* At 50%: 15px 25px 15px 25px */
+</pre>
+
+<h5 id="auto-repeaters">Lists with Auto Repeaters</h5>
+When either of the lists we are interpolating between (let's call them |from| and |to|) include an <a>auto repeater</a> (e.g. ''repeat(auto, …)''), we conceptually split the list into three segments, similar
+to how we [=assign gap decoration values=]:
+- |leading gaps|
+- |auto repeat|
+- |trailing gaps|
+
+Interpolation rules:
+<ol>
+<li>Let |segment lengths| be the length of the |leading gaps| and |trailing gaps| segments (i.e. the number of items in each list, after <a>expansion</a>).</li>
+<li>If either of |leading gaps| or |trailing gaps| is empty and the other has an <a>auto repeater</a>, we do [=discrete=] interpolation.</li>
+<li>If the |segment lengths| match, apply the [=repeatable list=] algorithm separately to the |leading gaps| and |trailing gaps| segments.</li>
+ Otherwise, fall back to [=discrete=] interpolation (the value jumps from |from| to |to| with no intermediates).
+<li>When both |from| and |to| contain auto-repeaters and |segment lengths| match, we apply <a>list interpolation</a>.</li>
+</ol>
+<pre class="example">
+/* Auto-Repeater → Auto-Repeater */
+from: 10px repeat(auto, 20px) 30px
+to:   20px repeat(auto, 40px) 40px
+/* At 50%: 15px repeat(auto, 30px) 35px */
+</pre>
+
+<pre class="example">
+/* Auto-Repeater → Auto-Repeater (Discrete interpolation, segment lengths don't match) */
+from: 10px repeat(auto, 20px) 30px
+to:   20px repeat(auto, 40px) 40px 50px
+/* At 50%: 15px repeat(auto, 30px) 40px 50px */
+</pre>
+
+<pre class="example">
+/* Auto-Repeater → Non-Repeater (Discrete interpolation, segment lengths don't match) */
+from: 10px repeat(auto, 20px) 30px
+to:   20px 40px
+/* At 50%: 20px 40px */
+</pre>
+
 <h3 id="gap-decoration-shorthands">
 Gap decoration shorthands: The 'column-rule' and 'row-rule' properties</h3>
 
@@ -1066,4 +1132,6 @@ Changes since the <a href="https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/">1
 		<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>Added links to WPT suite.
+		<li>Specified the interpolation behavior for ''repeat()'', 'rule-color', and 'rule-width'.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/12431">Issue 12431</a>)
 	</ul>