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

[BorisChiou]

Per the spec definition of the computed values in [css-shapes-1], 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

[tabatkins]

Oh whoops, indeed, I got that conversion wrong. inset(y calc(100% - x - w) calc(100% - y - h) x) is obviously the right answer.

[progers]

I just ran into this when working on these tests. We need to update the spec note (here) to mention the correct computed inset value for xywh.

@nt1m FYI, since you are also actively working in this area.