DrawImage Houdini CSS Paint API

Question

Я пробую CSS Paint API Houdini на Chrome 70, и я не могу этот пример работать: https://github.com/w3c/css-houdini-drafts/blob/master/css-paint-api/EXPLAINER.md#drawing-images

Я передаю изображение через пользовательское свойство, как это:

--my-image: url("bridge.jpg");

и я использую уровень API свойств и значений CSS (включается через флаг функций Experimental Web Platform), чтобы зарегистрировать свойство изображения:

CSS.registerProperty({
  name: '--my-image',
  syntax: '<image> | none',
  initialValue: 'none',
  inherits: false,
});

Затем я пытаюсь нарисовать это в своем рабочем листе:

class MyWorklet {
  static get inputProperties() { 
    return ['--my-image']; 
  }

  paint(ctx, geom, properties) {
    const img = properties.get('--my-image');
    console.log(img);
    ctx.drawImage(img,10,10,150,180);    
  }
}
registerPaint('myworklet', MyWorklet);

для отображения worklet я сделал простой 500 * 500 div и добавил стиль:

background-image: paint(myworklet);

Консоль говорит мне, что img - это CSSImageValue, так что, похоже, он работает каким-то образом, но изображение не отрисовывается на фоне div.

Кому-нибудь удалось заставить это работать или некоторые функции, которые требуются для такого рода вещей, еще не реализованы?

Answer 1

Изображение не реализовано в Chrome до сих пор. Должен быть доступен в последнем техническом обзоре Safari (v72). Но для этого требуется встроенный код, см. https://vitaliy-bobrov.github.io/blog/trying-paint-wroklet-in-safari-tp/