Bug 111129 – REGRESSION (r134631, r144196): Border on element with border-radius rendering incorrectly

• Status: UNCONFIRMED
• Component: Layout and Rendering

[Jeff Macey]

Created attachment 190839 [details]
HTML usecases showing the issues

It appears that changeset 134631 with the 144196 fix for bug 110889 introduced an entirely different way of rendering elements with both border-radius and borders. Since it appears the use-cases all deal with the incorrect rendering of the border and appear to be caused by the same issue, I'm filing this as a single bug. Since at least two cases are rendering regressions, I've labeled it as such.

The main discrepancy I'm seeing is the different radii renderings for the different methods (pre and post changeset 134631) where the two curves for the elements render slightly different. I don't know which curve calculation is the correct or more accurate one. I've attached a difference mask to better highlight all of the rendering differences.

The regressions:
  * For an element with a 1px border and a single or two opposite curved corners (border-radius: 20px 0 20px / 40px 0 40px;), the 1px border doesn't render contiguously.
  * When rendering a border to a curved corner, the background color will bleed through a little.
  * A top border will bleed over the edge if there's a curve terminating at one of its corners.

This is an interesting side-effect from the change; the border renders the same, but the content is clipped differently. When an element's height is less than a corner's radius, the border should taper and fade to the corner. Instead, the border terminates at the mid-point. This creates an effect that almost looks like a drop-shadow for thicker borders. The previous behavior also looked incorrect as the empty space was drawn in with the element's content which is now clipped away.

My guess here is the border-radius clipping algorithm for determining the curve was changed and now differs from the one that draws the border. If they are in fact slightly different curves now, I could see how the background bleeding through would occur since they wouldn't be correctly aligned as well as the overall border rendering incorrectly (the 1px case) if the clipping mask cut off the border since it was outside the boundary of the clipping curve.

Previous rendering shown on Chromium Version 25.0.1327.0 (168098) for Windows 7
  Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.19 (KHTML, like Gecko) Chrome/25.0.1327.0 Safari/537.19

Current rendering shown on Canary Version 27.0.1425.2 canary for Window 7
  Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.32 (KHTML, like Gecko) Chrome/27.0.1425.2 Safari/537.32

[Jeff Macey]

Created attachment 190840 [details]
Previous rendering of the usecases

[Jeff Macey]

Created attachment 190841 [details]
Current rendering of the usecases

[Jeff Macey]

Created attachment 190842 [details]
Difference mask of renderings

[Jeff Macey]

Created attachment 190843 [details]
Closeup of background bleeding through

[Jeff Macey]

Created attachment 190844 [details]
Closeup of top border bleeding over the right edge

[Jeff Macey]

Created attachment 190845 [details]
Closeup of the border being clipped