Description
Lea Verou
2009-01-07 10:57:56 PST
Created attachment 26495 [details]
gloss.png that is in the example css
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.
Can I see a Web page with this on a site or something? (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! Created attachment 26535 [details]
Testcase
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. 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. Changing the title of the bug to reflect what's really going on. (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. I have logged this in great detail on Chromium's bugtracker: http://code.google.com/p/chromium/issues/detail?id=72014 (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. 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 *** Bug 47579 has been marked as a duplicate of this bug. *** Also, Firefox 4 and IE9 get this right. Opera also has the same bug. <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. 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 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 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 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'.
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 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.
Created attachment 133746 [details]
proposed fix for border-radius background clipping even with non-renderable radii
fixing style from previous patch
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.
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 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.
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. 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
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 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 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 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. Vlad, Any reason this got stalled? (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). Created attachment 165374 [details]
fix for border-radius background clipping even with non-renderable radii - updated again to match trunk
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 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 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 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 Created attachment 168123 [details]
Patch
Created attachment 168139 [details]
Patch
Comment on attachment 168139 [details]
Patch
Only minor changes to the code (to pass lint) from Vlad's last patch.
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. Created attachment 168814 [details]
Patch for landing
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 on attachment 168814 [details]
Patch for landing
cq+ based on smfr's r+
Comment on attachment 168814 [details] Patch for landing Clearing flags on attachment: 168814 Committed r131402: <http://trac.webkit.org/changeset/131402> All reviewed patches have been landed. Closing bug. *** Bug 103730 has been marked as a duplicate of this bug. *** |