diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs
index 8a02b44edbe6..157f041a12df 100644
--- a/css-gaps-1/Overview.bs
+++ b/css-gaps-1/Overview.bs
@@ -1069,17 +1069,17 @@ Gap decoration color: The 'column-rule-color' and 'row-rule-color' properties
- <line-color-list> = [ <> ]+
+ <line-color-list> = <>#
- <auto-line-color-list> = [ <> ]*
- <>
- [ <> ]*
+ <auto-line-color-list> = [<># , ]?
+ <>
+ [ , <># ]?
<line-color-or-repeat> = [ <> | <> ]
- <repeat-line-color> = repeat( [ <> ] , [ <> ]+ )
+ <repeat-line-color> = repeat( [ <> ] , [ <> ]# )
- <auto-repeat-line-color> = repeat( auto , [ <> ]+ )
+ <auto-repeat-line-color> = repeat( auto , [ <> ]# )
@@ -1122,17 +1122,17 @@ Gap decoration style: The 'column-rule-style' and 'row-rule-style' properties
- <line-style-list> = [ <> ]+
+ <line-style-list> = <>#
- <auto-line-style-list> = [ <> ]*
- <>
- [ <> ]*
+ <auto-line-style-list> = [<># , ]?
+ <>
+ [ , <># ]?
<line-style-or-repeat> = [ <> | <> ]
- <repeat-line-style> = repeat( [ <> ] , [ <> ]+ )
+ <repeat-line-style> = repeat( [ <> ] , [ <> ]# )
- <auto-repeat-line-style> = repeat( auto , [ <> ]+ )
+ <auto-repeat-line-style> = repeat( auto , [ <> ]# )
These properties set the styles of gap decorations.
@@ -1173,17 +1173,17 @@ Gap decoration width: The 'column-rule-width' and 'row-rule-width' properties
- <line-width-list> = [ <> ]+
+<line-width-list> = <>#
- <auto-line-width-list> = [ <> ]*
- <>
- [ <> ]*
+ <auto-line-width-list> = [<># , ]?
+ <>
+ [ , <># ]?
<line-width-or-repeat> = [ <> | <> ]
- <repeat-line-width> = repeat( [ <> ] , [ <> ]+ )
+ <repeat-line-width> = repeat( [ <> ] , [ <> ]# )
- <auto-repeat-line-width> = repeat( auto , [ <> ]+ )
+ <auto-repeat-line-width> = repeat( auto , [ <> ]# )
This property sets the widths of gap decorations. Negative values are not allowed.
@@ -1213,7 +1213,7 @@ Gap decoration width: The 'column-rule-width' and 'row-rule-width' properties
Lists of values and the ''repeat-line-color/repeat()'' notation
- Each of the properties in this section accepts a space-separated list of values.
+ Each of the properties in this section accepts a comma-separated list of values.
Setting multiple values in this way allows for varying gap decorations within a given container.
@@ -1221,7 +1221,7 @@ Lists of values and the ''repeat-line-color/repeat()'' notation
column-rule-width: 1px;
column-rule-style: solid;
- column-rule-color: red blue;
+ column-rule-color: red, blue;
- repeat( [ <> | auto ] , <value>+ )
+ repeat( [ <> | auto ] , <value># )
The first argument to ''repeat-line-color/repeat()'' specifies the number of repetitions.
@@ -1245,11 +1245,11 @@ Lists of values and the ''repeat-line-color/repeat()'' notation
An author may write:
- column-rule-color: gray red blue red blue red blue gray;
+ column-rule-color: gray, red, blue, red, blue, red, blue, gray;
Or shorten to the following, which produces the same sequence of colors:
- column-rule-color: gray repeat(3, red blue) gray;
+ column-rule-color: gray, repeat(3, red, blue), gray;
- column-rule-color: gray repeat(auto, red blue) gray;
+ column-rule-color: gray, repeat(auto, red, blue), gray;
Which will produce a gray decoration in the first and last column gaps,
and alternating red and blue decorations in the in-between column gaps.
- The second argument to ''repeat-line-color/repeat()'' is a space-separated list of values
+ The second argument to ''repeat-line-color/repeat()'' is a comma-separated list of values
that would be accepted by the property in which the ''repeat-line-color/repeat()'' appears.
@@ -1369,61 +1369,61 @@ When interpolating ''repeat()'' values, or lists of values for 'rule-color' or '
@keyframes example {
from { column-rule-width: 10px; }
- to { column-rule-width: 20px 40px; }
+ to { column-rule-width: 20px, 40px; }
}
Interpolation of the above values would result in expansion of the
"from" and "to" values to create lists of equal lengths:
- From: 10px 10px
- At 50%: 15px 25px
- To: 20px 40px
+ From: 10px, 10px
+ At 50%: 15px, 25px
+ To: 20px, 40px
@keyframes example {
- from { column-rule-width: repeat(2, 5px 10px); }
- to { column-rule-width: repeat(2, 15px 20px); }
+ from { column-rule-width: repeat(2, 5px, 10px); }
+ to { column-rule-width: repeat(2, 15px, 20px); }
}
Interpolation of the above values would result in expansion of the
"from" and "to" values to create lists of equal lengths:
- From: 5px 10px 5px 10px
- At 50%: 10px 15px 10px 15px
- To: 15px 20px 15px 20px
+ From: 5px, 10px, 5px, 10px
+ At 50%: 10px, 15px, 10px, 15px
+ To: 15px, 20px, 15px, 20px
@keyframes example {
- from { column-rule-width: repeat(2, 10px 20px); }
+ from { column-rule-width: repeat(2, 10px, 20px); }
to { column-rule-width: 20px; }
}
Interpolation of the above values would result in expansion of the
"from" and "to" values to create lists of equal lengths:
- From: 10px 20px 10px 20px
- At 50%: 15px 20px 15px 20px
- To: 20px 20px 20px 20px
+ From: 10px, 20px, 10px, 20px
+ At 50%: 15px, 20px, 15px, 20px
+ To: 20px, 20px, 20px, 20px
@keyframes example {
- from { column-rule-width: repeat(2, 10px 20px); }
- to { column-rule-width: 20px 30px; }
+ from { column-rule-width: repeat(2, 10px, 20px); }
+ to { column-rule-width: 20px, 30px; }
}
Interpolation of the above values would result in expansion of the
"from" and "to" values to create lists of equal lengths:
- From: 10px 20px 10px 20px
- At 50%: 15px 25px 15px 25px
- To: 20px 30px 20px 30px
+ From: 10px, 20px, 10px, 20px
+ At 50%: 15px, 25px, 15px, 25px
+ To: 20px, 30px, 20px, 30px
@@ -1457,38 +1457,38 @@ When interpolating ''repeat()'' values, or lists of values for 'rule-color' or '
@keyframes example {
- from { column-rule-width: 10px repeat(auto, 20px) 30px }
- to { column-rule-width: 20px repeat(auto, 40px) 40px }
+ from { column-rule-width: 10px, repeat(auto, 20px), 30px }
+ to { column-rule-width: 20px, repeat(auto, 40px), 40px }
}
Length of the |leading values| and |trailing values| across |from| and |to| match, so we can apply the [=repeatable list=] algorithm to each segment.
- From: 10px repeat(auto, 20px) 30px
- At 50%: 15px repeat(auto, 30px) 35px
- To: 20px repeat(auto, 40px) 40px
+ From: 10px, repeat(auto, 20px), 30px
+ At 50%: 15px, repeat(auto, 30px), 35px
+ To: 20px, repeat(auto, 40px), 40px
@keyframes example {
- from { column-rule-width: 10px 20px repeat(auto, 20px) 30px }
- to { column-rule-width: 20px 30px repeat(auto, 40px 50px) 40px }
+ from { column-rule-width: 10px, 20px, repeat(auto, 20px), 30px }
+ to { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px), 40px }
}
Length of the |leading values| and |trailing values| across |from| and |to| match, so we can apply the [=repeatable list=] algorithm to each segment.
- 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
+ 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
@keyframes example {
- from { column-rule-width: 10px repeat(auto, 20px) }
- to { column-rule-width: 20px 30px repeat(auto, 40px 50px) }
+ from { column-rule-width: 10px, repeat(auto, 20px) }
+ to { column-rule-width: 20px, 30px, repeat(auto, 40px, 50px) }
}
Length of the |from| |leading values| and |to| |leading values| don't match, so we fall back to [=discrete=] interpolation.
@@ -1497,8 +1497,8 @@ When interpolating ''repeat()'' values, or lists of values for 'rule-color' or '
@keyframes example {
- from { column-rule-width: 10px repeat(auto, 20px) 30px }
- to { column-rule-width: 20px repeat(auto, 40px) 40px 50px }
+ from { column-rule-width: 10px, repeat(auto, 20px), 30px }
+ to { column-rule-width: 20px, repeat(auto, 40px), 40px, 50px }
}
Length of the |from| |trailing values| and |to| |trailing values| don't match, so we fall back to [=discrete=] interpolation.
@@ -1507,7 +1507,7 @@ When interpolating ''repeat()'' values, or lists of values for 'rule-color' or '
@keyframes example {
- from { column-rule-width: 10px repeat(auto, 20px) 30px }
+ from { column-rule-width: 10px, repeat(auto, 20px), 30px }
to { column-rule-width: 20px }
}
@@ -1580,6 +1580,181 @@ Gap decoration shorthands: The 'column-rule' and 'row-rule' properties
These shorthands set the corresponding width, style, and color properties as a set.
+ When serializing a shorthand from its corresponding longhand properties, if the
+ longhand properties are not
repeater aligned, the shorthand serializes as an
+ empty string.
+
+
Longhand Properties Alignment
+
+ Let |W|, |S| and |C| be the values for the width, style and color
+ longhand properties respectively. Recall that each is a list of
+ items, where an item is either a single value or a ''repeat()'' notation.
+
+ The longhands are
repeater aligned
+ if and only if all of the following are true:
+
+
+ -
+ |W|, |S| and |C| have the same number of items.
+
+ -
+ For each item index |i|, |W|[|i|], |S|[|i|] and |C|[|i|] all have the same shape:
+
+ -
+ they are either all non-repeat values, all integer repeaters, or all auto repeaters.
+
+ -
+ If they are integer repeaters, the <> values are equal.
+
+ -
+ Each ''repeat()'' notation contains the same number of values.
+
+
+
+
+
+
+ This shorthand declaration:
+
+ column-rule: 1px solid red, 2px dashed green, 3px dotted blue;
+
+
+ Breaks down to the following longhand values:
+
+
+ column-rule-width: 1px, 2px, 3px;
+ column-rule-style: solid, dashed, dotted;
+ column-rule-color: red, green, blue;
+
+
+ Which serialize back to the same original shorthand value,
+ because the longhands are
repeater aligned:
+ all three properties have the same number of items (3),
+ and each item is a single value (not a repeater).
+
+ The same behavior would occur if the three longhands were specified directly
+ rather than coming from a shorthand.
+
+
+
+ This shorthand declaration:
+
+ column-rule: 1px solid red, repeat(2, 2px dashed green);
+
+
+ Breaks down to the following longhand values:
+
+
+ column-rule-width: 1px, repeat(2, 2px);
+ column-rule-style: solid, repeat(2, dashed);
+ column-rule-color: red, repeat(2, green);
+
+
+ Which serialize back to the same original shorthand value,
+ because the longhands are
repeater aligned:
+ all three properties have the same number of items (2),
+ and at each index the items have matching types
+ (single values at index 0, integer repeaters at index 1),
+ the integer repeaters have the same repeat count (2),
+ and the integer repeaters contain the same number of values (1).
+
+ The same behavior would occur if the three longhands were specified directly
+ rather than coming from a shorthand.
+
+
+
+ This shorthand declaration:
+
+ column-rule: repeat(auto, 1px solid red, 2px dashed green);
+
+
+ Breaks down to the following longhand values:
+
+
+ column-rule-width: repeat(auto, 1px, 2px);
+ column-rule-style: repeat(auto, solid, dashed);
+ column-rule-color: repeat(auto, red, green);
+
+
+ Which serialize back to the same original shorthand value,
+ because the longhands are
repeater aligned:
+ all three properties have the same number of items (1),
+ each item is an auto repeater,
+ and the auto repeaters contain the same number of values (2).
+
+ The same behavior would occur if the three longhands were specified directly
+ rather than coming from a shorthand.
+
+
+
+ These declarations:
+
+ column-rule: repeat(auto, 1px solid red, 2px dashed green);
+ column-rule-width: repeat(auto, 3px, 4px, 5px);
+
+
+ Break down to the following longhand values:
+
+
+ column-rule-width: repeat(auto, 3px, 4px, 5px);
+ column-rule-style: repeat(auto, solid, dashed);
+ column-rule-color: repeat(auto, red, green);
+
+
+ The 'column-rule' shorthand will serialize as an empty string
+ because the longhands are not
repeater aligned:
+ the auto repeaters contain different numbers of values.
+
+ The same behavior would occur if the three longhands were specified directly
+ rather than coming from a shorthand.
+
+
+
+ These declarations:
+
+ column-rule: repeat(2, 1px solid red, 2px dashed green);
+ column-rule-style: dashed, dotted, solid;
+
+
+ Break down to the following longhand values:
+
+
+ column-rule-width: repeat(2, 1px, 2px);
+ column-rule-style: dashed, dotted, solid;
+ column-rule-color: repeat(2, red, green);
+
+
+ The 'column-rule' shorthand will serialize as an empty string
+ because the longhands are not
repeater aligned:
+ the items at index 0 have mismatched types
+ (integer repeater for width and color, single value for style).
+
+ The same behavior would occur if the three longhands were specified directly
+ rather than coming from a shorthand.
+
+
+
+ These declarations:
+
+ column-rule: repeat(2, 1px solid red, 2px dashed green);
+ column-rule-color: repeat(4, red, cyan);
+
+
+ Break down to the following longhand values:
+
+
+ column-rule-width: repeat(2, 1px, 2px);
+ column-rule-style: repeat(2, solid, dashed);
+ column-rule-color: repeat(4, red, cyan);
+
+
+ The 'column-rule' shorthand will serialize as an empty string
+ because the longhands are not
repeater aligned:
+ the integer repeaters have different repeat counts.
+
+ The same behavior would occur if the three longhands were specified directly
+ rather than coming from a shorthand.
+