Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

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

Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9f0105f
initial commit
Aug 6, 2025
dac4800
added changes section entry
Aug 7, 2025
357c1d2
auto repeaters
Aug 7, 2025
e0c0e8d
Merge branch 'main' into interpolation-def
jav099 Aug 11, 2025
b42c5e1
addressing feedback
Aug 11, 2025
95c2b79
Merge branch 'main' into interpolation-def
jav099 Aug 11, 2025
58140b0
addressing feedback
Aug 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
169 changes: 167 additions & 2 deletions css-gaps-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 [[#interpolation-behavior]].
</pre>

<pre class='prod'>
Expand Down Expand Up @@ -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 [[#interpolation-behavior]].
</pre>

<pre class='prod'>
Expand Down Expand Up @@ -975,6 +975,169 @@ Lists of values and the ''repeat-line-color/repeat()'' notation</h3>
</ol>
</div>

<div algorithm>
To <dfn>assign gap decoration values in reverse</dfn>
to a list of <var ignore=''>gaps</var> using a list of <var ignore=''>values</var>,
follow the same steps as to <a>assign gap decoration values</a>,
except that in step 2, change all instances of "first" to "last".
</div>

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

<ol>
<li> <dfn>Expansion</dfn>: Expand any [=integer repeater=] 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>
<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>


<h5 id="auto-repeaters">Lists with Auto Repeaters</h5>
<div algorithm>

To <dfn>interpolate with auto repeaters</dfn>, when either of the lists we are interpolating between (let's call them |from| and |to|) include an <a>auto repeater</a>, we conceptually split the list into three segments, similar
to how we [=assign gap decoration values=]:
- |leading gaps|
- |auto repeat|
- |trailing gaps|

<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>We split |to| and/or |from| into their respective segments.</li>
<li>If either of |leading gaps| or |trailing gaps| in |to| or |from| is empty and the other has an <a>auto repeater</a>, we do [=discrete=] interpolation.</li>
<li>Expand any integer repeaters on each segment.</li>
<li>If the |segment lengths| don't match, we fall back to [=discrete=] interpolation.</li>
<li>When both |from| and |to| contain auto-repeaters and |segment lengths| match, we apply <a>list interpolation</a> to each segment. Applying <a>list interpolation</a> to the |auto repeat| means applying it to the list of values inside the repeater.</li>
<li>If only one of |from| or |to| contains an auto-repeater, we do [=discrete=] interpolation.</li>
</ol>
</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 }
}
</pre>
Length of the |leading gaps| and |trailing gaps| 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 repeat(auto, 20px) 30px }
to { column-rule-width: 20px repeat(auto, 40px 50px) 40px }
}
</pre>
Length of the |leading gaps| and |trailing gaps| match, so we can apply the [=repeatable list=] algorithm to each segment,
applying <a>list interpolation</a> to list of values in the |auto repeat| segment.
<pre>
From: 10px repeat(auto, 20px 20px) 30px
At 50%: 15px repeat(auto, 30px 35px) 35px
To: 20px 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 |leading gaps| and |trailing gaps| match, so we can apply the [=repeatable list=] algorithm to each segment,
applying <a>list interpolation</a> to list of values in the |auto repeat| segment.
<pre>
From: 10px 10px repeat(auto, 20px 20px)
At 50%: 15px 20px repeat(auto, 30px 35px)
To: 20px 30px repeat(auto, 40px 50px)
</pre>
</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 |trailing gaps| and |leading gaps| in |to| do not 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>

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

Expand Down Expand Up @@ -1062,4 +1225,6 @@ Changes since the <a href="https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/">1
<li>Updated '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>)
</ul>