When an element has both border-radius and multiple background images, only the last background image is rounded appropriately.
My test case:
border:3px rgba(0,0,0,0) solid;
padding:3px 10px 5px 10px;
background: url(gloss.png) top left repeat-x padding,
#3E93B3 center top repeat-x border;
-webkit-border-radius:10px;
This was the best reduction I could come up with.
Gloss.png is a 1x10px png image filled with rgba(255,255,255,0.3)
gloss.png doesn't get rounded as it should, its corners remain sqare and conflict with the rounded corners of the element.
Created attachment 26529[details]
Screenshot of the behaviour
This is a screenshot of the testcase.
CCing dhyatt since I believe it is a spec issue rather than a WebKit bug.
(In reply to comment #3)
> Can I see a Web page with this on a site or something?
>
I will prepare a live testcase shortly :)
Sorry for not including one from the beginning.
Thank you all for looking into the bug so soon!
(In reply to comment #7)
> Is it because you set background-clip: padding, so you don't want the
> background to draw in the border area? If so, then yeah, ok, I see the bug.
>
This could also be the cause of the issue. I didn't think of it initially, but it seems equally as likely. The only way to figure it out is a better reduction. I will try to investigate the issue and provide one in a few days that I will have more time, if it's still ambiguous. Sorry for not investigating it enough from the beginning.
It's not a spec issue. I quite from backgrounds & borders:
"A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve."
(http://www.w3.org/TR/css3-background/#corner-clipping)
This was also reported again last year, here: https://bugs.webkit.org/show_bug.cgi?id=47579
The test case from the duplicate bug 47579 might be easier for reproduction: http://w3conversions.com/sandbox/border-radius/index2.html
Gabriel's case is a different one since it's about content clipping, not about background-clip. (Though this one is fixed in recent nightlies (r97225 mac for example, and today's gtk build).
Created attachment 133639[details]
Archive of layout-test-results from ec2-cr-linux-01
The attached test failures were seen while running run-webkit-tests on the chromium-ews.
Bot: ec2-cr-linux-01 Port: <class 'webkitpy.common.config.ports.ChromiumXVFBPort'> Platform: Linux-2.6.35-28-virtual-x86_64-with-Ubuntu-10.10-maverick
Created attachment 133666[details]
work-around for border-radius background clipping
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'.
Created attachment 133672[details]
Archive of layout-test-results from ec2-cr-linux-02
The attached test failures were seen while running run-webkit-tests on the chromium-ews.
Bot: ec2-cr-linux-02 Port: <class 'webkitpy.common.config.ports.ChromiumXVFBPort'> Platform: Linux-2.6.35-28-virtual-x86_64-with-Ubuntu-10.10-maverick
Created attachment 133691[details]
proposed fix for border-radius background clipping even with non-renderable radii
This version of the patch adds a code-path for clipping rounded rectangles that are not renderable.
Attachment 133691[details] did not pass style-queue:
Failed to run "['Tools/Scripts/check-webkit-style', '--diff-files', u'LayoutTests/ChangeLog', u'LayoutTests/fast..." exit_code: 1
Source/WebCore/rendering/RenderBoxModelObject.h:225: The parameter name "rect" adds no information, so it should be removed. [readability/parameter_name] [5]
Total errors found: 1 in 6 files
If any of these errors are false positives, please file a bug against check-webkit-style.
Comment on attachment 133746[details]
proposed fix for border-radius background clipping even with non-renderable radii
View in context: https://bugs.webkit.org/attachment.cgi?id=133746&action=review> LayoutTests/fast/css/background-clip-radius-values.html:7
> + border-radius: 10px 30px;
Please make the radii larger to make potential test failures more obvious.
> Source/WebCore/rendering/RenderBoxModelObject.cpp:637
> +void RenderBoxModelObject::clipComplexRoundedRect(GraphicsContext * context, const LayoutRect& rect, const RoundedRect& clipRect)
GraphicsContext* context
It's not really clear what "complex" means in the method name.
> Source/WebCore/rendering/RenderBoxModelObject.cpp:641
> + // For non-renderable rounded rectangles there are only two opposing non-zero radii
> + // (if they are computed from renderable outer border rounded rectangles)
I don't really understand this comment. Can you make it clearer?
Comment on attachment 133746[details]
proposed fix for border-radius background clipping even with non-renderable radii
View in context: https://bugs.webkit.org/attachment.cgi?id=133746&action=review>> Source/WebCore/rendering/RenderBoxModelObject.cpp:641
>> + // (if they are computed from renderable outer border rounded rectangles)
>
> I don't really understand this comment. Can you make it clearer?
Hi Simon,
Thanks for the review.
I was about to launch in a long mathematical explanation to prove why this happens, when I realized that on different ellipse width/height my comment does not apply:)
I will update the test and comment (and code).
Created attachment 134157[details]
fix for border-radius background clipping even with non-renderable radii - updated
First upload, getting EWS's output on the test image
Attachment 134157[details] did not pass style-queue:
Failed to run "['Tools/Scripts/check-webkit-style', '--diff-files', u'LayoutTests/ChangeLog', u'LayoutTests/fast..." exit_code: 1
LayoutTests/platform/win/fast/css/background-clip-radius-values-expected.png:0: Have to enable auto props in the subversion config file (/home/ubuntu/.subversion/config "enable-auto-props = yes"). Have to set the svn:mime-type in the subversion config file (/home/ubuntu/.subversion/config "*.png = svn:mime-type=image/png"). [image/png] [5]
Total errors found: 1 in 7 files
If any of these errors are false positives, please file a bug against check-webkit-style.
Created attachment 134179[details]
Archive of layout-test-results from ec2-cr-linux-04
The attached test failures were seen while running run-webkit-tests on the chromium-ews.
Bot: ec2-cr-linux-04 Port: <class 'webkitpy.common.config.ports.ChromiumXVFBPort'> Platform: Linux-2.6.35-28-virtual-x86_64-with-Ubuntu-10.10-maverick
Created attachment 134227[details]
fix for border-radius background clipping even with non-renderable radii - updated
I've updated the test image, hope everything is fine now.
Attachment 134227[details] did not pass style-queue:
Failed to run "['Tools/Scripts/check-webkit-style', '--diff-files', u'LayoutTests/ChangeLog', u'LayoutTests/fast..." exit_code: 1
LayoutTests/platform/win/fast/css/background-clip-radius-values-expected.png:0: Have to enable auto props in the subversion config file (/home/ubuntu/.subversion/config "enable-auto-props = yes"). Have to set the svn:mime-type in the subversion config file (/home/ubuntu/.subversion/config "*.png = svn:mime-type=image/png"). [image/png] [5]
Total errors found: 1 in 7 files
If any of these errors are false positives, please file a bug against check-webkit-style.
Created attachment 134329[details]
fix for border-radius background clipping even with non-renderable radii - updated
Added that blank line and removed the from WebCore's changelog the "in non-complex cases" mention
Attachment 134329[details] did not pass style-queue:
Failed to run "['Tools/Scripts/check-webkit-style', '--diff-files', u'LayoutTests/ChangeLog', u'LayoutTests/fast..." exit_code: 1
LayoutTests/platform/win/fast/css/background-clip-radius-values-expected.png:0: Have to enable auto props in the subversion config file (/home/ubuntu/.subversion/config "enable-auto-props = yes"). Have to set the svn:mime-type in the subversion config file (/home/ubuntu/.subversion/config "*.png = svn:mime-type=image/png"). [image/png] [5]
Total errors found: 1 in 7 files
If any of these errors are false positives, please file a bug against check-webkit-style.
Created attachment 136089[details]
fix for border-radius background clipping even with non-renderable radii - updated to match trunk
Made it work against trunk
Created attachment 136123[details]
Archive of layout-test-results from ec2-cr-linux-02
The attached test failures were seen while running run-webkit-tests on the chromium-ews.
Bot: ec2-cr-linux-02 Port: <class 'webkitpy.common.config.ports.ChromiumXVFBPort'> Platform: Linux-2.6.35-28-virtual-x86_64-with-Ubuntu-10.10-maverick
(In reply to comment #42)
> Vlad, Any reason this got stalled?
No other reason other than lack of time, augmented by the fact that I needed a build roundtrip to get the correct output for tests that are impacted (as I am on Windows, my rendering tests are slightly differently colored if I remember correctly).
Comment on attachment 165374[details]
fix for border-radius background clipping even with non-renderable radii - updated again to match trunk
Attachment 165374[details] did not pass chromium-ews (chromium-xvfb):
Output: http://queues.webkit.org/results/13994680
New failing tests:
fast/css/background-clip-radius-values.html
ietestcenter/css3/bordersbackgrounds/border-radius-clip-002.htm
Created attachment 165458[details]
fix for border-radius background clipping even with non-renderable radii - updated again to match trunk, trying to fix test failures #1
There are still some differences I am encountering on my macbook against ews - trying to upload previous test results to fix this
Comment on attachment 165458[details]
fix for border-radius background clipping even with non-renderable radii - updated again to match trunk, trying to fix test failures #1
Attachment 165458[details] did not pass chromium-ews (chromium-xvfb):
Output: http://queues.webkit.org/results/13994840
New failing tests:
fast/css/background-clip-radius-values.html
ietestcenter/css3/bordersbackgrounds/border-radius-clip-002.htm
Simon, ping? Could you take a quick look? Only minor lint changes since your last review, but I just wanted to make sure you were still OK with landing this as it has been quite a while.
Attachment 168814[details] did not pass style-queue:
Failed to run "['Tools/Scripts/check-webkit-style', '--diff-files', u'LayoutTests/ChangeLog', u'LayoutTests/fast..." exit_code: 1
LayoutTests/platform/chromium-linux/fast/css/background-clip-radius-values-expected.png:0: Have to enable auto props in the subversion config file (/Users/eseidel/.subversion/config "enable-auto-props = yes"). Have to set the svn:mime-type in the subversion config file (/Users/eseidel/.subversion/config "*.png = svn:mime-type=image/png"). [image/png] [5]
Total errors found: 1 in 10 files
If any of these errors are false positives, please file a bug against check-webkit-style.
2009-01-07 10:59 PST, Lea Verou
2009-01-08 12:27 PST, Anthony Ricaud
2009-01-08 14:30 PST, Lea Verou
2012-03-24 08:27 PDT, Vlad Grecescu
2012-03-24 09:27 PDT, WebKit Review Bot
2012-03-24 18:18 PDT, Vlad Grecescu
2012-03-25 00:27 PDT, WebKit Review Bot
2012-03-25 13:45 PDT, Vlad Grecescu
2012-03-26 01:23 PDT, Vlad Grecescu
2012-03-27 15:59 PDT, Vlad Grecescu
2012-03-27 17:25 PDT, WebKit Review Bot
2012-03-28 00:23 PDT, Vlad Grecescu
2012-03-28 10:32 PDT, Vlad Grecescu
2012-04-06 16:14 PDT, Vlad Grecescu
webkit.review.bot: commit-queue-
2012-04-06 20:31 PDT, WebKit Review Bot
2012-09-24 07:11 PDT, Vlad Grecescu
2012-09-24 15:49 PDT, Vlad Grecescu
2012-10-10 19:04 PDT, dstockwell
2012-10-10 21:23 PDT, dstockwell
2012-10-15 17:25 PDT, dstockwell