Skip to content

Commit 0422b02

Browse files
jav099Javier Contreras Tenorio (from Dev Box)
jav099
and
Javier Contreras Tenorio (from Dev Box)
authored
[css-gaps-1] Define Interpolation behavior for GapDecorations. Issue #12431 (#12583)
Co-authored-by: Javier Contreras Tenorio (from Dev Box) <javiercon@microsoft.com>
1 parent d2183ee commit 0422b02

File tree

1 file changed

+159
-2
lines changed

1 file changed

+159
-2
lines changed

‎css-gaps-1/Overview.bs‎

Lines changed: 159 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -712,7 +712,7 @@ Gap decoration color: The 'column-rule-color' and 'row-rule-color' properties</h
712712
Initial: currentcolor
713713
Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>masonry containers</a>
714714
Inherited: no
715-
Animation type: by computed value type
715+
Animation type: repeatable list, see [[#interpolation-behavior]].
716716
</pre>
717717

718718
<pre class='prod'>
@@ -807,7 +807,7 @@ Gap decoration width: The 'column-rule-width' and 'row-rule-width' properties</h
807807
Applies to: <a>grid containers</a>, <a>flex containers</a>, <a>multicol containers</a>, and <a>masonry containers</a>
808808
Inherited: no
809809
Computed value: list of absolute lengths, <a>snapped as a border width</a>, or ''0'' under conditions described below
810-
Animation type: by computed value type
810+
Animation type: repeatable list, see [[#interpolation-behavior]].
811811
</pre>
812812

813813
<pre class='prod'>
@@ -975,6 +975,161 @@ Lists of values and the ''repeat-line-color/repeat()'' notation</h3>
975975
</ol>
976976
</div>
977977

978+
<h4 id="interpolation-behavior">Interpolation behavior</h4>
979+
When interpolating ''repeat()'' values, or lists of values for 'rule-color' or 'rule-width', the interpolation proceeds in two steps:
980+
981+
<ol>
982+
<li> <dfn>Expansion</dfn>: Expand any [=integer repeater=] into its equivalent list of values. </li>
983+
<li> <dfn>List Interpolation</dfn>: Apply the [=repeatable list=] interpolation algorithm to the expanded lists, interpolating each item against its counterpart.</li>
984+
</ol>
985+
<div class="example">
986+
<pre class="lang-css">
987+
@keyframes example {
988+
from { column-rule-width: 10px; }
989+
to { column-rule-width: 20px 40px; }
990+
}
991+
</pre>
992+
Interpolation of the above values would result in expansion of the
993+
"from" and "to" values to create lists of equal lengths:
994+
<pre>
995+
From: 10px 10px
996+
At 50%: 15px 25px
997+
To: 20px 40px
998+
</pre>
999+
</div>
1000+
<div class="example">
1001+
<pre class="lang-css">
1002+
@keyframes example {
1003+
from { column-rule-width: repeat(2, 5px 10px); }
1004+
to { column-rule-width: repeat(2, 15px 20px); }
1005+
}
1006+
</pre>
1007+
Interpolation of the above values would result in expansion of the
1008+
"from" and "to" values to create lists of equal lengths:
1009+
<pre>
1010+
From: 5px 10px 5px 10px
1011+
At 50%: 10px 15px 10px 15px
1012+
To: 15px 20px 15px 20px
1013+
</pre>
1014+
</div>
1015+
1016+
<div class="example">
1017+
<pre class="lang-css">
1018+
@keyframes example {
1019+
from { column-rule-width: repeat(2, 10px 20px); }
1020+
to { column-rule-width: 20px; }
1021+
}
1022+
</pre>
1023+
Interpolation of the above values would result in expansion of the
1024+
"from" and "to" values to create lists of equal lengths:
1025+
<pre>
1026+
From: 10px 20px 10px 20px
1027+
At 50%: 15px 20px 15px 20px
1028+
To: 20px 20px 20px 20px
1029+
</pre>
1030+
</div>
1031+
<div class="example">
1032+
<pre class="lang-css">
1033+
@keyframes example {
1034+
from { column-rule-width: repeat(2, 10px 20px); }
1035+
to { column-rule-width: 20px 30px; }
1036+
}
1037+
</pre>
1038+
Interpolation of the above values would result in expansion of the
1039+
"from" and "to" values to create lists of equal lengths:
1040+
<pre>
1041+
From: 10px 20px 10px 20px
1042+
At 50%: 15px 25px 15px 25px
1043+
To: 20px 30px 20px 30px
1044+
</pre>
1045+
</div>
1046+
1047+
1048+
<h5 id="auto-repeaters">Lists with Auto Repeaters</h5>
1049+
<div algorithm>
1050+
1051+
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>:
1052+
1053+
<ol>
1054+
<li>
1055+
Split each of |from| and |to| into segments, similar to how we [=assign gap decoration values=]:
1056+
Let |leading values| be the values before the <a>auto repeater</a>.
1057+
Let |trailing values| be the values after the <a>auto repeater</a>.
1058+
Let |auto values| be the values inside the <a>auto repeater</a>.
1059+
</li>
1060+
<li>If only one of |from| or |to| contains an auto-repeater, we fall back to [=discrete=] interpolation.</li>
1061+
<li>Expand any integer repeaters on each segment.</li>
1062+
<li>
1063+
If the length of |leading values| in |from| and |leading values| in |to| don't match, we fall back to [=discrete=] interpolation.
1064+
If the length of |trailing values| in |from| and |trailing values| in |to| don't match, we fall back to [=discrete=] interpolation.
1065+
</li>
1066+
<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.
1067+
Applying <a>list interpolation</a> to the |auto values| means applying it to the list of values inside the repeater.
1068+
</li>
1069+
</ol>
1070+
1071+
<div class="example">
1072+
<pre class="lang-css">
1073+
@keyframes example {
1074+
from { column-rule-width: 10px repeat(auto, 20px) 30px }
1075+
to { column-rule-width: 20px repeat(auto, 40px) 40px }
1076+
}
1077+
</pre>
1078+
Length of the |leading values| and |trailing values| across |from| and |to| match, so we can apply the [=repeatable list=] algorithm to each segment.
1079+
<pre>
1080+
From: 10px repeat(auto, 20px) 30px
1081+
At 50%: 15px repeat(auto, 30px) 35px
1082+
To: 20px repeat(auto, 40px) 40px
1083+
</pre>
1084+
</div>
1085+
1086+
<div class="example">
1087+
<pre class="lang-css">
1088+
@keyframes example {
1089+
from { column-rule-width: 10px 20px repeat(auto, 20px) 30px }
1090+
to { column-rule-width: 20px 30px repeat(auto, 40px 50px) 40px }
1091+
}
1092+
</pre>
1093+
Length of the |leading values| and |trailing values| across |from| and |to| match, so we can apply the [=repeatable list=] algorithm to each segment,
1094+
applying <a>list interpolation</a> to list of values in the |auto repeat| segment.
1095+
<pre>
1096+
From: 10px 20px repeat(auto, 20px 20px) 30px
1097+
At 50%: 15px 25px repeat(auto, 30px 35px) 35px
1098+
To: 20px 30px repeat(auto, 40px 50px) 40px
1099+
</pre>
1100+
</div>
1101+
1102+
<div class="example">
1103+
<pre class="lang-css">
1104+
@keyframes example {
1105+
from { column-rule-width: 10px repeat(auto, 20px) }
1106+
to { column-rule-width: 20px 30px repeat(auto, 40px 50px) }
1107+
}
1108+
</pre>
1109+
Length of the |from| |leading values| and |to| |leading values| don't match, so we fall back to [=discrete=] interpolation.
1110+
</div>
1111+
1112+
<div class="example">
1113+
<pre class="lang-css">
1114+
@keyframes example {
1115+
from { column-rule-width: 10px repeat(auto, 20px) 30px }
1116+
to { column-rule-width: 20px repeat(auto, 40px) 40px 50px }
1117+
}
1118+
</pre>
1119+
Length of the |from| |trailing values| and |to| |trailing values| don't match, so we fall back to [=discrete=] interpolation.
1120+
</div>
1121+
1122+
<div class="example">
1123+
<pre class="lang-css">
1124+
@keyframes example {
1125+
from { column-rule-width: 10px repeat(auto, 20px) 30px }
1126+
to { column-rule-width: 20px }
1127+
}
1128+
</pre>
1129+
Only |from| contains an <a>auto repeater</a>, so we fall back to [=discrete=] interpolation.
1130+
</div>
1131+
</div>
1132+
9781133
<h3 id="gap-decoration-shorthands">
9791134
Gap decoration shorthands: The 'column-rule' and 'row-rule' properties</h3>
9801135

@@ -1062,4 +1217,6 @@ Changes since the <a href="https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/">1
10621217
<li>Updated 'rule-paint-order' to 'rule-overlap'. (<a href="https://github.com/w3c/csswg-drafts/issues/12540">Issue 12540</a>)
10631218
<li>Updated the definition for intersections to use 'gutter'. (<a href="https://github.com/w3c/csswg-drafts/issues/12084">Issue 12084</a>)
10641219
<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>)
1220+
<li>Specified the interpolation behavior for values which may contain repeaters.
1221+
(<a href="https://github.com/w3c/csswg-drafts/issues/12431">Issue 12431</a>)
10651222
</ul>

0 commit comments

Comments
 (0)