[css-paint-worklet] <template> fragment elements' inline background paint is not working

Question

[css-paint-worklet] <template> fragment elements' inline background paint is not working

Opened this issue 5 years ago · 0 comments

Following code is not working on:
OSX Catalina 10.15.1
-Chromium 80.0.3985.3 (Official Build) canary (64-bit)
-MS Edge 76.0.176.0 (Official build) Canary (64-bit)
-Safari Technology Preview 13.1

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>

  <template>
    <div style="background: paint(foo); width:200px; height: 200px; display: block;"> myContents </div>
  </template>

  <script id="myWorklet" type="text/worklet">
    registerPaint('foo', class
    {
      paint()
      {
        console.log('It Works!')
      }
    });
  </script>

</head>

<body>

  <script>
    var blob = new Blob([myWorklet.textContent], {type: 'text/javascript'});
    CSS.paintWorklet.addModule(URL.createObjectURL(blob));

    document.body.appendChild(
      document.getElementsByTagName("template")[0].content
    )
  </script>

</body>
</html>

Non-inline style is working:

<style type="text/css">
  #myElement{
    background: paint(foo); width:200px; height: 200px; display: block;
  }
</style>

  <template>
    <div id="myElement"> myContents </div>
  </template>