[fxtf-drafts] [motion-1] Define or clarify the motion path along the inner side of the border (#513)

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

== [motion-1] Define or clarify the motion path along the inner side of the border ==
> If <offset-path> is omitted, it defaults to inset(0 round X), where X is the value of border-radius on the element that establishes the containing block for this element.

In the current definition with `offset-path: content-box`, the element cannot move along the inside of the border (the blue border in the video). Manually fine-tuning the X value in `round X` is painful and would like a way to achieve such a motion path. This is very useful when implementing some animations of the border.

Likewise, there doesn't seem to be a way to move along the outside of the border.

https://github.com/w3c/csswg-drafts/assets/2784308/28f7e9fb-0427-45c6-bf19-399aaa0ad607

```css
:root {
  --r: 60px 120px / 100px 30px;
}
#outer {
  margin: 60px auto;
  position: relative;
  width: 500px;
  height: 200px;
  border: 30px solid blue;
  border-radius: var(--r);
}
#red-box {
  width: 0;
  height: 0;
  offset-path: content-box;
  offset-distance: -3%;
  offset-rotate: auto 0deg;
  outline: 6px solid red;
  position: absolute;
}
```

## Expected

Currently, we need to fit the rounded corners with the following CSS, which is troublesome once the `border-radius` of the containing block has changed.

```css
#red-box {
  offset-path: inset(0 round 30px 0px / 70px 0px) content-box;
}
```

https://github.com/w3c/csswg-drafts/assets/2784308/eb7c025e-b625-48fa-82dd-19fa556c50ff



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


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

Received on Thursday, 11 May 2023 19:38:19 UTC