Skip to content

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

Closed

Description

@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

Activity

  1. tabatkins commented on Jul 10, 2023

    @tabatkins
    Member

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

  2. progers commented on Sep 14, 2023

    @progers
    Contributor

    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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions