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.
I am working on this issue.. I found the cause of this issue..if possible pleased assigned it to me..
Created attachment 224183 [details] Patch
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
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 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
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
Created attachment 224342 [details] Patch
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 224347 [details] Patch
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
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 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
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 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
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 ..
Mafoo , can you please check the 2 test cases that it is showing error..and my observation..
Created attachment 224703 [details] Patch
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
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 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
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 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
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
Created attachment 225029 [details] Patch
Can someone review this patch please..And let me know if any query..
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..