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.
Consider the following:
index.html
recursive.js
This forms a cycle, where
RecursivePainterdepends onRecursivePainterin order to draw, which is rather impossible. More generally, you could have a chain of PaintWorklets, such thatPW1 <-- 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 inputproperties. This is a little tricky since some properties such asborder-imagecan contain multiple images and it seems reasonable to allow the non-PaintWorklet ones to be used.