According to http://www.w3.org/TR/css3-background/#border-radius, an element with multiple border-radii must transition smoothly between them "Thus when two adjoining borders are of different thicknesses the corner will show a smooth transition between the thicker and thinner borders."
Maybe dup to bug 9197.
Created attachment 89988 [details] One possible rendering On possible rendering for this is shown in the attachment. The code for that looks something like: diff --git a/Source/WebCore/rendering/style/RenderStyle.cpp b/Source/WebCore/rendering/style/RenderStyle.cpp index b3ea499..8f14716 100644 --- a/Source/WebCore/rendering/style/RenderStyle.cpp +++ b/Source/WebCore/rendering/style/RenderStyle.cpp @@ -803,15 +803,30 @@ RoundedIntRect RenderStyle::getRoundedBorderFor(const IntRect& rect) const { RoundedIntRect::Radii radii = calcRadiiFor(surround->border, rect.width(), rect.height()); radii.scale(calcConstraintScaleFor(rect, radii)); + + // Further constrain the radii + int leftWidth = borderLeftWidth(); + int rightWidth = borderRightWidth(); + int topWidth = borderTopWidth(); + int bottomWidth = borderBottomWidth(); + + int maxLeftRadius = rect.width() - rightWidth; + int maxRightRadius = rect.width() - leftWidth; + int maxTopRadius = rect.width() - bottomWidth; + int maxBottomRadius = rect.width() - topWidth; + + radii.setTopLeft(IntSize(min(radii.topLeft().width(), maxLeftRadius), min(radii.topLeft().height(), maxTopRadius))); + radii.setTopRight(IntSize(min(radii.topRight().width(), maxRightRadius), min(radii.topRight().height(), maxTopRadius))); + radii.setBottomLeft(IntSize(min(radii.bottomLeft().width(), maxLeftRadius), min(radii.bottomLeft().height(), maxBottomRadius))); + radii.setBottomRight(IntSize(min(radii.bottomRight().width(), maxRightRadius), min(radii.bottomRight().height(), maxBottomRadius))); + return RoundedIntRect(rect, radii); }
The smooth transition issue is fixed. Repurposing this bug to address the remaining issue with the testcase.
Created attachment 89989 [details] Testcase
To get this rendering right, we'd have to not consider the border inner edge as a rounded rect.
Created attachment 110436 [details] A simpler testcase with the same problem This is a reduced test case from http://crbug.com/98893
Created attachment 110457 [details] Patch
This fix isn't perfect, in particular: - it doesn't handle cases where the four borders are different styles or colors as the side polygons are calculated in a conservative way to ensure bits don't get chopped off - it won't help fix other problems with inner border not being a rounded rect (e.g. border shadow which you can see in chrome bug 98893) A better fix would be to work out the path of the inner border and use that, perhaps that can come subsequently and this fix stand as a progression.
Comment on attachment 110457 [details] Patch View in context: https://bugs.webkit.org/attachment.cgi?id=110457&action=review > LayoutTests/fast/borders/border-radius-complex-inner.html:10 > + display: inline-block; > + border: 5px #00F solid; > + width: 20px; > + height: 20px; > + padding: 0px; > + margin: 10px; Please make everything bigger, more like the mixed-border-styles-radius tests, so that failures are more obvious in pixel tests. > Source/WebCore/rendering/RenderBoxModelObject.cpp:2258 > + // Expand the inner border as necessary to make it a rounded rect (i.e. radii contained within each > + // edge). Unfortunate wrapping. > Source/WebCore/rendering/RenderBoxModelObject.cpp:2337 > +void RenderBoxModelObject::clipBorderSideForComplexInnerPath(GraphicsContext* graphicsContext, const RoundedRect& outerBorder, const RoundedRect& innerBorder, > + BoxSide side, const class BorderEdge edges[]) In new code we don't try to align stuff like this. Just indent the second line by 4 spaces, or unwrap it.
Created attachment 110468 [details] Patch
Comment on attachment 110468 [details] Patch setting cq+ after previous r+ from smfr
Comment on attachment 110468 [details] Patch Rejecting attachment 110468 [details] from commit-queue. Failed to run "['/mnt/git/webkit-commit-queue/Tools/Scripts/webkit-patch', '--status-host=queues.webkit.org', '-..." exit_code: 2 Last 500 characters of output: video-playing-and-pause.html = MISSING PASS Regressions: Unexpected text diff mismatch : (1) fast/borders/border-radius-complex-inner.html = TEXT Regressions: Unexpected image mismatch : (5) fast/text/atsui-multiple-renderers.html = IMAGE fast/text/international/danda-space.html = IMAGE fast/text/international/thai-baht-space.html = IMAGE fast/text/international/thai-line-breaks.html = IMAGE platform/chromium-linux/fast/text/international/complex-joining-using-gpos.html = IMAGE Full output: http://queues.webkit.org/results/10030461
Comment on attachment 110468 [details] Patch Attachment 110468 [details] did not pass chromium-ews (chromium-xvfb): Output: http://queues.webkit.org/results/10030467 New failing tests: fast/borders/border-radius-complex-inner.html
Created attachment 110636 [details] Patch with test text results updated and moved.
Comment on attachment 110636 [details] Patch with test text results updated and moved. The previous patch had the wrong test text result, this patch updates it and moves it into platform/mac/fast/borders.
Comment on attachment 110636 [details] Patch with test text results updated and moved. Rejecting attachment 110636 [details] from commit-queue. aboxhall@chromium.org does not have committer permissions according to http://trac.webkit.org/browser/trunk/Tools/Scripts/webkitpy/common/config/committers.py. - If you do not have committer rights please read http://webkit.org/coding/contributing.html for instructions on how to use bugzilla flags. - If you have committer rights please correct the error in Tools/Scripts/webkitpy/common/config/committers.py by adding yourself to the file (no review needed). The commit-queue restarts itself every 2 hours. After restart the commit-queue will correctly respect your committer rights.
Comment on attachment 110636 [details] Patch with test text results updated and moved. Clearing flags on attachment: 110636 Committed r97318: <http://trac.webkit.org/changeset/97318>
All reviewed patches have been landed. Closing bug.
Created attachment 133665 [details] work-around for border-radius background clipping I just noticed (from the w3c link and the EWS tests that failed previously) that need to support non "full quarter ellipses" too, - I initially tried to reduce all the radii to keep the borders and paddings untouched.. So I modified the patch to just work for the common cases, and fall back to the existing code if the clipping border is not 'renderable'.
Ah, sorry, posting in the wrong bug. The patch is meant for https://bugs.webkit.org/show_bug.cgi?id=23166