635692 - Style "display: -moz-box;" seems to ignore padding values for inner boxes

Status: NEW

(Core :: Layout, defect)

Description

[Simon]

User-Agent:       Mozilla/5.0 (Windows NT 5.1; rv:2.0b11) Gecko/20100101 Firefox/4.0b11
Build Identifier: Mozilla/5.0 (Windows NT 5.1; rv:2.0b11) Gecko/20100101 Firefox/4.0b11

When using a <div>-element with "display: -moz-box;" the padding value of 10px for the inner box seems to be ignored. Once I remove the "display: -moz-box;" setting the box is rendered correctly. The behavior does not occure in Google Chrome. Please also see the attached screenshots and test cases.

Reproducible: Always

Steps to Reproduce:
1. View the test files in Firefox
2. The width of the blue boxes should be the same in both files
Actual Results:  
As soon as "display: -moz-box;" is assigned to the outer <div>-element, the padding value is ignored and the blue box is 20px smaller.

Expected Results:  
Width of the blue box should be the same in all cases.

Setting any valid value for "-moz-box-sizing" does not seem to change anyting.

Comment 1

[Simon]

Attachment: Demonstration screenshot of the issue

Comment 2

[Simon]

Attachment: Test case that shows the bug

Comment 3

[Simon]

Attachment: Test case that shows how it is expected to work

Comment 4

[Simon]

Attachment: Another test case using "display: -moz-box;" and "float: right;"

It turns out that there seem to be some more bugs related to the flex-box-model and float-boxes. Please see the new test case "float.html" which also shows an odd behavior.

Comment 5

[Simon]

Attachment: Screenshot showing the results of the second textcase

Comment 6

[Alex Lakatos[:AlexLakatos]]

Ok. I think this is a Layout problem, but I'm not sure, so if you think otherwise please change the Component.

Comment 7

[Simon]

This bug has been around for some time now. Since the flexible box model is already supported by webkit and will come to the next iteration of the internet explorer it would be nice if this bug gets fixed soon so we can conveniently use this new layout feature across all these browsers.

Comment 8

[Simon]

A new Firefox version comes out every 6 weeks and this is still not fixed!?!

Comment 9

[Mats Palmgren (inactive)]

Firefox 20 (expected release 2013-04-01) will have CSS3 flex box support by default.
http://www.mozilla.org/en-US/firefox/beta/
https://developer.mozilla.org/en-US/docs/Firefox_20_for_developers
http://www.w3.org/TR/css3-flexbox/

Making improvements and fixing bugs in "display:-moz-box" layout is low priority
and it will likely be deprecated some time in the future.