[css-values] Consider requiring same relative <length> units in atan2()

[emilio]

Consider atan2(10em, 13vh). Should that work? Per spec, it should because the two units are <length>s, and the spec says:

The atan2(A, B) function contains two comma-separated calculations, A and B. A and B can resolve to any <number>, <dimension>, or <percentage>, but must have the same type, or else the function is invalid.

If we allow different units, we can't resolve atan() at parse-time (because it starts depending on resolving those <length>s to pixels). That introduces a new set of property dependencies which didn't exist before. For example, we'd need to define how ex/etc units resolve on font-weight, since font-weight can affect the primary font, and with this you could do font-weight: atan2(2ex, 10px).

My implementation in Firefox doesn't allow mixed relative units in atan2() (because I misread the spec). This is also problematic for Chromium implementation-wise (even without all these new dependency shenanigans).

Unless this is extremely useful, it might be worth restricting relative lengths to enforce same-unit-ness.

cc: @tabatkins @DevSDK @dbaron

[tabatkins]

Yeah, I think this is pretty important - for example, atan2(10vw, 10vh) makes complete sense to me.

But more importantly, this isn't an atan2()-specific issue; it applies to everything taking a calculation. font-weight: calc(2ex / 10px), for example, introduces the exact same problem. So I'm strongly against any atan2()-targeted change here; if we want to disallow this we need to instead apply some more powerful restriction to all calculations.

[Loirooriol]

Not sure if I follow, is the "primary font" the same as the "first available font"? Then, what about font-weight: 2ex without calculations, the 2ex resolves depending on the "first available font", which depends on font-weight?

[xiaochengh]

We can't plug relative length units into font-weight without calculations, because font-weight takes number values only.

I think we can just use the same idea how we resolve font-size: 1ex: when a font-relative length unit is used in a font-related property, it refers to the the parent element's font.

[Loirooriol]

Ah, sure, time to go to sleep I guess XD. But I think this would also need to address custom properties registered as <integer> or <number> (https://drafts.css-houdini.org/css-properties-values-api/#dependency-cycles):

--foo: calc(2ex / 10px);
font-weight: var(--foo);

[Loirooriol]

Also:

line-height: 1ex;
font-weight: calc(1lh / 1px);

So, generalizing #2115, I guess the idea would be:

1. Compute font-size, resolving unknown font units with the parent. This sets the em unit.
2. Compute font-weight, resolving unknown font units with the parent. This sets the ex, cap, ch and ic units.
3. Compute line-height, resolving unknown font units with the parent. This sets the lh unit.

Or:

1. Compute font-weight, resolving unknown font units with the parent.
2. Compute font-size, resolving unknown font units with the parent. This sets the em, ex, cap, ch and ic units.
3. Compute line-height, resolving unknown font units with the parent. This sets the lh unit.

[Loirooriol]

Retagging to values-4 since values-3 doesn't have atan2 nor unit algebra.

[emilio]

font-style needs to also be special cased along with font-weight at least, since you would be allowed to set a slant anglebased on any unit. Probably others as well.

[Loirooriol]

font-stretch too I guess. https://drafts.csswg.org/css-fonts-4/#font-prop-desc

[Loirooriol]

All of this seems problematic:

font-weight: calc(1ex / 1px);
font-style: calc(1ex / 1px * 1deg);
font-stretch: calc(1ex / 1px * 1%);
font-variation-settings: "wght" calc(1ex / 1px);
font-feature-settings: "subs" calc(1ex / 1px);
font-size-adjust: ex-height calc(1ex / 1px);

[yukulele]

Unless this is extremely useful, it might be worth restricting relative lengths to enforce same-unit-ness.

In this case the units would be useless because atan2(X, Y) = atan2(Xunit, Yunit):

rotate: atan2(12, 7)     /* = 1.04272rad */
rotate: atan2(12%, 7%)   /* = 1.04272rad */
rotate: atan2(12em, 7em) /* = 1.04272rad */
rotate: atan2(12vw, 7vw) /* = 1.04272rad */
rotate: atan2(12ms, 7ms) /* = 1.04272rad */
...