- From: Chris Lilley via GitHub <sysbot+gh@w3.org>
- Date: Wed, 23 Aug 2023 11:56:26 +0000
- To: public-css-archive@w3.org
Summarizing current browser behavior when serializing specified values:
1. `calc` not preserved in legacy `rgb()`. Over-range values clamped in specified value. [test 1](https://codepen.io/svgeesus/pen/XWobaNM?editors=0011)
```js
let test = document.createElement("div");
test.style.color = "rgb(calc(255), 127, 255)";
console.log(test.style.color);
test.style.color = "rgb(calc(100 * 5), 127, 255)";
console.log(test.style.color);
```
> "rgb(255, 127, 255)"
> "rgb(255, 127, 255)"
2. `calc` not preserved in legacy `hsl()` because it is serialized as `rgb()`. Over-range values clamped in specified value. [test 2](https://codepen.io/svgeesus/pen/poqJrbj?editors=0011)
```js
let test = document.createElement("div");
test.style.color = "hsl(90, calc(100%), 50%)";
console.log(test.style.color);
test.style.color = "hsl(90, calc(100% + 50%), 50%)";
console.log(test.style.color);
```
> "rgb(128, 255, 0)"
> "rgb(128, 255, 0)"
3. `calc` not preserved in `hwb()` because it is serialized as `rgb()`. Over-range values clamped in specified value. [test 3](https://codepen.io/svgeesus/pen/poqJrbj?editors=0011)
```js
let test = document.createElement("div");
test.style.color = "hwb(90 calc(30%) 70%)";
console.log(test.style.color);
test.style.color = "hwb(90 calc(30% * 2) calc(70% * 2)";
console.log(test.style.color);
```
Result per CSS Color 4 sample code ([live test](https://codepen.io/svgeesus/pen/xxmGLjY?editors=0011)) is `[0.3, 0.3, 0.3]` which in integer precision legacy `rgb()` is
> "rgb(77, 77, 77)"
> "rgb(77, 77, 77)"
**NOT INTEROPERABLE** Chrome follows [the spec on normalizing over-range W and B](https://drafts.csswg.org/css-color-4/#the-hwb-notation) while Firefox and Safari give an odd result:
> "rgb(77, 77, 77)"
> **"rgb(96, 96, 96)**"
--
GitHub Notification of comment by svgeesus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8318#issuecomment-1689829045 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 23 August 2023 11:56:28 UTC