Created attachment 212898[details]
html file demonstrating nested element render bug
If you place one element inside another, even if the parent has 0px padding and the child has 0px margin, there will still be a very thin gap between the 2 elements.
This is most noticeable when you combine the 2 with a border radius.
It is especially noticeable when zoomed in.
This present in chrome and safari.
I am not able to reproduce this issue on the latest webkit build code.. I am able to see clearly the border of 1px between the box and box2. I have changed the border color to distinguish it.
The border of the box is visible that is of 1 px.
Please recheck this issue..and let me know your opinion..
I am using :
<style>
body{background:#F00;}
.box{ border-radius: 15px; border: 1px solid #0F0; margin:50px; overflow: hidden; padding: 0px;}
.box2{ background: #00F; padding: 100px; margin: 0px;}
.correctBox{border-radius: 15px; border: 1px solid #0F0; margin:50px; background: #ddd; padding: 100px;
}
</style>
<body>
<div class="box"><div class="box2">Nested Divs. This has a thin border where the background shows through, especially on the corners</div></div>
<div class="correctBox">Single Div. This is how it should look</div>
</body>
as the content.
Created attachment 224192[details]
Archive of layout-test-results from webkit-ews-04 for mac-mountainlion
The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: webkit-ews-04 Port: mac-mountainlion Platform: Mac OS X 10.8.5
Created attachment 224196[details]
Archive of layout-test-results from webkit-ews-13 for mac-mountainlion-wk2
The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: webkit-ews-13 Port: mac-mountainlion-wk2 Platform: Mac OS X 10.8.5
Attachment 224342[details] did not pass style-queue:
ERROR: Source/WebCore/ChangeLog:8: You should remove the 'No new tests' and either add and list tests, or explain why no new tests were possible. [changelog/nonewtests] [5]
Total errors found: 1 in 2 files
If any of these errors are false positives, please file a bug against check-webkit-style.
Created attachment 224349[details]
Archive of layout-test-results from webkit-ews-15 for mac-mountainlion-wk2
The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: webkit-ews-15 Port: mac-mountainlion-wk2 Platform: Mac OS X 10.8.5
Created attachment 224352[details]
Archive of layout-test-results from webkit-ews-05 for mac-mountainlion
The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: webkit-ews-05 Port: mac-mountainlion Platform: Mac OS X 10.8.5
Created attachment 224354[details]
Archive of layout-test-results from webkit-ews-02 for mac-mountainlion
The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: webkit-ews-02 Port: mac-mountainlion Platform: Mac OS X 10.8.5
I have run
1) fast/css/table-border-radius-with-box-shadow.html
without my patch, Still I am not able to get the expected result, so this test case failure is not due to my changes.
2) css3/calc/border-radius.html I am not able to get any difference with and without my patch..
Can some please confirm this ..
Created attachment 224710[details]
Archive of layout-test-results from webkit-ews-13 for mac-mountainlion-wk2
The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: webkit-ews-13 Port: mac-mountainlion-wk2 Platform: Mac OS X 10.8.5
Created attachment 224715[details]
Archive of layout-test-results from webkit-ews-03 for mac-mountainlion
The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: webkit-ews-03 Port: mac-mountainlion Platform: Mac OS X 10.8.5
Created attachment 224718[details]
Archive of layout-test-results from webkit-ews-08 for mac-mountainlion
The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: webkit-ews-08 Port: mac-mountainlion Platform: Mac OS X 10.8.5
Comment on attachment 225029[details]
Patch
View in context: https://bugs.webkit.org/attachment.cgi?id=225029&action=review> Source/WebCore/rendering/RenderBox.cpp:1157
> + return BackgroundBleedBackgroundOverBorder;
I am not sure if it's the right approach to fix background bleeding over nested items. Not only the return value is contradicting the condition (!hasBackground() -> BackgroundBleedBackgroundOverBorder), but I can make a small change to your test case and the bleeding comes back. -the small change is moving the background color from the body to the outer div box. Now that the background color is on the <div> as opposed to the <body>, this condition evaluates to false and the bleeding happens.
Comment on attachment 225029[details]
Patch
View in context: https://bugs.webkit.org/attachment.cgi?id=225029&action=review>> Source/WebCore/rendering/RenderBox.cpp:1157
>> + return BackgroundBleedBackgroundOverBorder;
>
> I am not sure if it's the right approach to fix background bleeding over nested items. Not only the return value is contradicting the condition (!hasBackground() -> BackgroundBleedBackgroundOverBorder), but I can make a small change to your test case and the bleeding comes back. -the small change is moving the background color from the body to the outer div box. Now that the background color is on the <div> as opposed to the <body>, this condition evaluates to false and the bleeding happens.
Zalan is right.
> LayoutTests/fast/dom/HTMLDivElement/div-border-radius-expected.html:8
> + body{background:#F00;}
> + .box{ background:#FFF; border-radius: 30px; border: 1px solid #FFF; margin:50px; overflow: hidden; padding: 0px;}
> + .box2{ background: #FFF; padding: 100px; margin: 0px;}
> + .correctBox{border-radius: 30px; border: 1px solid #FFF; margin:50px; background: #FFF; padding: 100px;}
Please format your CSS nicely.
(In reply to comment #29)
> (From update of attachment 225029[details])
> View in context: https://bugs.webkit.org/attachment.cgi?id=225029&action=review
>
> > Source/WebCore/rendering/RenderBox.cpp:1157
> > + return BackgroundBleedBackgroundOverBorder;
>
> I am not sure if it's the right approach to fix background bleeding over nested items. Not only the return value is contradicting the condition (!hasBackground() -> BackgroundBleedBackgroundOverBorder), but I can make a small change to your test case and the bleeding comes back. -the small change is moving the background color from the body to the outer div box. Now that the background color is on the <div> as opposed to the <body>, this condition evaluates to false and the bleeding happens.
when putting the background color from body to the outer div then irrespective of my changes,bleading happens, it is irrespective of bleading value. I have tried return
BackgroundBleedBackgroundOverBorder
BackgroundBleedNone
BackgroundBleedUseTransparencyLayer
But it still shows the red bleading at the corners, so this is not related to my changes.As with or without my changes it returns BackgroundBleedBackgroundOverBorder..
To avoid bleading in the modified test case BackgroundBleedShrinkBackground should get return from RenderBox::determineBackgroundBleedAvoidance().We can file separate issue for this..
Please let me know your opinion..
2013-09-28 06:23 PDT, Mafoo
2014-02-14 02:16 PST, Deepak Mittal
2014-02-14 03:17 PST, Build Bot
2014-02-14 04:04 PST, Build Bot
2014-02-17 01:57 PST, Deepak Mittal
2014-02-17 02:19 PST, Deepak Mittal
2014-02-17 03:15 PST, Build Bot
2014-02-17 03:37 PST, Build Bot
2014-02-17 03:50 PST, Build Bot
2014-02-19 21:03 PST, Deepak Mittal
2014-02-19 21:59 PST, Build Bot
2014-02-19 22:29 PST, Build Bot
2014-02-19 23:24 PST, Build Bot
2014-02-23 23:31 PST, Deepak Mittal