bugzilla.mozilla.org has resumed normal operation. Attachments prior to 2014 will be unavailable for a few days. This is tracked in Bug 1475801.
Please report any other irregularities here.

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

RESOLVED DUPLICATE of bug 930218

Status

()

Core
Layout
RESOLVED DUPLICATE of bug 930218
4 years ago
4 years ago

People

(Reporter: Jonny Scholes, Unassigned)

Tracking

32 Branch
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

4 years ago
Created attachment 8504001 [details]
Screen Shot 2014-10-13 at 9.11.22 pm.png

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)
(Reporter)

Updated

4 years ago
Component: Untriaged → Layout
Product: Firefox → Core

Comment 1

4 years ago
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
(Reporter)

Comment 2

4 years ago
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
Last Resolved: 4 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 930218
(Reporter)

Comment 4

4 years ago
Ah thanks didnt see that one. I'll track the progress over there.
Resolution: DUPLICATE → INVALID

Updated

4 years ago
Resolution: INVALID → DUPLICATE
Duplicate of bug: 930218
You need to log in before you can comment on or make changes to this bug.