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.

[wpt-interop]

Thank you for proposing abs() sign() for inclusion in Interop 2025.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

On behalf of the entire Interop team, thank you for submitting this proposal for consideration. We got many more proposals than we could include in this year's project, necessitating some difficult choices. Please note this should not be taken as a comment on the technology as a whole, or our willingness to consider it for Interop in the future. We appreciate the work you put into your proposal, and would welcome your participation in future rounds of Interop.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2025.

Posted on behalf of the Interop team.

[foolip]

https://crbug.com/40253181 has been fixed now, and abs() and sign() ought to ship in Chrome 135.