Bug 1682641 Comment 8 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

I need to spend some time paging in all the changes & spec text here, but my initial assumption was that it's confusing to have an abspos flex child with "align-self:center" inside of a flex container with "align-content: end" for example (or vice versa).  abspos elements are positioned independently of one another, so there's no great way for the "*-content" properties to apply usefully to them in a way that the "*-self" properties can't already handle.

(The *-content properties are about "how do you align this collection of things cooperatively in this space", whereas the "*-self" properties are about aligning an individual thing in some space.)

The behavior-difference that I'm focusing on here is the testcases in comment 0 (direct link to test: http://wpt.live/css/vendor-imports/mozilla/mozilla-central-reftests/align3/flex-abspos-staticpos-align-content-001.html )  Right now chrome positions all of the teal boxes the same, whereas Firefox does some bespoke alignment.  Firefox used to be correct on this, but I think the spec change means we're not.
I need to spend some time paging in all the changes & spec text here, but my initial assumption was that it's confusing to have an abspos flex child with "align-self:center" inside of a flex container with "align-content: end" for example (or vice versa).  abspos elements are positioned independently of one another, so there's no great way for the `*-content` properties to apply usefully to them in a way that the `*-self` properties can't already handle.

(The `*-content` properties are about "how do you align this collection of things cooperatively in this space", whereas the `*-self` properties are about aligning an individual thing in some space. Normal flex layout has both sorts of aligment in the cross axis simultaneously -- aligning lines and items-within-those-lines, which is why it has both `align-content` and `align-self` *both* operating in that axis. But for abspos flex children, there's only one thing being aligned at a time, within the flex container.)

The behavior-difference that I'm focusing on here is the testcases in comment 0 (direct link to test: http://wpt.live/css/vendor-imports/mozilla/mozilla-central-reftests/align3/flex-abspos-staticpos-align-content-001.html )  Right now chrome positions all of the teal boxes the same, whereas Firefox does some bespoke alignment.  Firefox used to be correct on this, but I think the spec change means we're not.
I need to spend some time paging in all the changes & spec text here, but my initial assumption was that it's confusing to have an abspos flex child with "align-self:center" inside of a flex container with "align-content: end" for example (or vice versa).  abspos elements are positioned independently of one another, so there's no great way for the `*-content` properties to apply usefully to them in a way that the `*-self` properties can't already handle.

(The `*-content` properties are about "how do you align this collection of things cooperatively in this space", whereas the `*-self` properties are about aligning an individual thing in some space. Normal flex layout has both sorts of aligment in the cross axis simultaneously -- aligning lines and items-within-those-lines, which is why it has both `align-content` and `align-self` *both* operating in that axis. But for abspos flex children, there's only one thing being aligned at a time, within the flex container.)

The behavior-difference that I'm focusing on here is the testcases in comment 0 (direct link to test: https://wpt.live/css/vendor-imports/mozilla/mozilla-central-reftests/align3/flex-abspos-staticpos-align-content-001.html )  Right now chrome positions all of the teal boxes the same, whereas Firefox does some bespoke alignment.  Firefox used to be correct on this, but I think the spec change means we're not.

Back to Bug 1682641 Comment 8