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
: WebKit
CSS
: 525.x (Safari 3.2)
: PC Mac OS X 10.5
: P4 Normal
Assigned To:
:
: HasReduction
:
: 83206
  Show dependency treegraph
 
Reported: 2009-01-07 10:57 PST by
Modified: 2012-11-30 11:45 PST (History)


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 PST, Vlad Grecescu
webkit.review.bot: commit‑queue-
Review Patch | Details | Formatted Diff | Diff
Archive of layout-test-results from ec2-cr-linux-01 (9.82 MB, application/zip)
2012-03-24 09:27 PST, WebKit Review Bot
no flags Details
work-around for border-radius background clipping (16.55 KB, patch)
2012-03-24 18:18 PST, Vlad Grecescu
webkit.review.bot: commit‑queue-
Review Patch | Details | Formatted Diff | Diff
Archive of layout-test-results from ec2-cr-linux-02 (9.70 MB, application/zip)
2012-03-25 00:27 PST, 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 PST, Vlad Grecescu
no flags Review Patch | 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 PST, Vlad Grecescu
no flags Review Patch | 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 PST, Vlad Grecescu
webkit.review.bot: commit‑queue-
Review Patch | Details | Formatted Diff | Diff
Archive of layout-test-results from ec2-cr-linux-04 (10.46 MB, application/zip)
2012-03-27 17:25 PST, 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 PST, Vlad Grecescu
no flags Review Patch | 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 PST, Vlad Grecescu
no flags Review Patch | 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 PST, Vlad Grecescu
simon.fraser: review+
webkit.review.bot: commit‑queue-
Review Patch | Details | Formatted Diff | Diff
Archive of layout-test-results from ec2-cr-linux-02 (6.27 MB, application/zip)
2012-04-06 20:31 PST, 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 PST, Vlad Grecescu
webkit.review.bot: commit‑queue-
Review Patch | 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 PST, Vlad Grecescu
no flags Review Patch | Details | Formatted Diff | Diff
Patch (148.42 KB, patch)
2012-10-10 19:04 PST, dstockwell@chromium.org
no flags Review Patch | Details | Formatted Diff | Diff
Patch (148.50 KB, patch)
2012-10-10 21:23 PST, dstockwell@chromium.org
no flags Review Patch | Details | Formatted Diff | Diff
Patch for landing (149.66 KB, patch)
2012-10-15 17:25 PST, dstockwell@chromium.org
no flags Review Patch | Details | Formatted Diff | Diff


Note

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


