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 all 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
162 changes: 160 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,162 @@ Lists of values and the ''repeat-line-color/repeat()'' notation</h3>
</ol>
</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 (|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=]:
Let |leading values| be the values before the <a>auto repeater</a>.
Let |trailing values| be the values after the <a>auto repeater</a>.
Let |auto values| be the values inside the <a>auto repeater</a>.
</li>
<li>If either of |leading values| or |trailing values| in |from| or |to| is empty and the other has an <a>auto repeater</a>, 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>If only one of |from| or |to| contains an auto-repeater, 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, we apply <a>list interpolation</a> to each segment.
Applying <a>list interpolation</a> to the |auto values| means applying it to the list of values inside the repeater.
</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,
applying <a>list interpolation</a> to list of values in the |auto repeat| 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>

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

Expand Down Expand Up @@ -1062,4 +1218,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>