Bug 23166 - background-clip doesn't work when border-radius is specified
: background-clip doesn't work when border-radius is specified
Status: RESOLVED FIXED
Product: WebKit
Classification: Unclassified
Component: CSS
: 525.x (Safari 3.2)
: PC Mac OS X 10.5
: P4 Normal
Assigned To: dstockwell
: HasReduction
Depends on:
Blocks: 83206
  Show dependency treegraph
 
Reported: 2009-01-07 10:57 PST by Lea Verou
Modified: 2012-11-30 11:45 PST (History)
21 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Lea Verou 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.
Comment 1 Lea Verou 2009-01-07 10:59:04 PST
Created attachment 26495 [details]
gloss.png that is in the example css
Comment 2 Anthony Ricaud 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.
Comment 3 Dave Hyatt 2009-01-08 13:07:48 PST
Can I see a Web page with this on a site or something?
Comment 4 Lea Verou 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!
Comment 5 Lea Verou 2009-01-08 14:30:22 PST
Created attachment 26535 [details]
Testcase
Comment 6 Dave Hyatt 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.

Comment 7 Dave Hyatt 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.

Comment 8 Dave Hyatt 2009-03-25 08:56:28 PDT
Changing the title of the bug to reflect what's really going on.

Comment 9 Lea Verou 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.
Comment 10 BrianMB 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
Comment 11 BrianMB 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.
Comment 12 Lea Verou 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
Comment 13 Simon Fraser (smfr) 2011-03-17 10:29:18 PDT
*** Bug 47579 has been marked as a duplicate of this bug. ***
Comment 14 Lea Verou 2011-03-17 14:19:34 PDT
Also, Firefox 4 and IE9 get this right. 
Opera also has the same bug.
Comment 15 Gabriel Schulhof 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.
Comment 16 Dominik Röttsches (drott) 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).
Comment 17 Vlad Grecescu 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
Comment 18 WebKit Review Bot 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
Comment 19 WebKit Review Bot 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
Comment 20 Vlad Grecescu 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'.
Comment 21 WebKit Review Bot 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
Comment 22 WebKit Review Bot 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
Comment 23 Vlad Grecescu 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.
Comment 24 WebKit Review Bot 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.
Comment 25 Vlad Grecescu 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
Comment 26 Simon Fraser (smfr) 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?
Comment 27 Vlad Grecescu 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).
Comment 28 Vlad Grecescu 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
Comment 29 WebKit Review Bot 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.
Comment 30 WebKit Review Bot 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
Comment 31 WebKit Review Bot 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
Comment 32 Vlad Grecescu 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.
Comment 33 WebKit Review Bot 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.
Comment 34 Simon Fraser (smfr) 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.
Comment 35 Vlad Grecescu 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
Comment 36 WebKit Review Bot 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.
Comment 37 Vlad Grecescu 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
Comment 38 WebKit Review Bot 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
Comment 39 WebKit Review Bot 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
Comment 40 Eric Seidel 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.
Comment 41 Eric Seidel 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.
Comment 42 Elliott Sprehn 2012-07-20 01:15:53 PDT
Vlad, Any reason this got stalled?
Comment 43 Vlad Grecescu 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).
Comment 44 Vlad Grecescu 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
Comment 45 WebKit Review Bot 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
Comment 46 Build Bot 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
Comment 47 Vlad Grecescu 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
Comment 48 WebKit Review Bot 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
Comment 49 Build Bot 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
Comment 50 dstockwell 2012-10-10 19:04:43 PDT
Created attachment 168123 [details]
Patch
Comment 51 dstockwell 2012-10-10 21:23:42 PDT
Created attachment 168139 [details]
Patch
Comment 52 dstockwell 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.
Comment 53 dstockwell 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.
Comment 54 dstockwell 2012-10-15 17:25:47 PDT
Created attachment 168814 [details]
Patch for landing
Comment 55 Eric Seidel 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.
Comment 56 Mike Lawther 2012-10-15 20:03:30 PDT
Comment on attachment 168814 [details]
Patch for landing

cq+ based on smfr's r+
Comment 57 WebKit Review Bot 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>
Comment 58 WebKit Review Bot 2012-10-15 20:27:05 PDT
All reviewed patches have been landed.  Closing bug.
Comment 59 Simon Fraser (smfr) 2012-11-30 11:45:33 PST
*** Bug 103730 has been marked as a duplicate of this bug. ***