Re: [w3ctag/spec-reviews] Custom Paint API to CR (#140)

> I like the use of ES6 classes for defining worklet code. Is an ES5 syntax also supported? If not, why not?

ES5 syntax is supported, filed: https://github.com/w3c/css-houdini-drafts/issues/361

> None of the examples show importing the worklet code. This seems like a major omission.

The examples now `import()` the worklet code.
See: https://drafts.css-houdini.org/css-paint-api/#example-1

> The implications for, e.g., drawing shadows outside the main margin box, aren't clear from the prose

This doesn't add any additional complexities on rendering engines, the way to use a `paint()` function is as a css `<image>`; this will only paint outside the border box of an element with the `border-image-source` property and `border-image-outset` correctly set.

> The spec should link to it's companion explainer at the top.

Filed: https://github.com/w3c/css-houdini-drafts/issues/339

> This spec normatively references the WHATWG HTML canvas API (e.g. this). That spec references early drafts from task forces (e.g. this). Worth at least discussing.

Acknowledged.

> Why does the PaintRenderingContext2D interface not implement CanvasFilters? This deprives custom paint of many interesting effects vs. a Shadow DOM with a <canvas> background image

We were waiting to see how this matches OffscreenCanvas. One core principle of the paint API is that the invalidation logic is clearly defined. `CanvasFilters` are able to reference svgs for example which we wouldn't be able to reference (otherwise the invalidation logic because impossible as you have an implicit dependency on something you didn't specify upfront).

One solution here is to accept a subset of CanvasFilters, e.g. `blur(2px)` which don't reference outside resources.

Another solution modifying CanvasFilters to accept a new css typed om (https://drafts.css-houdini.org/css-typed-om/) CSSFilterValue which we can explicitly invalidate upon as we know its loading state etc.

> The Image Placeholder example is seems unsatisfying. How can a developer fade the loaded image in? Or implement any other sort of transition over time?

This is all done with CSS transitions and animations. E.g.

```css
.class {
  background-image: paint(something);
  --some-color-property: red;
  transition: --some-color-property 0.5s ease-out;
}

.class:hover {
  --some-color-property: blue;
}
```

There is no way to "invalidate" yourself inside a paint class callback, or access timing information. All this type of animation has to use the existing animation APIs. 

> Related: how does custom paint interact with timelines; e.g. the Web Animation API?

As above, the paint class callback will be invoked each time the computed style changes, so each frame while a Web Animation API is running.

> The conic gradient example is non-existent.

Acknowledged we were waiting until we had `inputArguments` properly defined, it would look something like:

```css
.class {
  background: paint(name, 2px, 4px);
}
```

```js
registerPaint('name', class {
  static get inputArguments() { return ['<length>', '<length>']; }
  paint(ctx, geom, styleMap, args) {
     console.log(args[0].cssText); // '2px'
     console.log(args[1].cssText); // '4px'
  }
});
```

We discussed this at the last Houdini F2F and the edits just need to go in.

> Why isn't CanvasText supported?

Text is in a "hard problems" bucket at the moment. We need to make sure we explicitly declare out inputs to the paint function (similar to CanvasFilters above). E.g.

```js
paintCtx.font = 'SomeWebFont 2px';
```

In the above example we don't know ahead of time what font you are going to use, so we can't invalidate the paint function if it loads for example. We were going to introduce a `CSSFontFaceValue`, and make the `font` attribute on canvas accept this TypedOM representation.

When the loading state changes, we can then properly invalidate. E.g.

```js
CSS.registerProperty({
  name: '--my-font-face',
  syntax: '<font-face>' // not sure if this is right.
});
```

```css
.class {
  background-image: paint(name);
  --my-font-face: HappySansFont
}
```

```js
registerPaint('name', class {
  paint(ctx, geom, styleMap) {
    ctx.fontFace = styleMap.get('--my-font-face');
    ctx.fontSize = 12;
  }
});
```

> property paintWorklet is on the Window interface. Is there a reason it's global? Could there be an alternative home for this?

Resolved in the last Houdini F2F to move this to CSS object.

> Not sure the "Note: This is how the class should look" should use WebIDL to describe the expected parameter. I think it would be much clearer to just use a JavaScript example (a class)

This now has a javascript example: https://drafts.css-houdini.org/css-paint-api/#paint-worklet

> registerPaint(name, paintCtor):step 2. "NotSupportedError" seems logically wrong. The closest match I found in the WebIDL spec was https://heycam.github.io/webidl/#inuseattributeerror, but that didn't seem quite right either. Is it time for a new "UniqueValueError" or some such (this can't be the first time this case is needed)

Filed: https://github.com/w3c/css-houdini-drafts/issues/362


-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/spec-reviews/issues/140#issuecomment-281580852