Bug 70793 – Need to handle absolutely positioned elements inside flexboxes

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Ojan Vafai]

We also need to review this part of the spec to make sure it makes sense: http://dev.w3.org/csswg/css3-flexbox/#abspos-flexbox-items.

[Tony Chang]

Created attachment 120763 [details]
Patch

[Tony Chang]

I didn't add test cases for row-reverse/column-reverse to this patch because I wasn't sure what it was supposed to do.  It'll still be out of flow, but it's not clear to me where they should be positioned.  For example:

<div style="display: -webkit-flexbox; -webkit-flex-flow: row-reverse; position: relative">
<div style="position: absolute;">absolute</div>
<div style="width: 1000px">main text</div>
</div>

+---------------------------------------+
|(1)main text                        (2)+(3)
+---------------------------------------+

It's not clear to me if absolute should be at 1, 2 (right aligned) or 3.  I guess (2) makes the most sense, but it will require some extra logic to handle properly (i.e., should be a separate patch).

[Tab Atkins]

The static position is the upper-right corner of the "main text" div (flush with the inner cross-start edge of the flexbox, and flush with the main-start edge of the following neighbor).  Abspos elements put their top-left corner at their static position, so (3) is correct.

[Tony Chang]

Created attachment 120769 [details]
Patch

[WebKit Review Bot]

Comment on attachment 120769 [details]
Patch

Attachment 120769 [details] did not pass chromium-ews (chromium-xvfb):
Output: http://queues.webkit.org/results/10924136

New failing tests:
http/tests/inspector/resource-tree/resource-tree-document-url.html

[Tony Chang]

Comment on attachment 120769 [details]
Patch

The spec page hasn't been updated to the consensus from TPAC.  The conclusion was to have position:absolute flex items insert a placeholder.  All this means is that for flex-pack: justify, the spacing is a bit weird.

I'll update the patch to do this instead.

[Tab Atkins]

I'm about to go look through the minutes, but I don't recall that actually being the decision.  You may want to hold off on making the change immediately while I verify.

[Ojan Vafai]

(In reply to comment #7)
> I'm about to go look through the minutes, but I don't recall that actually being the decision.  You may want to hold off on making the change immediately while I verify.

That definitely was the conclusion. I think it's silly though. dbaron argued that leaving behind a placeholder makes it consistent with absolute positioning in the rest of the platform (e.g. an absolutely positioned div inside an inline).

[Tab Atkins Jr.]

(In reply to comment #8)
> (In reply to comment #7)
> > I'm about to go look through the minutes, but I don't recall that actually being the decision.  You may want to hold off on making the change immediately while I verify.
> 
> That definitely was the conclusion. I think it's silly though. dbaron argued that leaving behind a placeholder makes it consistent with absolute positioning in the rest of the platform (e.g. an absolutely positioned div inside an inline).

Ah, indeed.  Looks like I remembered wrong.  Welp, time to go change the spec.

[Ojan Vafai]

The text has been updated http://dev.w3.org/csswg/css3-flexbox/#abspos-flexbox-items.

We should make sure to add a test for "they'll...join neighboring inline elements in their anonymous flexbox item wrapper boxes."

[Tab Atkins Jr.]

(In reply to comment #10)
> The text has been updated http://dev.w3.org/csswg/css3-flexbox/#abspos-flexbox-items.
> 
> We should make sure to add a test for "they'll...join neighboring inline elements in their anonymous flexbox item wrapper boxes."

You probably want three tests, for the following situations:

<flexbox>
  <div />
  <abspos />
  text
</flexbox>

<flexbox>
  text
  <abspos />
  <div />
</flexbox>

<flexbox>
  <div />
  text
  <abspos />
  text
  <div />
</flexbox>

Using 'flex-pack:justify' for all three of them to make it easier to tell what's happening.

[Tony Chang]

Created attachment 121750 [details]
Patch

[Dave Hyatt]

Comment on attachment 121750 [details]
Patch

r=me

[WebKit Review Bot]

Comment on attachment 121750 [details]
Patch

Clearing flags on attachment: 121750

Committed r104645: <http://trac.webkit.org/changeset/104645>

[WebKit Review Bot]

All reviewed patches have been landed.  Closing bug.