1231059 - Incorrect handling of percentage vertical paddings in box-sizing code in intrinsic width computation

Status: NEW

(Core :: Layout: Block and Inline, defect)

Description

[Boris Zbarsky [:bzbarsky]]

There's code in GetBSizeTakenByBoxSizing (called from nsLayoutUtils::IntrinsicForAxis and GetPercentBSize) which tries to deal with the block-direction ("vertical") padding when it's specified as a percentage.  This code takes the percentage and multiplies it by the block-size ("height") of the containing block.  But the percentage is supposed to be of the inline-size ("width") of the containing block.

Simple testcase that shows a possible problem:

  <div style="box-sizing: border-box; height: 100px; display: inline-block;
              background: blue">
    <img
     src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="
     style="height: 100%; padding-top: 50%; box-sizing: border-box;">
  </div>

In this testcase, it's not quite clear what the actual height of the black box or width of the blue box should be.  It looks to me like we compute the padding-top to 50% * 100px = 50px, so the intrinsic width calculation computes the image height at 50px and hence width at 50px.  So the blue box ends up 50px wide.  The image then ends up with a 25px top padding and a 75px height.

Chrome, on the other hand, ends up with the outer box 100px wide, which makes the image have 50px top padding and a 50px width/height.

Another testcase, after the changes for bug 930218:

  <div style="height: 100px; width: 50px">
    <div style="box-sizing: border-box; height: 100%; padding-top: 50%;
                background: blue; display: inline-block">
    <img
     src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="
     style="height: 100%>
    </div>
  </div>

This one seems clear per spec.  The inner div should have a top padding of 25px and a content height of 75px.  The image should end up 75px by 75px and the inner div should be 75px wide.  What we do instead is we compute its intrinsic width at 50px and end up with a div 50px wide, with 25px of top padding and a 75px by 75px image.

Comment 1

[Bryan Willis]

Struggled with this issue a few months back. Here is a live demonstration with some different demos similar to the ones Boris added in his comment if any wants a clear picture of what' happening. 

http://codepen.io/bootstrapped/full/OMXQVo/

Comment 2

[Boris Zbarsky [:bzbarsky]]

Bryan, your page shows a different problem; you don't have any percentage vertical paddings in your page at all that I can see.

What your page is showing is bug 930218, which is fixed in Firefox 45.  You can try a current developer edition build from https://www.mozilla.org/en-US/firefox/developer/ to see the resulting behavior.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

Attachment: test-case from comment 0