You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: css-gaps-1/Overview.bs
+18-16Lines changed: 18 additions & 16 deletions
Original file line number
Diff line number
Diff line change
@@ -979,8 +979,8 @@ Lists of values and the ''repeat-line-color/repeat()'' notation</h3>
979
979
When interpolating ''repeat()'' values, or lists of values for 'rule-color' or 'rule-width', the interpolation proceeds in two steps:
980
980
981
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>
982
+
<li><em>Expansion:</em> Expand any [=integer repeater=] into its equivalent list of values. </li>
983
+
<li><em>List Interpolation:</em> Apply the [=repeatable list=] interpolation algorithm to the expanded lists, interpolating each item against its counterpart.</li>
984
984
</ol>
985
985
<div class="example">
986
986
<pre class="lang-css">
@@ -1046,25 +1046,28 @@ When interpolating ''repeat()'' values, or lists of values for 'rule-color' or '
1046
1046
1047
1047
1048
1048
<h5 id="auto-repeaters">Lists with Auto Repeaters</h5>
1049
-
<div algorithm>
1049
+
<div algorithm="interpolate with auto repeaters">
1050
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>:
1051
+
When either of the lists we are interpolating between (|from| and |to|) include an <a>auto repeater</a>:
1052
1052
1053
1053
<ol>
1054
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>.
1055
+
Split each of |from| and |to| into segments, similar to how we [=assign gap decoration values=]:
1056
+
<ol>
1057
+
<li>Let |leading values| be the values before the <a>auto repeater</a>.</li>
1058
+
<li>Let |trailing values| be the values after the <a>auto repeater</a>.</li>
1059
+
<li>Let |auto values| be the values inside the <a>auto repeater</a>.</li>
1060
+
</ol>
1059
1061
</li>
1060
1062
<li>If only one of |from| or |to| contains an auto-repeater, we fall back to [=discrete=] interpolation.</li>
1061
1063
<li>Expand any integer repeaters on each segment.</li>
1062
1064
<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
+
If the length of |leading values| in |from| and |leading values| in |to| don't match, we fall back to [=discrete=] interpolation.
1066
+
If the length of |trailing values| in |from| and |trailing values| in |to| don't match, we fall back to [=discrete=] interpolation.
1065
1067
</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
+
When both |from| and |to| contain auto-repeaters, and the length of their segments match as described above,
1070
+
apply [=repeatable list=] interpolation to the lists of values in each |auto values|.
1068
1071
</li>
1069
1072
</ol>
1070
1073
@@ -1090,8 +1093,7 @@ When interpolating ''repeat()'' values, or lists of values for 'rule-color' or '
1090
1093
to { column-rule-width: 20px 30px repeat(auto, 40px 50px) 40px }
1091
1094
}
1092
1095
</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.
1096
+
Length of the |leading values| and |trailing values| across |from| and |to| match, so we can apply the [=repeatable list=] algorithm to each segment.
1095
1097
<pre>
1096
1098
From: 10px 20px repeat(auto, 20px 20px) 30px
1097
1099
At 50%: 15px 25px repeat(auto, 30px 35px) 35px
@@ -1215,8 +1217,8 @@ 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>)
1218
-
<li>Updated the definition for intersections to use 'gutter'. (<a href="https://github.com/w3c/csswg-drafts/issues/12084">Issue 12084</a>)
1220
+
<li>Updated the definition for intersections to use [=gutter=]. (<a href="https://github.com/w3c/csswg-drafts/issues/12084">Issue 12084</a>)
1219
1221
<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.
1222
+
<li>Specified the interpolation behavior for values which may contain repeaters.
0 commit comments