[csswg-drafts] [css-masking][css-motion] Unify (non-ray() related) grammar of clip-path and motion-path (#12381)

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

== [css-masking][css-motion] Unify (non-ray() related) grammar of clip-path and motion-path ==
Currently, the grammar for clip-path is:

```
clip-path   = none | <url> | [ <basic-shape> || <geometry-box> ]
```

whereas the grammar for motion-path is:

```
motion-path = none | [ [ <ray()> | <url> |  <basic-shape> ] || <coord-box> ]
```

Ignoring the addition of `ray()`, the two differ in two ways:

1. `clip-path` uses `<geometry-box>` vs. `motion-path` which uses `<coord-box>`. (this means `clip-path` allows an extra keyword, `margin-box`)
2. `clip-path` does not allow a reference box to be specified with a `<url>` vs. `motion-path` does allow a reference box to be specified with a `<url>`.

I propose we change `clip-path` to allow specifying both a <url> and a <geometry-box>, updating its grammar to:

```
clip-path   = none | [ [ <url> | <basic-shape> ] || <geometry-box> ]
```

It would also be expanded to allow referencing either a `clipPath` element or, like `motion-path`, "an SVG shape element".
 
Like with `motion-path`, the reference box for a `<url>`, "defines the viewport and user coordinate system for the shape [or clipPath] element, with the origin (the 0,0 point) at the top left corner, and units being 1px in size."

Additionally, I propose a change to `motion-path` to use  `<geometry-box>` instead of `<coord-box>` for its reference box, updating its grammar to:

```
motion-path   = none | [ [ <ray()> | <url> | <basic-shape> ] || <geometry-box> ]
```

With `margin-box` now a supported reference box.

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


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

Received on Saturday, 21 June 2025 15:42:12 UTC