Bug 114940 – <button> ignores child element's margin-bottom

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[alan]

Created attachment 199004 [details]
test reduction

in the following code:
<style>
  div {
    width:100px;
    border: 1px solid;
    margin-top: 100px;
    margin-bottom: 100px;
  }
</style>

<button><div></div></button>

<div>'s margin-bottom is ignored and the button is rendered as if margin-bottom was 0px.

We create a very simple subtree for <button> as follows:

RenderButton 0x7fd81a033cb8  BUTTON
    RenderBlock (anonymous) 0x7fd81a051038 
        RenderBlock 0x7fd81a050e08	DIV


http://trac.webkit.org/changeset/143643 changed RenderButton's parent from RenderDeprecatedFlexibleBox to RenderFlexibleBox. Before r143643, both top and bottom margins were ignored. After r143643, now that RenderButton is a flexbox (isFlexibleBox()), the margin collapse code at RenderBlock::collapseMargins() prevents the <div>'s margin to be collapsed and it gets added to the height of the anonymous box.

Firefox, Opera and IE10 respect the div's margin-bottom.

[alan]

<rdar://problem/13704194>

[Dave Hyatt]

Created attachment 200140 [details]
Patch

[Dave Hyatt]

Created attachment 200145 [details]
Patch

[Dave Hyatt]

Created attachment 200146 [details]
Patch

[Dave Hyatt]

We start failing

fast/block/margin-collapse/block-inside-inline/025.html

with this change, so let me study it and see how to fix it.

[Dave Hyatt]

Created attachment 200149 [details]
Patch

[Dave Hyatt]

Fixed in r149407.