Closed Bug 1081883 Opened 10 years ago Closed 10 years ago

box-sizing:border-box, padding and width:auto with a child image element - right hand padding it too big

Categories

(Core :: Layout, defect)

32 Branch
x86
macOS
defect
Not set
normal

Tracking

()

RESOLVED DUPLICATE of bug 930218

People

(Reporter: jonnyscholes, Unassigned)

Details

Attachments

(1 file)

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:32.0) Gecko/20100101 Firefox/32.0
Build ID: 20140923175406

Steps to reproduce:

HTML: Create a div with an image in it that has its width and height set correctly
CSS: Apply the following to the div:

div {
  padding: 10px;
  display: inline-block; 
  height: 100px;
  box-sizing: border-box;
}

and the following to the image:

img {
 height: 100%;
 width: auto;
}

I have put together a codepen here: http://codepen.io/jonnyscholes/pen/rKwEc

All 4 scenarios in the above example work in Chrome (38.0.2125.101) and Safari (7.0.5) on OSX 10.9.4. Scenario 4 is the one that is breaking for me in Firefox 32.0.3. Issue appears to also be present in FF nightly.


Actual results:

div is the width it would be if box-sizing were set to content-box. Which means the image has extra padding on the right.

Only happens with images as the child. Does not happen if you instead restrict the width and not the height.


Expected results:

div should be the same width as the image plus 20px (10px either side + scaled image width)
Component: Untriaged → Layout
Product: Firefox → Core
Regression range:
good=2014-01-25
bad=2014-01-26
http://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=9e06d42c2a6a&tochange=611698b4a246

I guess it's:
Ms2ger — Bug 243412. Enable unprefixed 'box-sizing'. r=dbaron
Interesting. I don't see a test that only applies a height to a box sized element (dug around in layout/reftests/w3c-css/submitted/ui3/). Would it be helpful if I were to create one based on the others?
This is basically the same testcase as in bug 930218, with <img> instead of <canvas>
Status: UNCONFIRMED → RESOLVED
Closed: 10 years ago
Resolution: --- → DUPLICATE
Ah thanks didnt see that one. I'll track the progress over there.
Resolution: DUPLICATE → INVALID
Resolution: INVALID → DUPLICATE
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: