CSS Typed OM 中单位运算的合法性解析

在 CSS Typed OM 规范中，关于 CSS 值的数学运算有一个值得探讨的技术细节：当我们在 JavaScript 中构造类似 1px/1px 这样的表达式时，其结果是否可以作为有效的 <number> 类型使用。

背景知识

CSS Typed OM 是 CSS Houdini 工作的一部分，它提供了一种类型化的方式来表示 CSS 值。通过这个 API，开发者可以直接操作 CSS 值的类型和单位，而不仅仅是字符串。

在这个规范中，CSSMathProduct 和 CSSMathInvert 是两种数学运算类型：

• CSSMathProduct 表示乘法运算
• CSSMathInvert 表示倒数运算

核心问题

当开发者构造如下的表达式时：

let coord = new CSSMathProduct(CSS.px(1), new CSSMathInvert(CSS.px(1)));

这实际上创建了一个 1px * (1/1px) 的运算，数学上等价于 1px/1px，结果应该是一个无单位的数值 1。

规范要求

根据 CSS Typed OM 规范，这种单位相除的运算是明确允许的。当相同单位的值相除时，单位会被约去，结果应该是一个纯数字。这与 CSS 计算值的处理方式一致。

测试用例的修正

原本的 Web Platform Test 测试用例错误地认为这种运算应该抛出异常，将其标记为"无效的 px/px 除法"。经过规范确认后，这个测试已被修正，现在正确地反映了规范要求的行为。

实际应用意义

理解这一点对于开发者很重要，因为这意味着：

1. 在 CSS 变换操作（如 scale）中，可以使用这种单位运算来获得纯数字参数
2. 在自定义 CSS 属性计算时，可以安全地进行单位约简
3. 与 CSS 解析器的行为保持一致，提高代码的可预测性

结论

CSS Typed OM 规范明确支持单位相除的运算，结果会正确地转换为无单位的数值。开发者在处理 CSS 值的数学运算时，可以放心地使用这种特性，而不必担心会抛出异常。这一设计使得 CSS 值的程序化操作更加灵活和强大。