Bug 122061 - Gap rendered between nested elements
Summary: Gap rendered between nested elements
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Deepak Mittal
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2013-09-28 06:23 PDT by Mafoo
Modified: 2024-08-16 10:56 PDT (History)
11 users (show)

See Also:


Attachments
html file demonstrating nested element render bug (528 bytes, text/html)
2013-09-28 06:23 PDT, Mafoo
no flags Details
Patch (4.84 KB, patch)
2014-02-14 02:16 PST, Deepak Mittal
no flags Details | Formatted Diff | Diff
Archive of layout-test-results from webkit-ews-04 for mac-mountainlion (1.38 MB, application/zip)
2014-02-14 03:17 PST, Build Bot
no flags Details
Archive of layout-test-results from webkit-ews-13 for mac-mountainlion-wk2 (1.13 MB, application/zip)
2014-02-14 04:04 PST, Build Bot
no flags Details
Patch (1.63 KB, patch)
2014-02-17 01:57 PST, Deepak Mittal
no flags Details | Formatted Diff | Diff
Patch (4.45 KB, patch)
2014-02-17 02:19 PST, Deepak Mittal
no flags Details | Formatted Diff | Diff
Archive of layout-test-results from webkit-ews-15 for mac-mountainlion-wk2 (543.81 KB, application/zip)
2014-02-17 03:15 PST, Build Bot
no flags Details
Archive of layout-test-results from webkit-ews-05 for mac-mountainlion (582.80 KB, application/zip)
2014-02-17 03:37 PST, Build Bot
no flags Details
Archive of layout-test-results from webkit-ews-02 for mac-mountainlion (635.07 KB, application/zip)
2014-02-17 03:50 PST, Build Bot
no flags Details
Patch (7.47 KB, patch)
2014-02-19 21:03 PST, Deepak Mittal
no flags Details | Formatted Diff | Diff
Archive of layout-test-results from webkit-ews-13 for mac-mountainlion-wk2 (461.10 KB, application/zip)
2014-02-19 21:59 PST, Build Bot
no flags Details
Archive of layout-test-results from webkit-ews-03 for mac-mountainlion (496.30 KB, application/zip)
2014-02-19 22:29 PST, Build Bot
no flags Details
Archive of layout-test-results from webkit-ews-08 for mac-mountainlion (492.88 KB, application/zip)
2014-02-19 23:24 PST, Build Bot
no flags Details
Patch (7.90 KB, patch)
2014-02-23 23:31 PST, Deepak Mittal
simon.fraser: review-
Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Mafoo 2013-09-28 06:23:55 PDT
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.
Comment 1 Deepak Mittal 2014-02-11 02:04:03 PST
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..
Comment 2 Deepak Mittal 2014-02-11 02:04:33 PST
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.
Comment 3 Deepak Mittal 2014-02-12 06:44:41 PST
I am working on this issue..
I found the cause of this issue..if possible pleased assigned it to me..
Comment 4 Deepak Mittal 2014-02-14 02:16:37 PST
Created attachment 224183 [details]
Patch
Comment 5 Build Bot 2014-02-14 03:17:30 PST
Comment on attachment 224183 [details]
Patch

Attachment 224183 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.appspot.com/results/5302609371987968

New failing tests:
fast/media/viewport-media-query.html
css3/masking/clip-path-polygon-percentage.html
fast/regions/list-item-as-region.html
fast/shapes/shape-inside/shape-inside-empty.html
fast/shapes/shape-inside/shape-inside-overflow-fixed-dimensions-block-content.html
fast/regions/content-flowed-into-regions-dynamically-added.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002.html
fast/regions/content-flowed-into-regions.html
css2.1/20110323/margin-collapse-012.htm
fast/css/margin-collapse-abspos-negmargin.htm
fast/css/table-border-radius-with-box-shadow.html
css3/flexbox/cross-axis-scrollbar.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001.html
fast/gradients/css3-color-stop-invalid.html
fast/regions/overflow-moving-below-floats-in-variable-width-regions.html
css3/calc/border-radius.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003.html
fast/css/object-fit/object-fit-video-poster.html
fast/regions/content-flowed-into-regions-dynamically-inserted.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html
fast/multicol/rule-thicker-than-gap.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001.html
fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html
fast/css/margin-collapse-top-margin-clearance-with-sibling.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-000.html
fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html
fast/multicol/cell-shrinkback.html
fast/regions/content-flowed-into-pseudo-regions.html
Comment 6 Build Bot 2014-02-14 03:17:32 PST
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
Comment 7 Build Bot 2014-02-14 04:04:45 PST
Comment on attachment 224183 [details]
Patch

Attachment 224183 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.appspot.com/results/6105253799788544

