Justify-content CSS bug, absolutely-positioned :before and :after elements act as children in justify flow

VERIFIED DUPLICATE of bug 874718

Status

()

Core
Layout
VERIFIED DUPLICATE of bug 874718
3 years ago
2 years ago

People

(Reporter: nikkwong, Unassigned)

Tracking

44 Branch
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

3 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36

Steps to reproduce:

<div id="parent">
 <div class="child">
 <div class="child">
</div>
<style>
#parent {
display:flex;
justify-content: space-between;
align-items:center;
}
#parent:before {
position:absolute;
content: "";
}

// compiled

<div id="parent">
 :before
 <div class="child">
 <div class="child">
</div>


Actual results:

Mozilla incorrectly will believe that there are 3 children and justify-align a grid as if there are 3 children instead of two.


Expected results:

A grid should be made of two children.
The sample HTML you included in comment 0 doesn't seem to be valid HTML - can you attach a working test case as an attachment to this bug? Thanks!
Component: Untriaged → Layout
Product: Firefox → Core
Created attachment 8678261 [details]
Presumed testcase

Daniel, can you take a look?
Flags: needinfo?(dholbert)
Yeah, this is just bug 874718.

(In reply to nikkwong from comment #0)
> Actual results:
> 
> Mozilla incorrectly will believe that there are 3 children and justify-align
> a grid as if there are 3 children instead of two.

We do indeed, because that's what the spec used to require. The abspos :before element drops a placeholder, and the spec used to require that this placeholder get wrapped in an anonymous flex item.

We shouldn't anymore, though, and I'm planning on fixing that before the end of the year (in bug 874718).
Status: UNCONFIRMED → RESOLVED
Last Resolved: 3 years ago
Flags: needinfo?(dholbert)
Resolution: --- → DUPLICATE
Duplicate of bug: 874718
Summary: Justify-content CSS bug, :before and :after elements act as children in justify flow → Justify-content CSS bug, absolutely-positioned :before and :after elements act as children in justify flow
Verified locally that this was broken in Nightly 2016-10-31 & working in Nightly 2016-11-01, which means this is VERIFIED dupe of bug 865920.

(The functionality associated with bug 874718 first shipped in the 2016-11-01 nightly.)
Status: RESOLVED → VERIFIED
(Sorry, bug-number-typo -- I meant to say "VERIFIED dupe of bug 874718")
You need to log in before you can comment on or make changes to this bug.