Topic

Painting, Compositing & Rasterization

Display lists, paint records, layerization, raster threads, tiles, and compositing to the final frame.

paintlayersraster

HTML

sample

<div class="card layer">Layered content</div>

CSS

sample

.layer { will-change: transform; background: linear-gradient(120deg, #7c3aed, #22d3ee); }

JavaScript

sample

document.querySelector('.layer')?.animate([{opacity:1},{opacity:0.6},{opacity:1}], {duration: 1200, iterations: Infinity})

Visualizer

Paint & Composite

Layer promotion and compositor output.

Visualizer

Painting & Compositing

Paint records become layers. Compositor threads raster tiles and blends them into the final frame.

live

Controls

Base layer

Paint background • Text

GPU

Overlay

Box-shadow • Transform

GPU

Tooltip

Opacity

GPU

Visualization

Base layer

Composited

Ops: Paint background, Text

Overlay

Composited

Ops: Box-shadow, Transform

Tooltip

Paint-only

Ops: Opacity

GPU raster threads build tiles; compositor thread assembles them at vsync. Promote only when it reduces paint work.

Why this matters

Connect the dots between specs (HTML, CSS, WebIDL) and engine behaviors (parser, layout, GPU). Use the sandbox to reproduce each step with your own snippets.

Loading BrowserUniverse...