[Webkit-unassigned] [Bug 111129] New: REGRESSION (r134631, r144196): Border on element with border-radius rendering incorrectly

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=111129

           Summary: REGRESSION (r134631, r144196): Border on element with
                    border-radius rendering incorrectly
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: Unspecified
        OS/Version: Unspecified
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: jtmacey at gmail.com
                CC: junov at google.com


Created an attachment (id=190839)
 --> (https://bugs.webkit.org/attachment.cgi?id=190839&action=review)
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

-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug.