Intent to Prototype: CSS Typed Arithmetic

[Sajid Anwar]

Summary:
CSS Typed Arithmetic enhances the type checking capabilities of calc() and other math functions to enable advanced expressions that have complex unit combinations. For example, lengths can be divided to build unitless quantities and multiplied with other dimensions, as in the declaration "rotate: calc(100vw / 1px * 1deg)". Prior to typed arithmetic, expressions were limited: multiplication allowed at most one non-<number> value, and division only allowed <number> divisors.

We intend to develop support for typed arithmetic behind the layout.css.calc-typed-arithmetic.enabled pref.

Bug: 
Bug 1827404 - [css-values-4] Support division/multiplication/subtraction of mixed units in math functions like calc() and sign() (removal of unit)

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

Standards Body: 
CSSWG / W3C

Platform Coverage: 
All

Preference:
layout.css.calc-typed-arithmetic.enabled

DevTools Bug: 
(to be filed, will update thread once available)

Extensions Bug: 
N/A

Use Counter: 
N/A

Standards-Positions Discussion: 
https://github.com/mozilla/standards-positions/issues/1252 — (no position)

Other Browsers:
- ✅ Blink: Shipped since Chrome 140
- ✅ WebKit: Shipped since Safari 26

web-platform-tests:
Existing test suites:
- https://wpt.fyi/css/css-values/typed_arithmetic.html
- https://wpt.fyi/css/css-values/getComputedStyle-calc-mixed-units-003.html