abs() sign()

[stubbornella]

Description

abs() and sign() would help developers create responsive animations and designs and add to the set of trigonometric, sign, and exponential functions we currently support.

Specification

https://drafts.csswg.org/css-values-4/#math

Tests

https://wpt.fyi/results/css/css-values?label=master&label=stable&product=chrome&product=firefox&product=safari&aligned&q=signs-abs

Additional Signals

Developers are asking that we fill out missing mathematical functions: https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/

[gsnedders]

Note we previously had these in the Interop 2023 CSS Math Functions focus area (proposal: #149), which we decided to not carry over into 2024 (#462).

However, the stable results for that focus area show that Chrome still hasn't shipped abs and sign, and is still at 95%.

[gsnedders]

https://issues.chromium.org/issues/40253181 covers the Chromium implementation; there's been nothing from anyone working on Chromium since the commit which moved the feature flag to "experimental" in 2023.

[danielsakhapov]

I'd like to notice that all browser engines have the problem with sign() function used in non-length (e.g. numbers, degrees, ...) accepting properties when it has some relative units inside - sign(1em - 1px). That was the main reason Chromium hadn't shipped sign() function.

I'd like to include the following tests that cover the sign(...em...) situations:
https://wpt.fyi/css/css-sizing/aspect-ratio/sign-function-aspect-ratio.html
https://wpt.fyi/css/css-fonts/font-style-sign-function.html
https://wpt.fyi/css/css-inline/initial-letter/initial-letter-sign-function.html
https://wpt.fyi/css/mediaqueries/mq-calc-sign-function-003.html
https://wpt.fyi/css/mediaqueries/mq-calc-sign-function-004.html
https://wpt.fyi/css/mediaqueries/mq-calc-sign-function-005.html
https://wpt.fyi/css/filter-effects/animation/filter-interpolation-sign-function.html
https://wpt.fyi/css/filter-effects/filter-sign-function.html
https://wpt.fyi/css/css-viewport/zoom/zoom-with-sign-function.html
https://wpt.fyi/css/css-fonts/palette-mix-computed.html
https://wpt.fyi/css/css-transforms/transform-with-sign-function.html
https://wpt.fyi/css/css-color/parsing/color-valid-color-mix-function.html
https://wpt.fyi/css/motion/animation/ray-angle-interpolation-math-functions.html

Also, note, that some cases were added directly to https://wpt.fyi/css/css-values/signs-abs-computed.html

We still have some places where it's not fixed for Chromium, e.g. easing functions can have sign(...em...) in declaration, but that's lacking test coverage, so more tests will be added, once any browser fix it first with tests.

[gsnedders]

https://wpt.fyi/css/css-inline/initial-letter/initial-letter-sign-function.html

This should probably be contingent on #830, as it wouldn't make sense for this to implicitly include features that don't otherwise have support everywhere. (i.e., you shouldn't have to implement initial-letter just to pass all the abs()/sign() tests!)

https://wpt.fyi/css/css-fonts/palette-mix-computed.html

This hasn't been proposed as a feature in its own right, and thus should likely the excluded, on the same basis.