23166 – background-clip doesn't work when border-radius is specified

RESOLVED FIXED Bug 23166

background-clip doesn't work when border-radius is specified

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

Summary background-clip doesn't work when border-radius is specified

Lea Verou

Reported 2009-01-07 10:57:56 PST

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.

Attachments
gloss.png that is in the example css (128 bytes, image/png) 2009-01-07 10:59 PST, Lea Verou	no flags	Details
Screenshot of the behaviour (36.46 KB, image/png) 2009-01-08 12:27 PST, Anthony Ricaud	no flags	Details
Testcase (670 bytes, text/html) 2009-01-08 14:30 PST, Lea Verou	no flags	Details
proposed fix for border-radius background clipping (17.18 KB, patch) 2012-03-24 08:27 PDT, Vlad Grecescu	webkit.review.bot: commit-queue-	Details Formatted Diff Diff
Archive of layout-test-results from ec2-cr-linux-01 (9.82 MB, application/zip) 2012-03-24 09:27 PDT, WebKit Review Bot	no flags	Details
work-around for border-radius background clipping (16.55 KB, patch) 2012-03-24 18:18 PDT, Vlad Grecescu	webkit.review.bot: commit-queue-	Details Formatted Diff Diff
Archive of layout-test-results from ec2-cr-linux-02 (9.70 MB, application/zip) 2012-03-25 00:27 PDT, WebKit Review Bot	no flags	Details
proposed fix for border-radius background clipping even with non-renderable radii (16.20 KB, patch) 2012-03-25 13:45 PDT, Vlad Grecescu	no flags	Details Formatted Diff Diff
proposed fix for border-radius background clipping even with non-renderable radii (16.20 KB, patch) 2012-03-26 01:23 PDT, Vlad Grecescu	no flags	Details Formatted Diff Diff
fix for border-radius background clipping even with non-renderable radii - updated (76.16 KB, patch) 2012-03-27 15:59 PDT, Vlad Grecescu	webkit.review.bot: commit-queue-	Details Formatted Diff Diff
Archive of layout-test-results from ec2-cr-linux-04 (10.46 MB, application/zip) 2012-03-27 17:25 PDT, WebKit Review Bot	no flags	Details
fix for border-radius background clipping even with non-renderable radii - updated (53.37 KB, patch) 2012-03-28 00:23 PDT, Vlad Grecescu	no flags	Details Formatted Diff Diff
fix for border-radius background clipping even with non-renderable radii - updated (53.36 KB, patch) 2012-03-28 10:32 PDT, Vlad Grecescu	no flags	Details Formatted Diff Diff
fix for border-radius background clipping even with non-renderable radii - updated to match trunk (53.35 KB, patch) 2012-04-06 16:14 PDT, Vlad Grecescu	simon.fraser: review+ webkit.review.bot: commit-queue-	Details Formatted Diff Diff
Archive of layout-test-results from ec2-cr-linux-02 (6.27 MB, application/zip) 2012-04-06 20:31 PDT, WebKit Review Bot	no flags	Details
fix for border-radius background clipping even with non-renderable radii - updated again to match trunk (111.95 KB, patch) 2012-09-24 07:11 PDT, Vlad Grecescu	webkit.review.bot: commit-queue-	Details Formatted Diff Diff
fix for border-radius background clipping even with non-renderable radii - updated again to match trunk, trying to fix test failures #1 (119.49 KB, patch) 2012-09-24 15:49 PDT, Vlad Grecescu	no flags	Details Formatted Diff Diff
Patch (148.42 KB, patch) 2012-10-10 19:04 PDT, dstockwell	no flags	Details Formatted Diff Diff
Patch (148.50 KB, patch) 2012-10-10 21:23 PDT, dstockwell	no flags	Details Formatted Diff Diff
Patch for landing (149.66 KB, patch) 2012-10-15 17:25 PDT, dstockwell	no flags	Details Formatted Diff Diff
Show Obsolete (12) View All Add attachment proposed patch, testcase, etc.

Lea Verou

Comment 1 2009-01-07 10:59:04 PST

Created attachment 26495 [details] gloss.png that is in the example css

Anthony Ricaud

Comment 2 2009-01-08 12:27:56 PST

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.

Dave Hyatt

Comment 3 2009-01-08 13:07:48 PST

Can I see a Web page with this on a site or something?

Lea Verou

Comment 4 2009-01-08 13:21:18 PST

