Skip to content

[css-paint-api] Cycle possible using inputProperties() #877

@stephenmcgruer

Description

@stephenmcgruer

Consider the following:

index.html

<!-- index.html -->
<!doctype html>
<style>
  textarea {
    background-image: paint(recursivePainter);
  }
</style>
<textarea></textarea>
<script>
  CSS.paintWorklet.addModule('recursive.js');
</script>

recursive.js

class RecursivePainter {
  static get inputProperties() { return ['background-image']; }
  paint(ctx, geom, properties) {
    var myself = properties.get('background-image');
    ctx.drawImage(myself, 0, 0);
  }
}

registerPaint('recursivePainter', RecursivePainter);

This forms a cycle, where RecursivePainter depends on RecursivePainter in order to draw, which is rather impossible. More generally, you could have a chain of PaintWorklets, such that PW1 <-- PW2 <-- PW3 ... <-- PWn <-- PW1. Such a chain is finite (as the number of css properties which accept <image> is finite), but detecting cycles would be painful for the browser - and it's unclear how to resolve them properly.

I think the best the spec can do is declare PaintWorklet-generated <image>s to be invalid in the input properties. This is a little tricky since some properties such as border-image can contain multiple images and it seems reasonable to allow the non-PaintWorklet ones to be used.

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