Bug 17819 – Border-collapse: collapse later cell wins on PC, earlier cell on Mac

• Component: Tables
• Status: REOPENED

[Michael Dayah]

When two cells' borders touch in a border-collapse: collapse table, on a PC, the cell that comes later wins the border. On a Mac, the cell that comes earlier (correct behavior) wins the border. In this testcase, a PC will show a red border, Mac a blue one.

Relevant spec: http://www.w3.org/TR/CSS21/tables.html#border-conflict-resolution

The latest Safari beta, 3.0.4, shows the same behavior on PC and Mac as the latest nightly.

Created attachment 19743 [details]
Correct border comparison

The reason only Windows was affected has to do with painting order, which in turn had to do with non-deterministic sorting. Now regardless of order, all cells will paint the same border with the same resolved style.

[Dave Hyatt]

This bug is actually a dup of another one.  I remember seeing the other one in bugzilla.

[Dave Hyatt]

Comment on attachment 19743 [details]
Correct border comparison

r=me

Fixed in <http://trac.webkit.org/projects/webkit/changeset/31044>.

[Michael Dayah]

The fix does work for edges, but not for corners. On Windows, the edge between A and B in the linked test case is now blue as it should be, but the corners above and below this edge remain red.

I see the problem. This may be harder to fix.

[Ahmad Saleem]

I took the test case from patch and changed it into JSFiddle:

- https://jsfiddle.net/4epqt9Lw/show

Few issues, I noted while using "Safari Technology Preview 152":

1) It has more bold / solid color lines compared to Firefox Nightly 106 and Chrome Canary 107

2) The overlap corners, where two lines meet, the color is different and looks like painting is not right.

Only Firefox Nightly 106 renders the corner overlap without any kind of pixelations or different tones. Both Safari and Chrome is showing corners in different colours.

Appreciate if someone can confirm, whether it requires separate bug or it is original case for which it was reopened. Thanks!

[Karl Dubost]

Created attachment 478166 [details]
rendering in safari, firefox, chrome

https://codepen.io/webcompat/pen/yyJpzge

[Karl Dubost]

Created attachment 478167 [details]
rendering in safari, firefox, chrome

The attempt at defining Conflict Resolution for collapsed border is in 
https://drafts.csswg.org/css-tables-3/#conflict-resolution-for-collapsed-borders

This is a DRAFT.

Here a very simple testcase to show the issue with opacity and collapsed borders.

<style>
td  {width:50px;height:50px}
table {border-collapse: collapse}
</style>
<table>
  <tbody>
    <tr>
      <td style="
           border-left: 20px solid rgba(0, 127, 0, 0.5); 
           border-bottom: 20px solid rgba(0, 127, 0, 0.5);"></td>
    </tr>
  </tbody>
</table>

Safari and Chrome adds the opacity
Firefox choose one or doesn't add up the opacity.

[Karl Dubost]

Created attachment 478168 [details]
rendering in safari, firefox, chrome with colors

With two colors we better see the strategy.
Firefox joins border by taking the diagonal, so there is no overlap in between the borders.

[Karl Dubost]

test in https://codepen.io/webcompat/pen/XJKVezR

[Karl Dubost]

I opened https://github.com/w3c/csswg-drafts/issues/13406

[Radar WebKit Bug Importer]

<rdar://problem/169092248>

[Karl Dubost]

Bug 61598 is alluding to similar issues.