Bug 20260

Summary: The conflict resolution algorithm for table borders in the collapsed borders model should only affect the segment of border that is actually shared between the two cells
Product: WebKit Reporter: Erik Arvidsson <erik.arvidsson>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, jchaffraix, karlcow, rniwa, shezbaig.wk, simon.fraser, tabatkins, webkit-bug-importer, zalan
Priority: P2 Keywords: BrowserCompat, HasReduction, InRadar
Version: 528+ (Nightly build)   
Hardware: PC   
OS: All   
Attachments:
Description Flags
Test case
none
STP 152 differ from Chrome & Firefox none

Erik Arvidsson
Reported 2008-08-01 16:40:29 PDT
When using border-collapse: collapse the border sometimes gets painted on the wrong cell. This does not happen when using cellSpacing = 0
Attachments
Test case (2.50 KB, text/html)
2008-08-01 16:41 PDT, Erik Arvidsson 		no flags
Details
STP 152 differ from Chrome & Firefox (624.18 KB, image/png)
2022-08-30 10:17 PDT, Ahmad Saleem 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Erik Arvidsson
Comment 1 2008-08-01 16:41:07 PDT
Created attachment 22612 [details] Test case
Tab Atkins
Comment 2 2011-10-20 18:02:52 PDT
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>
Ahmad Saleem
Comment 3 2022-08-30 10:17:11 PDT
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!
Radar WebKit Bug Importer
Comment 4 2022-08-30 12:00:46 PDT
<rdar://problem/99343591>
Karl Dubost
Comment 5 2023-02-12 19:07:58 PST
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.
Note You need to log in before you can comment on or make changes to this bug.