1866236 - Support CSS math functions on flexible lengths

Status: UNCONFIRMED

(Core :: CSS Parsing and Computation, enhancement, P3)

Description

[Roman Komarov]

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.5666.197 Safari/537.36

Steps to reproduce:

Go to https://codepen.io/kizu/pen/RwvyyOg or try using calc(1fr) in grid-template-columns

Actual results:

The calc(1fr) is treated as invalid

Expected results:

The calc(1fr) should be valid, as per specs (see it for the <flex> type):

https://drafts.csswg.org/css-values-4/#calc-type-checking

and as clarified by the spec editors:

https://github.com/w3c/csswg-drafts/issues/6989

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.

Curiously, no other browser did fix this yet. Chromium has a bug open from 2019: https://bugs.chromium.org/p/chromium/issues/detail?id=993136&q=calc%20fr&can=2 and I did not find a bug for WebKit (would fill it after this one).

Comment 1

[Roman Komarov]

And cross-linking the WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=265276 just in case

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 3

[Roman Komarov]

I did open a PR adding WPT tests for this: https://github.com/web-platform-tests/wpt/pull/43322

Comment 4

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:emilio, could you have a look please?

For more information, please visit BugBot documentation.