649701 - Absolute positioned elements in a relative positioned "-moz-box" flexbox fail to display properly

Status: RESOLVED WORKSFORME

(Core :: Layout, defect)

Description

[Matt Cooper]

User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.2a1pre) Gecko/20110411 Firefox/4.2a1pre
Build Identifier: 4.2a1pre (2011-04-11)

If you have a CSS3 Flexbox, layout the boxes display as expected (or at least mostly as expected).  However, if a box has an element inside of it that uses absolute-positioning so that its boundaries are dependent on the relative box boundaries, the absolute-positioned child element fails to display properly; its bottom edge style is ignored.

Reproducible: Always

Steps to Reproduce:
1.) Either:

a.) Open the use-cases.html file (see the URL) to see if the yellow "test" absolute-positioned DIV shows up with a 20px offset from the edges of the green flexbox.

or

b.) Create a CSS3 Flexbox layout where one of the boxes uses background-color:green;position:relative and then insert a DIV inside of that box and have it use a background-color:yellow style (so you can see it) and position:absolute;top:20px;right:20px;left:20px;bottom:20px.

2.) Verify that the yellow DIV is inset by 20 pixels from the top, the left, the right, and the bottom of the green DIV.
Actual Results:  
Firefox does inset the yellow DIV by 20 pixels on the top, the left, and the right but fails to inset the bottom by 20 pixels.

Expected Results:  
The yellow DIV should be inset by 20 pixels from every edge of the green box (compare with Internet Explorer 10 for a visual comparison).

The use-cases.html file has many other use case scenarios you can test but all use cases fail in Firefox to handle absolute-positioned children properly.

The issue reproduces in all versions of Firefox, this is not a new failure.

Comment 1

[Matt Cooper]

Attachment: Test case for absolute-positioned element inside of a flexbox

Comment 2

[Boris Zbarsky [:bzbarsky]]

-moz-box is not a CSS3 Flexbox....  It has quite different behavior.

Comment 3

[Matt Cooper]

This does not sound like a duplicate (or at least not an exact duplicate) of bug 640443:

Bug 649701 pertains to a structure like this:

div display:-moz-box
  div -moz-box-flex: 1.0;position:relative
    div position:absolute;top:20px;left:20px;right:20px;bottom:20px

and complains about the bottom style being ignored completely.

vs. bug 640443 pertains to a structure like this:

div with display:-moz-box;position:relative
  div with position:absolute;top:25px;left:25px;width:200px;height:100px

and complains about the child element being positioned relative to the body root (or more likely, the
next closest positioned parent).

Comment 4

[Boris Zbarsky [:bzbarsky]]

Oh, I see.  Thanks for pointing this out.  You're right that this is different from bug 640443.

This is still duplicate (the box resizes its child block without actually letting anything know about that, and we have an existing bug on that), but I don't have the bug number for the original offhand....

Comment 5

[Merih Akar]

I think this is not an issue anymore?

Comment 6

[Daniel Holbert [:dholbert]]

Yeah -- I see these EXPECTED RESULTS from comment #0 now, in current nightly:
> Expected Results:  
> The yellow DIV should be inset by 20 pixels from every edge of the green box

From opening a few old nightlies that I have lying around, it looks like this was fixed sometime between the 2011-01-09 nightly build and the 2012-06-25 Nightly build.  (In my 2011-01-09 build, the yellow div doesn't extend anywhere near the bottom of the green box; in my 2012-06-25 build, it's inset ~20px on every side including the bottom.)