[css-align] Add percentage values for alignment

[fantasai]

As @annevk and I were looking into styling of switch and range controls, it became obvious that it would be useful to be able to position things partway between start and end. So opening this issue to add <percentage> values to align-self and justify-self (and maybe also align-content and justify-content, although I'm less convinced that's necessary). These would interpolate between 0% = start and 100% = end, just like for background-position.

Open questions:

• Do we want to allow keywords to combine with percentages, to allow interpolation along the various directional axes besides start/end?
• Do we want to allow values outside of the 0-100% range (which has pretty weird results in some cases, but might be useful) or clamp to that range?

(This has been on my "potential extensions to alignment" list for awhile, but now there's an obvious use case, so filing it for consideration...)

[SebastianZ]

• Do we want to allow keywords to combine with percentages, to allow interpolation along the various directional axes besides start/end?

Clear yes from my side.

• Do we want to allow values outside of the 0-100% range (which has pretty weird results in some cases, but might be useful) or clamp to that range?

I can imagine cases in which the elements may want to overflow their container, for example for the mentioned switch and range controls. Though I don't have a strong opinion on that.

Sebastian

[tabatkins]

+1 on this in general. I similarly allow %s for anchor(), meaning the same thing (% between start and end).

Do we want to allow keywords to combine with percentages, to allow interpolation along the various directional axes besides start/end?

Yeah, since we have multiple possible alignment axises/directions (start/end vs sefl-start/self-end, at minimum), this makes sense. It should match the way background-position works, where start 10% and end 90% are the same thing (and both represent 10% off of start-aligned).

Do we want to allow values outside of the 0-100% range (which has pretty weird results in some cases, but might be useful) or clamp to that range?

Yeah, I don't see any reason not to. I dunno use-cases, but again, background-position allows it, and it's well-defined.

[Que-tin]

Will it then be possible to transition these values without view transitions?

[tabatkins]

Yes.