http://googlechrome.github.io/houdini-samples/

Setting a value for a typed custom property on a container has no effect on its value for the elements inside. In other words the value doesn't cascade. Here's and example demonstrating what I mean.
Is this by design? Are there other differences between "regular" and typed custom properties?

The docs on this are a bit old and even new ones from Sept say 'we are working on getting paintAPI pant worklets off the main thread.' Is there an update on there this is at? Can we use in production with a pollyfill for Safari? Thanks.

I'm sure the writers had a good reason to do this, but I don't see why registering a new custom property has to be done from JS.
IMHO a syntax like

--custom-prop: * <length>;

has a few major advantages compared to

CSS.registerProperty({
    name: '--custom-prop',
    syntax: '<length>',
    initialValue: '*'
});

• Shorter, more readable;
• More natural environment. One of the cool things about typed custom properties is, that we can use them to animate stuff that was only possible using JS before. Using the alternative syntax that would be truly CSS only. Instead, we have to add a small piece of JS code to our project, that has no valuable info to the rest of the JS codebase. I know that separation of concerns between CSS and JS has gotten a bit trickier since CSS-in-JS, but this syntax seems like a straight breach of this principle.
• It gives the possibility to declare non-global typed properties.

I guess a PostCSS plugin could make both of these syntaxes possible, I just don't understand the initial decision.
What am I missing?

Recently .import() method was renamed to .addModule() w3c/css-houdini-drafts#374 (comment)
It's already implemented in Chrome Canary and throws errors.

The spec for CSSStyleValue now uses a stringifier rather than a cssText property (https://drafts.css-houdini.org/css-typed-om-1/#cssstylevalue), so the examples should be changed to match.

The Twitter demo at the link doesn't seem to be having the expected effect even with Experimental Web Platform features enabled. The Profile picture just continues scrolling out of view.

https://googlechromelabs.github.io/houdini-samples/animation-worklet/twitter-header/

Chrome Version: Version 66.0.3359.181

The paint worklet API isn't exposed under HTTP in Chrome, the link in the project description should be changed to be: https://googlechromelabs.github.io/houdini-samples/

<div class="small"><img src="images/01.jpg" /></div> var smallContent = document.querySelector('.small'); new KeyframeEffect(smallContent, [{ 'opacity': 1 }, { 'opacity': 0 }], { duration: 7, fill: 'forwards', delay:5000, iterations:1 })

In the above keyframe effect, the below mentioned options are not working:

1. Delay
2. Iterations
3. Fill

From html page we can only call either “play()” to start the animation or “cancel” to stop and remove the animation.
How to handle “Pause” and “Finish” animations?

Also, no documentation regarding, how to pass values to “additionalTimelines_” variable of “WorkletAnimation” class.
Need your input.

Tried Browser versions:

1. Google Chrome - 64.0.3282.186
2. IE 11
3. IE Edge

I was playing around with animating different custom properties, and found that while it works as expected for and , it fails for .
Here's a codepen with and example.

Is this not implemented yet in Chrome, or am I misunderstanding/misusing something?

This example does not work for me in the latest Chrome. The image stays in the 'unloaded' state indefinitely.
I'm not sure if this is a Chromium bug or if the example is outdated.

In Chrome 78, error occurs:

The layout function must be async or return a promise, falling back to block layout.

This is due to https://chromium.googlesource.com/chromium/src/+/9c224451fb63df743fbd510052458e088a438517

(from iamvdo/css-houdini.rocks#6)

The Twitter demo says that the CSS Paint API is required, however, my understanding is that the Paint API is currently supported and the Demo is actually for the Animation API?

I've implemented a fancier version of this paint API QR code generator by @bfgeek. Since it wasn't my idea, I've though it would make sense to add it to this repo. What do you think?

Hi 👋
Thanks for this module! Your examples have been very helpful.
Now, I'm confused about the scope of Worklets, the posts about worklets say they are like a lightweight web wroker, so, because of some of their similarities I though I could use the sames APIs availaible for workers, but that isn't true.

My specific use case, is that I was trying to draw an Image from a paintWorklet.

Here is the code of my worklet

registerPaint('tiles', class {
  paint (ctx, geom, properties) {
    fetch('https://mdn.mozillademos.org/files/5397/rhino.jpg')
    .then(response => response.blob())
    .then(blob => createImageBitmap(blob))
    .then(bitmap => {
      ctx.drawImage(bitmap, 33, 71, 104, 124, 21, 20, 87, 104)
    })
  }
})

This throws that fetch is not defined

So the question is, what APIs are availaible from a paintworklet? or any worklet?

Where should one put a piece of code in a paintAPI worklet that needs to run only once (e.g. things you'd normally put in the constructor).
It's possible to do something like
this.x = this.x || this.calculateX()
in the paint method, but it feels a bit old school.

The parallax demo at the link only seems to work if I disable Experimental Web Platform features.

https://googlechromelabs.github.io/houdini-samples/animation-worklet/parallax-scrolling/

Chrome Version: Version 66.0.3359.181

Not sure why, cant see any error message, the tab just hangs. Same in Canary.
Due to spec-change? Would be supercool to be able to try the demos out ;)

When using provided links for video samples, for example- in the twitter-header folder, YouTube says the videos have been made private.
Is there any other way to check the samples out? Or do the links need updating?

(P.S- Trying to access the videos from India, if that is of any concern.)

I'm confused as to how we're meant to play with these demos locally?

CSS.paintWorklet is only available over https, so I've had no luck with a localhost server. And opening the html files directly leads to a CORS error for the js files.

Some instructions as to how we're meant to run these demos or develop against this API would be really helpful!

When opening https://googlechromelabs.github.io/houdini-samples/paint-worklet/diamond-shape/ in Chrome 65, the diamond shape does not display.

Expected: https://developers.google.com/web/updates/2018/01/paintapi#thinking_outside_the_box