When using border-collapse: collapse the border sometimes gets painted on the wrong cell. This does not happen when using cellSpacing = 0
Created attachment 22612 [details] Test case
This behavior is undefined, but Firefox does better than us here, so I'm considering it a valid QoI bug. A better reduced testcase is included at the end of this comment. The problem is that, when we resolve border conflicts in the collapsed borders model, we don't treat col/rowspanning elements specially. If a single-cell <td>'s border wins over a neighboring spanning <td>, the spanning <td> applies the new style across its entire border edge, rather than just the segment of its border that it shares with the single-cell <td>. We should instead limit the effect to only applying to the segment of border that is actually shared between the two cells. Reduced test case: <!DOCTYPE html> <table> <tr> <td class=border></td> <td></td> <tr> <td colspan=2></td> </table> <br> <table style=border-collapse:collapse;> <tr> <td class=border></td> <td></td> <tr> <td colspan=2></td> </table> <style> td { min-width: 20px; height: 20px; background: silver; border: thick solid black; } .border { border-bottom-color: red; } </style>
Created attachment 462011 [details] STP 152 differ from Chrome & Firefox I took the test case from Comment 02 and changed it into JSFiddle: Link - https://jsfiddle.net/1k3o6m24/ As can be seen from the attached screenshot, the bottom border does not lead or bleed into other borders. Just wanted to share updated testing results. Thanks!
<rdar://problem/99343591>
to note that all browsers have a different behavior here. safari doesn't bleed at all on both sides firefox bleeds on the left side chrome bleeds on both sides. The interesting part is that I find the result in Safari more esthetically pleasing to the eye.