[csswg-drafts] [css-shapes-1] Incorrect conversion from `xywh()` to the equivalent `inset()` function, for computed values (#9053)

BorisChiou has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-shapes-1] Incorrect conversion from `xywh()` to the equivalent `inset()` function, for computed values ==
Per the spec definition of the [computed values in [css-shapes-1]](https://drafts.csswg.org/css-shapes-1/#basic-shape-computed-values), we have to compute `xywh()` and `rect()` into the equivalent `inset()` function. There is a note in the spec:
>  Given rect(t r b l), the equivalent function is inset(t calc(100% - r) calc(100% - b) l). Given xywh(x y w h), the equivalent function is inset(y calc(x + w) calc(y + h) x).

It seems the equivalent `inset()` function for `xywh()` is not correct to me. Per definition of `inset()`, the four `<length-percentage>`s define the position of the top, right, bottom, and left edges of a rectangle, respectively, as insets from the corresponding edges of the reference box. Therefore, the right edge should be something like `100% - (x + w)` because it is the offset from the right edge. Similar for the bottom edge. It should be `100% - (y + h)`.

There are two possible ways to fix this:
1. compute the equivalent `rect()` function, so we don't have to change the formula, and just change the function name.
2. still compute to equivalent `inset()` function, but update the note to something like: Given `xywh(x y w h)`, the equivalent function is `inset(y calc(100% - x - w) calc(100% - y - h) x)`.

I may use the 2nd way as the current proposal and add it to the wpt for now.

cc @tabatkins 


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9053 using your GitHub account


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

Received on Monday, 10 July 2023 22:13:36 UTC