Date: Mon, 12 Jan 2026 12:00:08 -0800
Subject: [PATCH 1/9] init rule shorthand
---
css-gaps-1/Overview.bs | 204 +++++++++++++++++++++++++++++++----------
1 file changed, 156 insertions(+), 48 deletions(-)
diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs
index 8a02b44edbe6..343416d5e598 100644
--- a/css-gaps-1/Overview.bs
+++ b/css-gaps-1/Overview.bs
@@ -1069,11 +1069,11 @@ 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> = [ <> | <> ]
@@ -1122,11 +1122,11 @@ 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> = [ <> | <> ]
@@ -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;
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.
@@ -1369,15 +1369,15 @@ 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
@@ -1390,9 +1390,9 @@ When interpolating ''repeat()'' values, or lists of values for 'rule-color' or '
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
- 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; }
+ 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,114 @@ 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 these shorthands from their corresponding longhand properties,
+ if the values for the corresponding longhand properties do not
line up,
+ it serializes as an empty string.
+
+
Longhand Properties Alignment
+
+ Let |W|, |S| and |C| be the computed 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
line up
+ 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|]
+ are all either ''repeat()'' notations or non-repeat values.
+
+ -
+ For each item index |i| where |W|[|i|], |S|[|i|] and |C|[|i|] are ''repeat()'' notations,
+ they all have the same shape:
+
+ -
+ they are either 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.
+
+
+
+
+
+
+ The following serializes as an empty string
+ because the longhands do not
line up:
+ the items at index 0 have mismatched types
+ (integer repeater for width, single value for style, auto repeater for color).
+
+
+ column-rule-width: repeat(2, 1px 2px);
+ column-rule-style: solid, dashed, dotted;
+ column-rule-color: repeat(auto, green blue);
+
+
+
+
+ The following serializes as an empty string
+ because the longhands do not
line up:
+ the auto repeaters contain different numbers of values.
+
+
+ column-rule-width: repeat(auto, 1px 2px);
+ column-rule-style: repeat(auto, solid dashed dotted);
+ column-rule-color: repeat(auto, red);
+
+
+
+
+ The following serializes as an empty string
+ because the longhands do not
line up:
+ the integer repeaters have different repeat counts.
+
+
+ column-rule-width: repeat(4, 1px 2px);
+ column-rule-style: repeat(3, solid dashed);
+ column-rule-color: repeat(2, red blue);
+
+
+
+
+ The following serializes successfully because the longhands
line up:
+ all three properties have the same number of items (3),
+ and each item is a single value (not a repeater).
+
+
+ column-rule-width: 1px, 2px, 3px;
+ column-rule-style: solid, dashed, dotted;
+ column-rule-color: red, green, blue;
+
+
+ Serializes as:
+
column-rule: 1px solid red, 2px dashed green, 3px dotted blue;
+
+
+
+ The following serializes successfully because the longhands
line up:
+ all three properties have the same number of items (2),
+ and at each index the items have matching types
+ (both are single values at index 0, both are integer repeaters at index 1),
+ and the integer repeaters have the same repeat count (2).
+
+
+ column-rule-width: 1px, repeat(2, 2px);
+ column-rule-style: solid, repeat(2, dashed);
+ column-rule-color: red, repeat(2, green);
+
+
+ Serializes as:
+
column-rule: 1px solid red, repeat(2, 2px dashed green);
+
- column-rule-color: gray, repeat(3, red blue), gray;
+ column-rule-color: gray, repeat(3, red, blue), gray;
From 3be3a8f3134af1190927dc9b2ae1d7290f05dfcc Mon Sep 17 00:00:00 2001
From: Sam Davis <59079555+oSamDavis@users.noreply.github.com>
Date: Tue, 13 Jan 2026 13:27:20 -0800
Subject: [PATCH 4/9] Update css-gaps-1/Overview.bs
Co-authored-by: Kevin Babbitt
---
css-gaps-1/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs
index 38dbb28db1a2..0c54175d8fcd 100644
--- a/css-gaps-1/Overview.bs
+++ b/css-gaps-1/Overview.bs
@@ -1586,7 +1586,7 @@ Gap decoration shorthands: The 'column-rule' and 'row-rule' properties
Longhand Properties Alignment
- Let |W|, |S| and |C| be the computed values
+ 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.
From e965bdb64eb1b430a931c48f0519498b5fc1b09c Mon Sep 17 00:00:00 2001
From: Sam Davis <59079555+oSamDavis@users.noreply.github.com>
Date: Tue, 13 Jan 2026 13:27:59 -0800
Subject: [PATCH 5/9] Update css-gaps-1/Overview.bs
Co-authored-by: Kevin Babbitt
---
css-gaps-1/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs
index 0c54175d8fcd..3fb41a0e4383 100644
--- a/css-gaps-1/Overview.bs
+++ b/css-gaps-1/Overview.bs
@@ -1608,7 +1608,7 @@ Gap decoration shorthands: The 'column-rule' and 'row-rule' properties
they all have the same shape:
-
- they are either all integer repeaters or all auto repeaters.
+ they are either all non-repeat values, all integer repeaters, or all auto repeaters.
-
If they are integer repeaters, the <> values are equal.
From 8136884ea4f93709da805f6f8a13d4745ddfee21 Mon Sep 17 00:00:00 2001
From: Sam Davis <59079555+oSamDavis@users.noreply.github.com>
Date: Tue, 13 Jan 2026 13:28:11 -0800
Subject: [PATCH 6/9] Update css-gaps-1/Overview.bs
Co-authored-by: Kevin Babbitt
---
css-gaps-1/Overview.bs | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs
index 3fb41a0e4383..3b1b884c7922 100644
--- a/css-gaps-1/Overview.bs
+++ b/css-gaps-1/Overview.bs
@@ -1604,7 +1604,8 @@ Gap decoration shorthands: The 'column-rule' and 'row-rule' properties
are all either ''repeat()'' notations or non-repeat values.
-
- For each item index |i| where |W|[|i|], |S|[|i|] and |C|[|i|] are ''repeat()'' notations,
+ For each item index |i|,
+ |W|[|i|], |S|[|i|] and |C|[|i|] all have the same shape:
they all have the same shape:
-
From 94d832b3b506aa236277d40c026b7d1a93ab2f9f Mon Sep 17 00:00:00 2001
From: Sam Davis <59079555+oSamDavis@users.noreply.github.com>
Date: Tue, 13 Jan 2026 13:28:41 -0800
Subject: [PATCH 7/9] Update css-gaps-1/Overview.bs
Co-authored-by: Kevin Babbitt
---
css-gaps-1/Overview.bs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs
index 3b1b884c7922..b20972e65b4e 100644
--- a/css-gaps-1/Overview.bs
+++ b/css-gaps-1/Overview.bs
@@ -1591,7 +1591,7 @@ Gap decoration shorthands: The 'column-rule' and 'row-rule' properties
Recall that each is a list of items,
where an item is either a single value or a ''repeat()'' notation.
- The longhands line up
+ The longhands are repeater aligned
if and only if all of the following are true:
From bfdd87b29965c051f794dea8cb2e4690eb23088a Mon Sep 17 00:00:00 2001
From: "Sam Davis Omekara (from Dev Box)"
Date: Tue, 13 Jan 2026 15:00:50 -0800
Subject: [PATCH 8/9] feedbck
---
css-gaps-1/Overview.bs | 204 +++++++++++++++++++++++++++--------------
1 file changed, 137 insertions(+), 67 deletions(-)
diff --git a/css-gaps-1/Overview.bs b/css-gaps-1/Overview.bs
index b20972e65b4e..c06d3dfe0d7e 100644
--- a/css-gaps-1/Overview.bs
+++ b/css-gaps-1/Overview.bs
@@ -1077,9 +1077,9 @@ Gap decoration color: The 'column-rule-color' and 'row-rule-color' properties<line-color-or-repeat> = [ <> | <> ]
- <repeat-line-color> = repeat( [ <> ] , [ <> ]+ )
+ <repeat-line-color> = repeat( [ <> ] , [ <> ]# )
- <auto-repeat-line-color> = repeat( auto , [ <> ]+ )
+ <auto-repeat-line-color> = repeat( auto , [ <> ]# )
@@ -1130,9 +1130,9 @@ Gap decoration style: The 'column-rule-style' and 'row-rule-style' properties<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.
@@ -1231,7 +1231,7 @@ Lists of values and the ''repeat-line-color/repeat()'' notation
The generic form of the ''repeat-line-color/repeat()'' syntax is, approximately,
- repeat( [ <> | auto ] , <value>+ )
+ repeat( [ <> | auto ] , <value># )
The first argument to ''repeat-line-color/repeat()'' specifies the number of repetitions.
@@ -1264,14 +1264,14 @@ Lists of values and the ''repeat-line-color/repeat()'' notation
Continuing from the previous example, if the author does not know how
many columns will be in the final layout, they might instead write:
- 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.
@@ -1383,8 +1383,8 @@ When interpolating ''repeat()'' values, or lists of values for 'rule-color' or '
@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
@@ -1399,7 +1399,7 @@ When interpolating ''repeat()'' values, or lists of values for 'rule-color' or '
@keyframes example {
- from { column-rule-width: repeat(2, 10px 20px); }
+ from { column-rule-width: repeat(2, 10px, 20px); }
to { column-rule-width: 20px; }
}
@@ -1414,7 +1414,7 @@ When interpolating ''repeat()'' values, or lists of values for 'rule-color' or '
@keyframes example {
- from { column-rule-width: repeat(2, 10px 20px); }
+ from { column-rule-width: repeat(2, 10px, 20px); }
to { column-rule-width: 20px, 30px; }
}
@@ -1473,14 +1473,14 @@ When interpolating ''repeat()'' values, or lists of values for 'rule-color' or '
@keyframes example {
from { column-rule-width: 10px, 20px, repeat(auto, 20px), 30px }
- to { column-rule-width: 20px, 30px, repeat(auto, 40px 50px), 40px }
+ 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
@@ -1488,7 +1488,7 @@ When interpolating ''repeat()'' values, or lists of values for 'rule-color' or '
@keyframes example {
from { column-rule-width: 10px, repeat(auto, 20px) }
- to { column-rule-width: 20px, 30px, repeat(auto, 40px 50px) }
+ 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.
@@ -1580,16 +1580,15 @@ 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 these shorthands from their corresponding longhand properties,
- if the values for the corresponding longhand properties do not
line up,
- it serializes as an empty string.
+ 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.
+ 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:
@@ -1599,14 +1598,7 @@ Gap decoration shorthands: The 'column-rule' and 'row-rule' properties
|W|, |S| and |C| have the same number of items.
- For each item index |i|,
- |W|[|i|], |S|[|i|] and |C|[|i|]
- are all either ''repeat()'' notations or non-repeat values.
-
-
- For each item index |i|,
- |W|[|i|], |S|[|i|] and |C|[|i|] all have the same shape:
- they all have the same shape:
+ 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.
@@ -1622,72 +1614,146 @@ Gap decoration shorthands: The 'column-rule' and 'row-rule' properties
- The following serializes as an empty string
- because the longhands do not
line up:
- the items at index 0 have mismatched types
- (integer repeater for width, single value for style, auto repeater for color).
+ This shorthand declaration:
+
+ column-rule: 1px solid red, 2px dashed green, 3px dotted blue;
+
+
+ Breaks down to the following longhand values:
- column-rule-width: repeat(2, 1px 2px);
+ column-rule-width: 1px, 2px, 3px;
column-rule-style: solid, dashed, dotted;
- column-rule-color: repeat(auto, green blue);
+ 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.
- The following serializes as an empty string
- because the longhands do not
line up:
- the auto repeaters contain different numbers of values.
+ This shorthand declaration:
+
+ column-rule: 1px solid red, repeat(2, 2px dashed green);
+
+
+ Breaks down to the following longhand values:
- column-rule-width: repeat(auto, 1px 2px);
- column-rule-style: repeat(auto, solid dashed dotted);
- column-rule-color: repeat(auto, red);
+ 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.
- The following serializes as an empty string
- because the longhands do not
line up:
- the integer repeaters have different repeat counts.
+ This shorthand declaration:
+
+ column-rule: repeat(auto, 1px solid red, 2px dashed green);
+
+
+ Breaks down to the following longhand values:
- column-rule-width: repeat(4, 1px 2px);
- column-rule-style: repeat(3, solid dashed);
- column-rule-color: repeat(2, red blue);
+ 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.
- The following serializes successfully because the longhands
line up:
- all three properties have the same number of items (3),
- and each item is a single value (not a repeater).
+ 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: 1px, 2px, 3px;
- column-rule-style: solid, dashed, dotted;
- column-rule-color: red, green, blue;
+ column-rule-width: repeat(auto, 3px, 4px, 5px);
+ column-rule-style: repeat(auto, solid, dashed);
+ column-rule-color: repeat(auto, red, green);
- Serializes as:
-
column-rule: 1px solid red, 2px dashed green, 3px dotted blue;
+ 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.
- The following serializes successfully because the longhands
line up:
- all three properties have the same number of items (2),
- and at each index the items have matching types
- (both are single values at index 0, both are integer repeaters at index 1),
- and the integer repeaters have the same repeat count (2).
+ 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: 1px, repeat(2, 2px);
- column-rule-style: solid, repeat(2, dashed);
- column-rule-color: red, repeat(2, green);
+ column-rule-width: repeat(2, 1px, 2px);
+ column-rule-style: dashed, dotted, solid;
+ column-rule-color: repeat(2, red, green);
- Serializes as:
-
column-rule: 1px solid red, repeat(2, 2px dashed 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.
<line-color-list> = <>#
- <auto-line-color-list> = <>#? ,
- <> ,
- <>#?
+ <auto-line-color-list> = [<># , ]?
+ <>
+ [ , <># ]?
<line-color-or-repeat> = [ <> | <> ]
@@ -1124,9 +1124,9 @@ Gap decoration style: The 'column-rule-style' and 'row-rule-style' properties
<line-style-list> = <>#
- <auto-line-style-list> = <>#? ,
- <> ,
- <>#?
+ <auto-line-style-list> = [<># , ]?
+ <>
+ [ , <># ]?
<line-style-or-repeat> = [ <> | <> ]
@@ -1175,9 +1175,9 @@ Gap decoration width: The 'column-rule-width' and 'row-rule-width' properties
<line-width-list> = <>#
- <auto-line-width-list> = <>#? ,
- <> ,
- <>#?
+ <auto-line-width-list> = [<># , ]?
+ <>
+ [ , <># ]?
<line-width-or-repeat> = [ <> | <> ]