Bug 70793 - Need to handle absolutely positioned elements inside flexboxes
: Need to handle absolutely positioned elements inside flexboxes
Status: RESOLVED FIXED
: WebKit
Layout and Rendering
: 528+ (Nightly build)
: Unspecified Unspecified
: P2 Normal
Assigned To:
:
:
:
: 62048 70792
  Show dependency treegraph
 
Reported: 2011-10-24 19:23 PST by
Modified: 2012-01-10 15:53 PST (History)


Attachments
Patch (22.90 KB, patch)
2011-12-29 12:10 PST, Tony Chang
no flags Review Patch | Details | Formatted Diff | Diff
Patch (22.97 KB, patch)
2011-12-29 15:07 PST, Tony Chang
no flags Review Patch | Details | Formatted Diff | Diff
Patch (28.82 KB, patch)
2012-01-09 16:15 PST, Tony Chang
no flags Review Patch | Details | Formatted Diff | Diff


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2011-10-24 19:23:35 PST
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.
------- Comment #1 From 2011-12-29 12:10:47 PST -------
Created an attachment (id=120763) [details]
Patch
------- Comment #2 From 2011-12-29 12:50:35 PST -------
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).
------- Comment #3 From 2011-12-29 13:28:26 PST -------
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.
------- Comment #4 From 2011-12-29 15:07:22 PST -------
Created an attachment (id=120769) [details]
Patch
------- Comment #5 From 2011-12-29 15:56:02 PST -------
(From update of attachment 120769 [details])
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
------- Comment #6 From 2012-01-05 16:04:00 PST -------
(From update of attachment 120769 [details])
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.
------- Comment #7 From 2012-01-06 08:36:03 PST -------
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.
------- Comment #8 From 2012-01-06 11:36:22 PST -------
(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).
------- Comment #9 From 2012-01-06 13:35:44 PST -------
(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.
------- Comment #10 From 2012-01-07 12:59:17 PST -------
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."
------- Comment #11 From 2012-01-07 13:48:44 PST -------
(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.
------- Comment #12 From 2012-01-09 16:15:35 PST -------
Created an attachment (id=121750) [details]
Patch
------- Comment #13 From 2012-01-10 13:28:15 PST -------
(From update of attachment 121750 [details])
r=me
------- Comment #14 From 2012-01-10 15:53:13 PST -------
(From update of attachment 121750 [details])
Clearing flags on attachment: 121750

Committed r104645: <http://trac.webkit.org/changeset/104645>
------- Comment #15 From 2012-01-10 15:53:19 PST -------
All reviewed patches have been landed.  Closing bug.