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 3 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
3 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
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
72 changes: 70 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 [[#repeat-interpolation]]).
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Animation type: repeatable list, (see [[#repeat-interpolation]]).
Animation type: repeatable list, see [[#repeat-interpolation]].

</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 [[#repeat-interpolation]]).
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Animation type: repeatable list, (see [[#repeat-interpolation]]).
Animation type: repeatable list, see [[#repeat-interpolation]].

</pre>

<pre class='prod'>
Expand Down Expand Up @@ -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>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think these rules also apply to cases where the "from" and "to" values don't contain any repeaters but do have unequal list lengths, correct? Assuming that's the case, I'd suggest generalizing the section title and introductory test to reflect that.

When combining ''repeat()'' values for 'rule-color', and 'rule-width',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Half sentence here (left over from drafting?)


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>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<li> <dfn>Expansion</dfn>: Expand each ''repeat(n, …)'' into its equivalent list of values. </li>
<li> <dfn>Expansion</dfn>: Expand each [=integer repeater=] into its equivalent list of values. </li>

(link to defined terms where available for consistency)

<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 */
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestions for the interpolation examples:

  • Applying the example class to <pre> makes the formatting inconsistent with other examples in the document; apply it to <div> instead and perhaps include some explanatory text
  • I think it would be helpful to include the expanded from and to lists also
  • Adjust the spacing so that corresponding values line up vertically in the formatted HTML (unfortunately, as best I know, this can take some trial-and-error)

Here's how I might mark one of these up, but feel free to vary the overall form and explanatory text between examples as it makes sense to do so:

	<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>

(I just now discovered class="lang-css" while looking at other specs; I'll probably go back and mark up the other examples in this spec with it at some point)

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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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
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

(the "e.g." is not needed since the autolink will take the reader to the definition of the term; omit it for brevity)

to how we [=assign gap decoration values=]:
- |leading gaps|
- |auto repeat|
- |trailing gaps|

Interpolation rules:
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be marked up as an algorithm (<div algorithm>) and incorporate all of the steps done by an implementation, including splitting up the list and (earlier) expanding integer repeaters. See the definition for "assign gap decoration values" in this spec for an example.

<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 */
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we interpolating part of the value continuously and part discretely? That seems weird to me - I'd expect that if the lists can't be lined up, the entire interpolation would be treated as discrete. Though maybe there's precedent for doing it this way elsewhere?

</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 */
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For cases where a discrete interpolation happens, the "At 50%" line doesn't add much value. I would instead have prose stating that the interpolation is discrete and explaining the specific reason why (e.g. "because only one value contains an [=auto repeater=]").

</pre>

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

Expand Down Expand Up @@ -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'.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<li>Specified the interpolation behavior for ''repeat()'', 'rule-color', and 'rule-width'.
<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>