New failing tests:
fast/media/viewport-media-query.html
css3/masking/clip-path-polygon-percentage.html
fast/regions/list-item-as-region.html
fast/shapes/shape-inside/shape-inside-empty.html
fast/shapes/shape-inside/shape-inside-overflow-fixed-dimensions-block-content.html
fast/regions/content-flowed-into-regions-dynamically-added.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-002.html
fast/regions/content-flowed-into-regions.html
css2.1/20110323/margin-collapse-012.htm
fast/css/margin-collapse-abspos-negmargin.htm
fast/css/table-border-radius-with-box-shadow.html
css3/flexbox/cross-axis-scrollbar.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-inset-rectangle-001.html
fast/gradients/css3-color-stop-invalid.html
fast/regions/overflow-moving-below-floats-in-variable-width-regions.html
css3/calc/border-radius.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-003.html
fast/css/object-fit/object-fit-video-poster.html
fast/regions/content-flowed-into-regions-dynamically-inserted.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-ellipse-000.html
fast/multicol/rule-thicker-than-gap.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-rounded-rectangle-001.html
fast/shapes/shape-outside-floats/shape-outside-floats-ellipse-000.html
fast/css/margin-collapse-top-margin-clearance-with-sibling.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-006.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-clipped-003.html
csswg/contributors/adobe/submitted/shapes/shape-outside/shape-outside-floats-circle-000.html
fast/shapes/shape-outside-floats/shape-outside-floats-circle-000.html
fast/multicol/cell-shrinkback.html
fast/regions/content-flowed-into-pseudo-regions.html
Comment 8 Build Bot 2014-02-14 04:04:49 PST
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
Comment 9 Deepak Mittal 2014-02-17 01:57:40 PST
Created attachment 224342 [details]
Patch
Comment 10 WebKit Commit Bot 2014-02-17 01:59:34 PST
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.
Comment 11 Deepak Mittal 2014-02-17 02:19:27 PST
Created attachment 224347 [details]
Patch
Comment 12 Build Bot 2014-02-17 03:15:07 PST
Comment on attachment 224347 [details]
Patch

Attachment 224347 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.appspot.com/results/5451981489438720

New failing tests:
fast/css/table-border-radius-with-box-shadow.html
css3/calc/border-radius.html
Comment 13 Build Bot 2014-02-17 03:15:09 PST
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
Comment 14 Build Bot 2014-02-17 03:37:45 PST
Comment on attachment 224347 [details]
Patch

Attachment 224347 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.appspot.com/results/5949304342577152

New failing tests:
fast/css/table-border-radius-with-box-shadow.html
css3/calc/border-radius.html
Comment 15 Build Bot 2014-02-17 03:37:47 PST
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
Comment 16 Build Bot 2014-02-17 03:50:10 PST
Comment on attachment 224347 [details]
Patch

Attachment 224347 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.appspot.com/results/5586606568243200

New failing tests:
fast/css/table-border-radius-with-box-shadow.html
css3/calc/border-radius.html
Comment 17 Build Bot 2014-02-17 03:50:12 PST
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
Comment 18 Deepak Mittal 2014-02-17 06:37:00 PST
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 ..
Comment 19 Deepak Mittal 2014-02-17 06:50:00 PST
Mafoo , can you please check the 2 test cases that it is showing error..and my observation..
Comment 20 Deepak Mittal 2014-02-19 21:03:04 PST
Created attachment 224703 [details]
Patch
Comment 21 Build Bot 2014-02-19 21:59:53 PST
Comment on attachment 224703 [details]
Patch

Attachment 224703 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.appspot.com/results/6383319377772544

New failing tests:
fast/css/table-border-radius-with-box-shadow.html
Comment 22 Build Bot 2014-02-19 21:59:55 PST
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
Comment 23 Build Bot 2014-02-19 22:29:24 PST
Comment on attachment 224703 [details]
Patch

Attachment 224703 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.appspot.com/results/5895483033649152

New failing tests:
fast/css/table-border-radius-with-box-shadow.html
Comment 24 Build Bot 2014-02-19 22:29:27 PST
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
Comment 25 Build Bot 2014-02-19 23:24:54 PST
Comment on attachment 224703 [details]
Patch

Attachment 224703 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.appspot.com/results/5431848024932352

New failing tests:
fast/css/table-border-radius-with-box-shadow.html
Comment 26 Build Bot 2014-02-19 23:24:57 PST
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 27 Deepak Mittal 2014-02-23 23:31:40 PST
Created attachment 225029 [details]
Patch
Comment 28 Deepak Mittal 2014-02-24 04:31:36 PST
Can someone review this patch please..And let me know if any query..
Comment 29 zalan 2014-03-02 12:38:17 PST
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 30 Simon Fraser (smfr) 2014-03-04 13:56:57 PST
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.
Comment 31 Deepak Mittal 2014-03-13 03:52:54 PDT
(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..
Comment 32 Radar WebKit Bug Importer 2024-08-16 10:56:27 PDT
<rdar://problem/134068501>