Blink and Compositor Stacking Contexts
Blink28625 Syys 2025

Blink and Compositor Stacking Contexts

These sources provide an extensive technical explanation of how CSS stacking contexts are implemented within the Chromium rendering engine, focusing on the collaboration between the Blink renderer and the cc compositor. The process begins in Blink, where elements triggering a stacking context (via properties like opacity or z-index) are identified, leading to the creation of internal structures like PaintLayer and EffectPaintPropertyNode to manage z-ordering. Blink then produces a PaintArtifact consisting of drawing commands grouped into paint chunks, each linked to a specific set of property nodes that define the context's position, clipping, and effects. This artifact is passed to the cc compositor, which converts the Blink properties into its own PropertyTrees (especially the EffectNode), using this data to decide which stacking contexts require an isolated drawing buffer, known as a RenderSurfaceImpl, for final GPU compositing and accurate visual blending. Ultimately, Blink determines what is painted and ordered, and cc determines how to composite those results efficiently.

Jaksot(396)

blink::GraphicsContext

blink::GraphicsContext

immediate drawing API that records to a display list. Painters for layout objects use GraphicsContext to “draw”—but in modern Blink those calls get recorded into a display list (PaintRecord) backed by...

10 Loka 202544min

blink::TransformPaintPropertyNode / ClipPaintPropertyNode / EffectPaintPropertyNode / ScrollPaintPropertyNode

blink::TransformPaintPropertyNode / ClipPaintPropertyNode / EffectPaintPropertyNode / ScrollPaintPropertyNode

These are the nodes within those four trees. Every piece of painted content (a “paint chunk”) is associated with a tuple of (Transform, Clip, Effect, Scroll) nodes—its PropertyTreeState. This precisel...

10 Loka 202533min

blink::PaintPropertyTreeBuilder

blink::PaintPropertyTreeBuilder

builds/updates paint property trees.Consumes the layout/fragment data and produces the four paint property trees (Transform, Clip, Effect, Scroll) for the current frame. These trees encode coordinate ...

10 Loka 202547min

blink::PrePaintTreeWalk

blink::PrePaintTreeWalk

cross‑frame pre‑paint traversal. Runs in the InPrePaint lifecycle phase. Walks the entire layout tree starting at the root LocalFrameView, updating paint invalidation state and computing the context n...

10 Loka 202531min

blink::NGPhysicalFragment and friends

blink::NGPhysicalFragment and friends

Layout takes the styled DOM and produces a fragment tree of positioned boxes. In modern Blink this is LayoutNG; the core artifact is NGPhysicalFragment, which stores geometry and is used downstream fo...

10 Loka 202537min

blink::StyleEngine

blink::StyleEngine

style invalidation & resolution (recalc). 
Given DOM/style changes since the last frame, StyleEngine computes updated ComputedStyles, manages active stylesheets/media query state, and marks the right ...

10 Loka 202534min

blink::Document & blink::DocumentLifecycle

blink::Document & blink::DocumentLifecycle

states that gate phases. The document owns the DOM and keeps a DocumentLifecycle state machine that ensures we do things in phase order (style before layout, pre‑paint before paint, etc.). Lifecycle t...

10 Loka 202535min

blink::LocalFrameView

blink::LocalFrameView

orchestrates style → layout → pre‑paint/paint for a frame. This is the workhorse that actually runs lifecycle phases. On a frame tick from WebFrameWidgetImpl, it goes through style recalc, layout (Lay...

9 Loka 202544min