Re: [csswg-drafts] [css-color] Should specify that `opacity` is serialized as a number for the specified values (#10426)

@svgeesus I don't think this part is needed:

> This <<number>> value is expressed in base ten,
with the "." character as decimal separator.
The leading zero must not be omitted.
Trailing zeroes must be omitted

Since that should just be standard number serialization.

I think we still have an issue with how calc() works. The current [WPT tests](https://wpt.fyi/results/css/css-color/parsing/opacity-valid.html) have a pretty weird assumption that calc() values with percentages get transformed into calc() values with numbers:

```
test_valid_value("opacity", "clamp(50%, 0%, 70%)", "calc(0.5)");
test_valid_value("opacity", "clamp(50%, 80%, 70%)", "calc(0.7)");
test_valid_value("opacity", "clamp(50%, 60%, 70%)", "calc(0.6)");
test_valid_value("opacity", "min(50%, 0%)", "calc(0)");
test_valid_value("opacity", "min(0%, 50%)", "calc(0)");
test_valid_value("opacity", "max(50%, 0%)", "calc(0.5)");
test_valid_value("opacity", "max(0%, 50%)", "calc(0.5)");
test_valid_value("opacity", "min(-40%, 50%)", "calc(-0.4)");
```

Only Firefox has this behavior, and I think it's pretty weird. We don't do any transforms inside a calc() like this for any other properties. Given WebKit and Chrome don't match Firefox here, and instead preserve percentages inside calc() for specified value (but do, of course, resolve them for computed styles).

I would prefer we specify the WebKit/Chrome behavior which I might right out as something like:

```
If the specified value for an opacity value matches a literal [<<percentage-token>>](https://www.w3.org/TR/css-syntax-3/#typedef-percentage-token) (i.e. does not use calc()) it should be serialized as the equivalent <<number>> (0% to 0, 100% to 1) value. Otherwise, the specified value for an opacity value should serialize using standard serialization for the grammar.
```

If we adopt this, we would change the tests.

-- 
GitHub Notification of comment by weinig
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10426#issuecomment-2880921038 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 14 May 2025 16:55:17 UTC