Re: [csswg-drafts] [css-shapes-1] Define `<basic-shape>` with CSS value definition syntax (#7390)

`<basic-shape>` is defined in CSS Shapes 1 with the following functions:

  - `circle(<shape-radius>? [at <position>]?)`
  - `ellipse([<shape-radius>{2} ]? [at <position>]?)`
  - `inset(<length-percentage>{1,4} [round <'border-radius'>]?)`
  - `polygon(<'fill-rule'>? , [<length-percentage> <length-percentage>]#)`
  - `rect([<length-percentage> | auto ]{4} [round <'border-radius'>]?)`
  - `xywh(<length-percentage>{2} <length-percentage [0,∞]>{2} [round <'border-radius'>]?)`
  - `path(<'fill-rule'>? , <string>)`

CSS Shapes 2 extends this list with `shape(<'fill-rule'>? from <coordinate-pair>, <shape-command>#)`.

---

`<basic-shape>` is used in: 

  - CSS Masking: [`clip-path`](https://drafts.fxtf.org/css-masking-1/#propdef-clip-path)
  - Motion: [`offset-path`](https://drafts.fxtf.org/motion-1/#propdef-offset-path)
  - CSS Shapes 1: [`shape-outside`](https://drafts.csswg.org/css-shapes-1/#propdef-shape-outside)
  - CSS Shapes 2: [`shape-inside`](https://drafts.csswg.org/css-shapes-2/#propdef-shape-inside)
  - CSS Round Display 1: [`shape-inside`](https://drafts.csswg.org/css-round-display-1/#propdef-shape-inside)
  - SVG 2: [`shape-inside`](https://svgwg.org/svg2-draft/text.html#TextShapeInside), [`shape-substract`](https://svgwg.org/svg2-draft/text.html#TextShapeSubtract)

For `clip-path`, CSS Masking links `<basic-shape>` to CSS Shapes 1 and does not restrict its value.

For `offset-path`, Motion links `<basic-shape>` to CSS Shapes 1 and restricts its value to `inset()`, `circle()`, `ellipse()`, `polygon()`. I think `rect()` and `xywh()` should be allowed. `path()` may be problematic because it takes `<'fill-rule'>`, which seems meaningless for `offset-path`, but `polygon()` also takes it and is already accepted in `offset-path`, so should `<'fill-rule'>` have no effect?

For `shape-outside`, CSS Shapes 1 restricts `<basic-shape>` to `inset()`, `circle()`, `ellipse()`, `polygon()`. CSS Shapes 2 links it to CSS Shapes 1 and restricts it to the same value. I think other basic shapes should be allowed in both specs.

For `shape-inside` in CSS Round Display 1, `<basic-shape>` is not linked and its value is not restricted. The spec says that *CSS Shapes 2 define the `shape-inside` property [...which] is extended with a new value named `display`*, which is already included in CSS Shapes 2.

For `shape-inside` and `shape-substract` in SVG 2, `<basic-shape>` is not linked and its value is restricted to `circle()`, `ellipse()`, `polygon()`. The spec has *Issue 76: do not re-specify `shape-inside` but reference CSS Shapes*, and its value definition is different than in CSS Shapes 2. I think other basic shapes should be allowed.

---

I propose the following changes.

In [CSS Shapes 1](https://github.com/w3c/csswg-drafts/blob/7ee1e95e546c62d0e1af5fa1a5f52f5a0def3696/css-shapes-1/Overview.bs#L567), add the production rule of `<basic-shape>`:

```diff
+ Basic shapes in CSS are represented by the <<basic-shape>> type.
 Additionally, the three rectangular shape functions
 are grouped into a production for convenience:

 <pre class=prod>
+ <<basic-shape>> = <<basic-shape-rect>> | <<circle()>> | <<ellipse()>> | <<polygon()>> | <<path()>>
 <dfn>&lt;basic-shape-rect></dfn> = <<inset()>> | <<rect()>> | <<xywh()>>
 </pre>
```

In [CSS Shapes 1](https://github.com/w3c/csswg-drafts/blob/7ee1e95e546c62d0e1af5fa1a5f52f5a0def3696/css-shapes-1/Overview.bs#L974), accept all functions of `<basic-shape>` in `shape-outside`:

```diff
  <dd>
    The shape is computed based on the values of one
-   of ''inset()'', ''circle()'', ''ellipse()''
-   or ''polygon()''. If a <<shape-box>> is also supplied, this defines the <a>reference box</a> for the <<basic-shape>> function. If <<shape-box>> is not supplied, then the <a>reference box</a> defaults to ''margin-box''.
+   of the <<basic-shape>> functions. If a <<shape-box>> is also supplied, this defines its <a>reference box</a>. If <<shape-box>> is not supplied, then the <a>reference box</a> defaults to ''margin-box''.
  </dd>
```

In [Motion](https://github.com/w3c/fxtf-drafts/blob/bc48bfa2e7b1773f8081315f474af400e5b0b699/motion-1/Overview.bs#L168)

```diff
  : <<inset()>>
+ : <<rect()>>
+ : <<xywh()>>
  ::
      The <var>initial position</var> is the left end of the top horizontal line, immediately to the right of any 'border-radius' arc.
  : <<polygon()>>
+ : <<path()>>
  ::
      The <var>initial position</var> is defined by the first coordinate pair of the polygon.

-     The <var>initial direction</var> is defined by the vector connecting.
+     The <var>initial direction</var> is defined by the vector connecting
-
      the <var>initial position</var> with the next following coordinate pair that isn't equal to the <var>initial position</var>.
+  
+     The `<<'fill-rule'>>` argument of `<<polygon()>>` and `<<path()>>` is ignored.
```

-- 
GitHub Notification of comment by cdoublev
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7390#issuecomment-1357175930 using your GitHub account


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

Received on Monday, 19 December 2022 06:53:54 UTC