(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!

Lea Verou

Comment 5 2009-01-08 14:30:22 PST

Created attachment 26535 [details] Testcase

Dave Hyatt

Comment 6 2009-03-25 08:53:26 PDT

This doesn't seem like a bug to me. The background is clipped by the border radius... I don't really understand what rendering you're hoping for here.

Dave Hyatt

Comment 7 2009-03-25 08:55:40 PDT

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.

Dave Hyatt

Comment 8 2009-03-25 08:56:28 PDT

Changing the title of the bug to reflect what's really going on.

Lea Verou

Comment 9 2009-03-25 15:26:11 PDT

(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.

BrianMB

Comment 10 2011-02-04 16:31:09 PST

I have logged this in great detail on Chromium's bugtracker: http://code.google.com/p/chromium/issues/detail?id=72014

BrianMB

Comment 11 2011-02-04 16:31:57 PST

(In reply to comment #10) > I have logged this in great detail on Chromium's bugtracker: > > http://code.google.com/p/chromium/issues/detail?id=72014 It includes screenshots. Firefox 4 renders correctly.

Lea Verou

Comment 12 2011-03-17 01:34:40 PDT

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

Simon Fraser (smfr)

Comment 13 2011-03-17 10:29:18 PDT

*** Bug 47579 has been marked as a duplicate of this bug. ***

Lea Verou

Comment 14 2011-03-17 14:19:34 PDT

Also, Firefox 4 and IE9 get this right. Opera also has the same bug.

Gabriel Schulhof

Comment 15 2011-10-07 00:40:34 PDT

<html> <head> <title>Clipping Bug</title> <style> .rounded-corners { position: relative; width: 120px; height: 80px; border: 10px solid black; border-radius: 30px; overflow: hidden; } .inner-box { position: absolute; width: 50px; height: 50px; background: red; left: -20px; top: -20px; } </style> </head> <body> <div class="rounded-corners"> <div class="inner-box"></div> </div> </body> </html> Looks correctly clipped in Firefox 7.0.1, but not in Google Chrome 14.0.835.202.

Dominik Röttsches (drott)

Comment 16 2011-10-12 06:09:31 PDT

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).

Vlad Grecescu

Comment 17 2012-03-24 08:27:27 PDT

Created attachment 133634 [details] proposed fix for border-radius background clipping This patch further shrinks the rounded area that is clipped from the background if background-clip is content-box or padding-box. See http://www.w3.org/TR/css3-background/#corner-shaping

WebKit Review Bot

Comment 18 2012-03-24 09:27:14 PDT

Comment on attachment 133634 [details] proposed fix for border-radius background clipping Attachment 133634 [details] did not pass chromium-ews (chromium-xvfb): Output: http://queues.webkit.org/results/12127186 New failing tests: fast/css/background-clip-radius-values.html fast/borders/border-radius-complex-inner.html fast/backgrounds/gradient-background-leakage.html fast/borders/border-radius-different-width-001.html fast/backgrounds/border-radius-split-background-image.html

WebKit Review Bot

Comment 19 2012-03-24 09:27:22 PDT

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

Vlad Grecescu

Comment 20 2012-03-24 18:18:19 PDT

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'.

WebKit Review Bot

Comment 21 2012-03-25 00:26:55 PDT

Comment on attachment 133666 [details] work-around for border-radius background clipping Attachment 133666 [details] did not pass chromium-ews (chromium-xvfb): Output: http://queues.webkit.org/results/12128298 New failing tests: fast/css/background-clip-radius-values.html

WebKit Review Bot

Comment 22 2012-03-25 00:27:03 PDT

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

Vlad Grecescu

Comment 23 2012-03-25 13:45:35 PDT

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.

WebKit Review Bot

Comment 24 2012-03-25 13:50:43 PDT

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.

Vlad Grecescu

Comment 25 2012-03-26 01:23:38 PDT

Created attachment 133746 [details] proposed fix for border-radius background clipping even with non-renderable radii fixing style from previous patch

Simon Fraser (smfr)

Comment 26 2012-03-26 10:48:56 PDT

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?

Vlad Grecescu

Comment 27 2012-03-27 15:43:04 PDT

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).

Vlad Grecescu

Comment 28 2012-03-27 15:59:30 PDT

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

WebKit Review Bot

Comment 29 2012-03-27 16:06:45 PDT

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.

WebKit Review Bot

Comment 30 2012-03-27 17:25:17 PDT

Comment on attachment 134157 [details] fix for border-radius background clipping even with non-renderable radii - updated Attachment 134157 [details] did not pass chromium-ews (chromium-xvfb): Output: http://queues.webkit.org/results/12142823 New failing tests: fast/css/background-clip-radius-values.html

WebKit Review Bot

Comment 31 2012-03-27 17:25:33 PDT

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

Vlad Grecescu

Comment 32 2012-03-28 00:23:03 PDT

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.

WebKit Review Bot

Comment 33 2012-03-28 00:30:33 PDT

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.

Simon Fraser (smfr)

Comment 34 2012-03-28 08:57:27 PDT

Comment on attachment 134227 [details] fix for border-radius background clipping even with non-renderable radii - updated View in context: https://bugs.webkit.org/attachment.cgi?id=134227&action=review > Source/WebCore/rendering/RenderBoxModelObject.cpp:653 > + } Blank line here please.

Vlad Grecescu

Comment 35 2012-03-28 10:32:46 PDT

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

WebKit Review Bot

Comment 36 2012-03-28 10:44:57 PDT

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.

Vlad Grecescu

Comment 37 2012-04-06 16:14:26 PDT

Created attachment 136089 [details] fix for border-radius background clipping even with non-renderable radii - updated to match trunk Made it work against trunk

WebKit Review Bot

Comment 38 2012-04-06 20:31:48 PDT

Comment on attachment 136089 [details] fix for border-radius background clipping even with non-renderable radii - updated to match trunk Attachment 136089 [details] did not pass chromium-ews (chromium-xvfb): Output: http://queues.webkit.org/results/12360237 New failing tests: ietestcenter/css3/bordersbackgrounds/border-radius-clip-002.htm

WebKit Review Bot

Comment 39 2012-04-06 20:31:55 PDT

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

Eric Seidel (no email)

Comment 40 2012-04-19 16:55:39 PDT

Comment on attachment 133746 [details] proposed fix for border-radius background clipping even with non-renderable radii Cleared Simon Fraser's review+ from obsolete attachment 133746 [details] so that this bug does not appear in http://webkit.org/pending-commit.

Eric Seidel (no email)

Comment 41 2012-04-19 16:55:44 PDT

Comment on attachment 134227 [details] fix for border-radius background clipping even with non-renderable radii - updated Cleared Simon Fraser's review+ from obsolete attachment 134227 [details] so that this bug does not appear in http://webkit.org/pending-commit.

Elliott Sprehn

Comment 42 2012-07-20 01:15:53 PDT

Vlad, Any reason this got stalled?

Vlad Grecescu

Comment 43 2012-07-20 08:25:31 PDT

(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).

Vlad Grecescu

Comment 44 2012-09-24 07:11:33 PDT

Created attachment 165374 [details] fix for border-radius background clipping even with non-renderable radii - updated again to match trunk

WebKit Review Bot

Comment 45 2012-09-24 09:10:52 PDT

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

Build Bot

Comment 46 2012-09-24 10:02:10 PDT

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 mac-ews (mac): Output: http://queues.webkit.org/results/13986744 New failing tests: fast/css/background-clip-radius-values.html

Vlad Grecescu

Comment 47 2012-09-24 15:49:31 PDT

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

WebKit Review Bot

Comment 48 2012-09-24 17:48:41 PDT

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

Build Bot

Comment 49 2012-09-25 04:29:12 PDT

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 mac-ews (mac): Output: http://queues.webkit.org/results/13992980 New failing tests: fast/css/background-clip-radius-values.html

dstockwell

Comment 50 2012-10-10 19:04:43 PDT

Created attachment 168123 [details] Patch

dstockwell

Comment 51 2012-10-10 21:23:42 PDT

Created attachment 168139 [details] Patch

dstockwell

Comment 52 2012-10-10 23:08:50 PDT

Comment on attachment 168139 [details] Patch Only minor changes to the code (to pass lint) from Vlad's last patch.

dstockwell

Comment 53 2012-10-14 20:49:25 PDT

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.

dstockwell

Comment 54 2012-10-15 17:25:47 PDT

Created attachment 168814 [details] Patch for landing

Eric Seidel (no email)

Comment 55 2012-10-15 17:28:50 PDT

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.

Mike Lawther

Comment 56 2012-10-15 20:03:30 PDT

Comment on attachment 168814 [details] Patch for landing cq+ based on smfr's r+

WebKit Review Bot

Comment 57 2012-10-15 20:26:55 PDT

Comment on attachment 168814 [details] Patch for landing Clearing flags on attachment: 168814 Committed r131402: <http://trac.webkit.org/changeset/131402>

WebKit Review Bot

Comment 58 2012-10-15 20:27:05 PDT

All reviewed patches have been landed. Closing bug.

Simon Fraser (smfr)

Comment 59 2012-11-30 11:45:33 PST

*** Bug 103730 has been marked as a duplicate of this bug. ***

Note You need to log in before you can comment on or make changes to this bug.

Status RESOLVED

Resolution FIXED

Priority P4

Severity Normal

Classification Unclassified

Version 525.x (Safari 3.2)

Hardware PC

OS OS X 10.5

Product WebKit

Component CSS

Assignee

dstockwell

Reported

2009-01-07 10:57 PST

Modified

2012-11-30 11:45 PST History

CC List

21 users Show

URL

Keywords HasReduction

Duplicates (2)

47579 103730 View as bug list

Depends on

Blocks

83206

Dependancies

tree graph

7raivis
andrej.cremoznik
anewpage.media
aragost
dglazkov
d-r
dstockwell
eric
esprehn
farukates
getify
gyuyoung.kim
hyatt
igrecesc
lea
mathias
phiw2
rakuco
simon.fraser
stream
webkit.review.bot