622262 - Problems with block/inline layout when using old Flexbox (-moz-box)

Status: UNCONFIRMED

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

Description

[mail]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_8; en-us) AppleWebKit/533.19.4 (KHTML, like Gecko) Version/5.0.3 Safari/533.19.4
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-GB; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13

See example: http://jsfiddle.net/t5nXV/

If you resize the viewing area in Firefox the bottom three children will fall inline with the first three, whereas in Safari they stay below.

I don't know which behaviour is "correct", but the Webkit behaviour is what I expect.

Reproducible: Always

Steps to Reproduce:
1. Visit http://jsfiddle.net/t5nXV/
2. Resize the "Result" viewing area (and maybe the window) wide enough to hold all children
3. Compare with Webkit
Actual Results:  
The bottom three children fall inline with the first three.

Expected Results:  
The bottom three children should stay below.

Comment 1

[mail]

Another example: http://jsfiddle.net/Z9Dhj/

In Firefox the .item divs are displayed inline and the text inputs aren't sized to the specified width. In Safari the divs are displayed block and the text inputs are sized to the specified width.

Comment 2

[Boris Zbarsky [:bzbarsky]]

I'm not seeing the behavior you describe in either 3.6 or current trunk (both on Mac OS X 10.6) in a clean profile...

What's different between my setup and yours?

Comment 3

[mail]

I'm on Mac OS X 10.5.8, and I can reproduce the behaviour in a clean Firefox profile (FF 3.6).

Comment 4

[Daniel Holbert [:dholbert]]

I see the behavior described. This URL renders as "first linesecond line" in Firefox (all on one line), but on two separate lines in Chrome:
> data:text/html,<div style="display:-webkit-box;display:-moz-box">first line</div><div style="display:-webkit-box;display:-moz-box">second line</div>

So -moz-box appears to behave as an inline-level element.

Clarifying summary to indicate that this is for old-style flexbox, not the actual new CSS3 flexbox ("display: flex")

Comment 5

[Daniel Holbert [:dholbert]]

(workaround: just wrap each "-moz-box" element in a block)

Comment 6

[sjw]

Works fine with the new spec.
Wontfix?