Description From 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 From 2009-01-07 10:59:04 PST -------
Created an attachment (id=26495) [details]
gloss.png that is in the example css
------- Comment #2 From 2009-01-08 12:27:56 PST -------
Created an attachment (id=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 From 2009-01-08 13:07:48 PST -------
Can I see a Web page with this on a site or something?
------- Comment #4 From 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 From 2009-01-08 14:30:22 PST -------
Created an attachment (id=26535) [details]
Testcase
------- Comment #6 From 2009-03-25 08:53:26 PST -------
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 From 2009-03-25 08:55:40 PST -------
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 From 2009-03-25 08:56:28 PST -------
Changing the title of the bug to reflect what's really going on.
------- Comment #9 From 2009-03-25 15:26:11 PST -------
(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 From 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 From 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 From 2011-03-17 01:34:40 PST -------
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 From 2011-03-17 10:29:18 PST -------
*** Bug 47579 has been marked as a duplicate of this bug. ***
------- Comment #14 From 2011-03-17 14:19:34 PST -------
Also, Firefox 4 and IE9 get this right. 
Opera also has the same bug.
------- Comment #15 From 2011-10-07 00:40:34 PST -------
<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 From 2011-10-12 06:09:31 PST -------
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 From 2012-03-24 08:27:27 PST -------
Created an attachment (id=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 From 2012-03-24 09:27:14 PST -------
(From update of attachment 133634 [details])
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 From 2012-03-24 09:27:22 PST -------
Created an attachment (id=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 From 2012-03-24 18:18:19 PST -------
Created an attachment (id=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 From 2012-03-25 00:26:55 PST -------
(From update of attachment 133666 [details])
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 From 2012-03-25 00:27:03 PST -------
Created an attachment (id=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 From 2012-03-25 13:45:35 PST -------
Created an attachment (id=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 From 2012-03-25 13:50:43 PST -------
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 From 2012-03-26 01:23:38 PST -------
Created an attachment (id=133746) [details]
proposed fix for border-radius background clipping even with non-renderable radii

fixing style from previous patch
------- Comment #26 From 2012-03-26 10:48:56 PST -------
(From update of attachment 133746 [details])
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 From 2012-03-27 15:43:04 PST -------
(From update of attachment 133746 [details])
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 From 2012-03-27 15:59:30 PST -------
Created an attachment (id=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 From 2012-03-27 16:06:45 PST -------
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 From 2012-03-27 17:25:17 PST -------
(From update of attachment 134157 [details])
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 From 2012-03-27 17:25:33 PST -------
Created an attachment (id=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 From 2012-03-28 00:23:03 PST -------
Created an attachment (id=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 From 2012-03-28 00:30:33 PST -------
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 From 2012-03-28 08:57:27 PST -------
(From update of attachment 134227 [details])
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 From 2012-03-28 10:32:46 PST -------
Created an attachment (id=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 From 2012-03-28 10:44:57 PST -------
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 From 2012-04-06 16:14:26 PST -------
Created an attachment (id=136089) [details]
fix for border-radius background clipping even with non-renderable radii - updated to match trunk

Made it work against trunk
------- Comment #38 From 2012-04-06 20:31:48 PST -------
(From update of attachment 136089 [details])
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 From 2012-04-06 20:31:55 PST -------
Created an attachment (id=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 From 2012-04-19 16:55:39 PST -------
(From update of attachment 133746 [details])
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 From 2012-04-19 16:55:44 PST -------
(From update of attachment 134227 [details])
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 From 2012-07-20 01:15:53 PST -------
Vlad, Any reason this got stalled?
------- Comment #43 From 2012-07-20 08:25:31 PST -------
(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 From 2012-09-24 07:11:33 PST -------
Created an attachment (id=165374) [details]
fix for border-radius background clipping even with non-renderable radii - updated again to match trunk
------- Comment #45 From 2012-09-24 09:10:52 PST -------
(From update of attachment 165374 [details])
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 From 2012-09-24 10:02:10 PST -------
(From update of attachment 165374 [details])
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 From 2012-09-24 15:49:31 PST -------
Created an attachment (id=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 From 2012-09-24 17:48:41 PST -------
(From update of attachment 165458 [details])
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 From 2012-09-25 04:29:12 PST -------
(From update of attachment 165458 [details])
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 From 2012-10-10 19:04:43 PST -------
Created an attachment (id=168123) [details]
Patch
------- Comment #51 From 2012-10-10 21:23:42 PST -------
Created an attachment (id=168139) [details]
Patch
------- Comment #52 From 2012-10-10 23:08:50 PST -------
(From update of attachment 168139 [details])
Only minor changes to the code (to pass lint) from Vlad's last patch.
------- Comment #53 From 2012-10-14 20:49:25 PST -------
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 From 2012-10-15 17:25:47 PST -------
Created an attachment (id=168814) [details]
Patch for landing
------- Comment #55 From 2012-10-15 17:28:50 PST -------
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 From 2012-10-15 20:03:30 PST -------
(From update of attachment 168814 [details])
cq+ based on smfr's r+
------- Comment #57 From 2012-10-15 20:26:55 PST -------
(From update of attachment 168814 [details])
Clearing flags on attachment: 168814

Committed r131402: <http://trac.webkit.org/changeset/131402>
------- Comment #58 From 2012-10-15 20:27:05 PST -------
All reviewed patches have been landed.  Closing bug.
------- Comment #59 From 2012-11-30 11:45:33 PST -------
*** Bug 103730 has been marked as a duplicate of this bug. ***