Repository navigation
[css-gaps-1] Values after an auto repeater when there's fewer values than gaps #12527
Description
In #11492 we resolved that, if the number of gaps is less than the number of values provided and there's an auto repeater, we would first use values before the auto repeater, then use values after the auto repeater, then use the auto repeater to fill in any missing values. For example:
column-rule-color: black repeat(auto, red blue) white;would result in "black" if there's 1 gap, "black white" for 2 gaps, "black red white" for 3 gaps.
What we did not touch on in that discussion is how to handle these edge cases when there are multiple values after the auto repeater. For example:
column-rule-color: black repeat(auto, white) red green blue;What I wrote in the spec was to prioritize the trailing declarations from last to first. So we'd have "black" for 1 gap, "black blue" for 2 gaps, "black green blue" for 3 gaps, "black red green blue" for 4 gaps, and then we start filling in "white" from the auto repeater.
However, in discussion among the feature team, some folks found this counterintuitive: Since the leading values and auto repeater values should clearly be used from left to right, they expected that we would do the same for the trailing values: "black red" for 2 gaps, "black red green" for 3 gaps, "black red green blue" 4 for gaps.
The use case I had in mind was footers in a data grid. In such a case, I thought authors might want the last few decorations to apply if there's too few rows, rather than "the first of the last." But I can also see how that's inconsistent, and as far as I know it's not a precedented behavior, so I can understand how it might not be what's expected.
What do folks think?
Activity
oSamDavis commentedon Aug 6, 2025
I doubt that authors would intentionally specify more decorations than there are gaps, so we shouldn’t "overly attempt" to accommodate that mismatch. But in the case that it does happen, it feels most intuitive to apply all decorations from left to right, including the trailing decorations. In this case, once you exhaust the leading decorations, you should apply the trailing decorations in their forward order, rather than in reverse. This keeps the behavior predictable and consistent with how authors might read and write their declarations.
css-meeting-bot commentedon Aug 6, 2025
The CSS Working Group just discussed
[css-gaps-1] Values after an auto repeater when there's fewer values than gaps, and agreed to the following:RESOLVED: Apply all decorations from left to rightThe full IRC log of that discussion
<kbabbitt> oSamDavis: in an earlier issue 11492 we resolved that we would prioritize non-repeating gaps over repeating gaps<kbabbitt> ... non-auto over auto
<kbabbitt> ... if the number of gaps was less than number of decorations
<kbabbitt> ... we'd start with leading, then trailing, then auto
<kbabbitt> ... we didn't resolve on the part where the number of gaps after is less than the number of decorations
<kbabbitt> ... currently according to spec we use the traiing decorations right to left
<kbabbitt> ... I found that to be confusing as to why we would apply trailing decorations from right to left rather than left to right
<kbabbitt> ... as we do in the leading section
<kbabbitt> ... this issue is looking for a resolution in this case where there are fewer gaps than decorations in the trailing section
<miriam> +1
<kbabbitt> (I have no objection to changing this.)
<kbabbitt> astearns: chair hat off, this sounds like a fine change
<kbabbitt> astearns: other opinions
<kbabbitt> javierct: I think this makes sense too
<kbabbitt> ... more intuitive I think, initially hadn't even realized we defined this until it came up
<kbabbitt> alisonmaher: agree, I think if an author wants all these but doesn't have enough gaps to do it
<kbabbitt> ... it would be confusing
<kbabbitt> ... going chronologically makes more sense
<kbabbitt> astearns: Proposed: Apply all decorations from left to right
<kbabbitt> ... objections?
<kbabbitt> RESOLVE: Apply all decorations from left to right
<kbabbitt> RESOLVED: Apply all decorations from left to right
kbabbitt commentedon Aug 6, 2025
@oSamDavis would you like to make the edits for this issue?
Also I see the testcase tag on this issue - I think https://github.com/web-platform-tests/wpt/blob/master/css/css-gaps/grid/grid-gap-decorations-051.html is already testing the behavior we resolved on, but please correct me if I'm wrong.
oSamDavis commentedon Aug 7, 2025
Yes, I'll make appropriate edits and yes grid-gap-decorations-051.html is already testing this behavior.
[css-gaps-1] Update trailing gap decoration assignment to use values …