Bug 265276 - Support CSS math functions on flexible lengths
Summary: Support CSS math functions on flexible lengths
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2023-11-23 02:17 PST by Roman Komarov
Modified: 2023-11-30 02:18 PST (History)
5 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Roman Komarov 2023-11-23 02:17:22 PST
To reproduce, go to https://codepen.io/kizu/pen/RwvyyOg or try using `calc(1fr)` in `grid-template-columns`.

The `calc(1fr)` is treated as invalid, but it 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 one for Firefox, so I did open it: https://bugzilla.mozilla.org/show_bug.cgi?id=1866236
Comment 1 Roman Komarov 2023-11-23 04:54:47 PST
I did open a PR adding WPT tests for this: https://github.com/web-platform-tests/wpt/pull/43322
Comment 2 Radar WebKit Bug Importer 2023-11-30 02:18:14 PST
<rdar://problem/118975697>