Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM). In this slides we're focusing on Houdini's Paint Worklet/CSS Paint API
direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers
typed Javascript objects instead of strings, enabling faster parse times and more semantic manipulation. 01 Paint and Values API Enables developers to define advanced CSS cutom properties with syntax (type checking), default values, and inheritance. 02 Paint Worklet Enables developers to define canvas-like custom painting functions that can be used directly in CSS as backgrounds, borders, masks, and more. 03 Animation Worklet Enables animations to hook into the GPU to avoid jank and not clog the main thread. The Animation Worklet also enables scoll-linked animations. 04
own layout algorithms in addition to the native algorithms user agents ship with today. 05 Font Metrics API Designed to provide basic font metrics for both in-document and out-of-document content 06 Parser API Allows developers to access the engine's parser (built on top of the Typed OM) 07
“CSS Custom Paint”. 2. Programmatically generate an image whenever a CSS property expects an image like background-image or border-image. 3. If you know how to draw in a <canvas>, you can draw in a paint worklet! 4. The difference from using a common background image here is that the pattern will be re-drawn on demand.