Add CSS Values and Units Module Level 4 Mathematical Expressions

[Schweinepriester]

https://www.w3.org/TR/css-values-4/#math, specifically 10.3 up to including 10.7.

Stolen from https://bugs.chromium.org/p/chromium/issues/detail?id=1284199:

1. 10.3. Stepped Value Functions: round(), mod(), and rem() https://drafts.csswg.org/css-values/#round-func

2. 10.4. Trigonometric Functions: sin(), cos(), tan(), asin(), acos(), atan(), and atan2() https://drafts.csswg.org/css-values/#trig-funcs

3. 10.5. Exponential Functions: pow(), sqrt(), hypot(), log(), exp() https://drafts.csswg.org/css-values/#exponent-funcs

4. 10.6. Sign-Related Functions: abs(), sign() https://drafts.csswg.org/css-values/#sign-funcs

but also

10.7. Numeric Constants: e, pi 10.7.1. Degenerate Numeric Constants: infinity, -infinity, NaN

Safari 15.4 via https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/:

WebKit added support for calc() math functions including sin, cos, tan, e, pi, exp, log, atan, acos, asin, and atan2.

Chrome:

• https://bugs.chromium.org/p/chromium/issues/detail?id=1284199
• https://bugs.chromium.org/p/chromium/issues/detail?id=1190444

I think it's likely that they will come via MDN as some/most/all are mentioned on https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#math_functions, but currently there don't seem to be support tables yet.

[Schweinepriester]

• explainer: https://github.com/DevSDK/css-trigonometric-functions/blob/main/Explainer.md
• some tests: https://wpt.fyi/results/css/css-values?label=master&label=experimental&aligned&q=cos
• chrome intend to prototype:
  • https://twitter.com/intenttoship/status/1539285964350177281
  • https://groups.google.com/a/chromium.org/g/blink-dev/c/-c9p-Sq_gWg/m/C9eOR3oGAgAJ
• https://chromestatus.com/feature/5165381072191488

[Schweinepriester]

Oh wow, only now found #4809 - so technically this is a partial duplicate of that.

[ramiy]

Hi @Schweinepriester ,

I already started creating MDN content for all the CSS math and trig functions (not all my PRs are merged, yet). I also updated MDN browser compatibility data to all the trig functions, and I updated the official syntaxes for all the trig functions in MDN.

Soon enough, MDN will have all the information you need regarding trig and other math functions. Especially now that browsers started focusing on CSS functions.

Ping me if you would like to add this data to "Can I use", I will help.