[css-align] Mixing baseline self-alignment with random content alignments

[tabatkins]

It doesn't seem to be clear what happens with, e.g., align-self: baseline; align-content: center;

[tabatkins]

Wait, hmm, you have to do layout of the element before you can self-align anyway, because you need a size. So I guess there's nothing wrong with content-alignment affecting where the baseline sits when self-aligning.

[css-meeting-bot]

The Working Group just discussed Mixing baseline self-alignment with random content alignments.

The full IRC log of that discussion

<dael> Topic: Mixing baseline self-alignment with random content alignments
<dael> github: https://github.com//issues/3006
<dael> TabAtkins: I just commented in issue. I thinkg maybe jsut consfused. How can y ou mix abseline self alignment with any other. Baseline cares about your height. Seems odd how it interacted. now that I thought about it you have to do layout before self align so it's not a problem to do content alignment first and if you do center baseline is in center of element.
<dael> TabAtkins: So I think this i s close invalid.
<dael> florian: Is there no risk o f a dependency betweeen sizing and placing things? When you align on baseline can that cause things to grow? Or does that problem not exist?
<dael> TabAtkins: Good question. I should consider that futher.
<dael> florian: If that's okay, we're okay. If not we have a problem
<dael> fantasai: What you say makes sense if item itself has a size. You can align and then baseline align. Trickier thing what if it's sized as auto and that auto size is not purely shrinkwrapping around content.
<dael> fantasai: Where that box is positioned can change size of alignment container and then change alignment of content.
<dael> TabAtkins: Can we table for a full example? Example in issue isn't complex enough to show problem.
<dael> astearns: Okay, we'll come back with a more complex example
<dael> fantasai: And anyone with examples, let us know.

[frivoal]

Is this the problem we're talking about:
https://software.hixie.ch/utilities/js/live-dom-viewer/?saved=6101

If align-self: baseline is supposed to align the baseline of the item with the first baseline of the grid, we'd have a problem, but I think it is supposed to align with the first baseline of the grid row, and that makes everything OK: first, layout the items, then baseline align them with each other, and figure out the height of the grid row from that, then now that you know its size, you can do align-content:center with no particular issue.

Or am I missing something?

[tabatkins]

Missing something - the issue is align-content and align-self on the same element, so you're self-aligning (moving yourself within your container) according to a baseline that is being positioned by content-alignment (moving your contents within yourself).

[frivoal]

aha! Makes more sense. So the issue would be this:

1. Place your content within yourself -> this affects your layout/size
2. Then, place yourself within your parent based on aligning baselines -> this affects your position, which may affect the layout/size of your parent in some cases.
3. If your size was set in a way that depends on the size of the parent, then you need to relayout yourself, and that would cause a loop.

However, it seems this can only happen if:

• the parent has a non definite size that is resolved based on layout of its content.
• the item is sized in a way that depends on the parent's size even if it is non definite.

I don't think this situation actually exists.

Or am I still missing something?

[tabatkins]

Right, I think you've got it now, and I also think this can't occur currently, but @fantasai was trying to explain a situation where this could occur on the call. I couldn't follow along her verbal explanation and asked for a written-out example here in this thread.

[tabatkins]

Closing, but flagging for a testcase to make sure this combo does indeed work as intended.