[css-grid] Should calc(1fr) be invalid?

[LeaVerou]

Testcase: https://codepen.io/leaverou/pen/dyZPoRz

Right now, all browsers seem to be treating any fr in calc() as invalid, even calc(1fr), which is unfortunate, since using calc() to calculate the ratio between grid columns is quite useful. E.g. my use case went something like:

grid-template-columns: calc(1fr * var(--divider-ratio, .5)) calc(1fr * (1 - var(--divider-ratio, .5)));

Is this per spec, or is it just a misunderstanding of this note by implementors?

[LeaVerou]

ping @fantasai

[tabatkins]

Definitely a bug; fr units should be math'able just fine. That note is, indeed, just observing that fr is not a <length> so calc(1px + 1fr) is invalid, but calc(1fr / 3) should be just fine.

[tabatkins]

(Closing because this has a straightforward answer; please file bugs!)

[Loirooriol]

https://drafts.csswg.org/css-values/#math covers <flex>.

[BTW, your test should use section ~ section since they are not adjacent. But yeah, seems unsupported]

[kizu]

Just in case, cross-linking browser bugs for this:

• https://bugs.chromium.org/p/chromium/issues/detail?id=993136&q=calc%20fr&can=2 — was open since 2019
• https://bugzilla.mozilla.org/show_bug.cgi?id=1866236 — I've opened it just now
• https://bugs.webkit.org/show_bug.cgi?id=265276 — I've opened it just now