[css-borders][css-tables] Define how listified borders collapse

[Loirooriol]

#13044 listifies borders. Then CSS tables needs to take that into account in https://drafts.csswg.org/css-tables/#border-specificity

Given two borders styles, the border style having the most specificity is the border style which…

1. … has the value "hidden" as border-style, if only one does

2. … has the biggest border-width, once converted into css pixels

3. … has the border-style which comes first in the following list:

   double, solid, dashed, dotted, ridge, outset, groove, inset, none
   

The length of the border list is something that we might want to compare.

For lists of same length, I guess we can compare border styles lexicographically using the order above.

[Loirooriol]

Proposal (assuming none and hidden aren't listifiable):

1. If only one border has a hidden border-style, it has more specificity (end).
2. If only one border has a none border-style, it has less specificity (end).
3. If both borders have a hidden border-style, or both have a none border-style, they have the same specificity (end).
4. If a border has a bigger 'total border width', it has more specificity (end).
   The 'total border width' is the sum of widths in border-width.
5. Otherwise, let i be 1, and loop:
   1. Compare the i-th border-style of both borders. If one comes earlier in the following list, it has more specificity (end):
      double, solid, dashed, dotted, ridge, outset, groove, inset
   2. If this was the last border-style for only one of the borders, that border has less specificity (end).
   3. Increase i by 1.

[Loirooriol]

In #13044 (comment), @dbaron proposed

Proposal for collapsed borders: for the tiebreaking purposes any multiple-border is treated by its total width and as a new "multiple" style that ranks second highest just below "hidden".

I'm not sure if I understand this "multiple" style thing.

[bradkemper]

I opened a separate issue #13452 before I realized this one was here.

My thoughts are that while harmonizing between two cells, see which one has the longer list of border widths, and then expand the list of the other to have the same number of borders (repeating list to fill in empty slots).

Then, compare and harmonize each border individually, making sure it is the same border (ie the innermost border of one cell is the outermost border of the adjacent cell). For example when you are comparing the right borders of the first cell against the left borders of the second cell, the right-most border of each would be the last border-right in the list of the first cell, but the first border-left in the list of the second cell (assuming borders are ordered from inner to outer).

[bradkemper]

I guess we should first ask what the rendering for border-collapsed multi-border should look like even if there is no conflict, in the simplest of cases.

For example, consider this:

td {
    border: 15px solid green,
    border: 15px solid blue,
    border: 15px solid red;
}

Should the result look something like this?

Or maybe this?

Or even this?

Or something else?

[bradkemper]

Or probably this would be better:

[bradkemper]

Otherwise, let i be 1, and loop:
Compare the i-th border-style of both borders. If one comes earlier in the following list, it has more specificity (end):
double, solid, dashed, dotted, ridge, outset, groove, inset
If this was the last border-style for only one of the borders, that border has less specificity (end).
Increase i by 1.

So if you had....

td:first-child {
    border: 10px double black,
            10px inset white,
            10px inset black
}
td:nth-child(2) {
    border: 10px solid black,
            10px double white,
            10px double black
}

Then as I understand your proposal, the first cell would win, because its inner border had the winning border-style, even though the second cell had more of the higher caliber border styles.

That doesn't seem right to me. My proposal is to have a winner for each border, not just the total, which means the side might end up with a combination of borders from each cell.

[Loirooriol]

the side might end up with a combination of borders from each cell

I think it would be very weird for the resulting collapsed border to have a bigger total width than the original borders.

[bradkemper]

I think it would be very weird for the resulting collapsed border to have a bigger total width than the original borders.

It wouldn't have more than the cell with the most borders.

[Loirooriol]

If you collapse borders stripe-by-stripe, then you can have

	Stripe 1	Stripe 2	Total width
Original border 1	10px solid	0px solid	10px + 0px = 10px
Original border 2	0px solid	10px solid	0px + 10px = 10px
Resulting border	10px solid	10px solid	10px + 10px = 20px

[bradkemper]

I'm not convinced that is worse than having the entire group of borders disappear along one edge because the innermost one is dotted and the cell next to it has a single but wide border.

[Loirooriol]

Wider borders win, that's already the case without listified borders, so I don't see the problem.