cc::EffectTree
Blink2862 Marras 2025

cc::EffectTree

The source provides an extensive technical explanation of the Effect Property Tree within the Chromium compositor, which is crucial for managing how visual effects are applied to web content. This tree structure, composed of EffectNodes, decouples effects (such as opacity, filters, and blending modes) from the traditional layer hierarchy to centralize calculations, improving rendering performance. A primary function of the effect tree is determining when content must be rendered into a separate RenderSurface (an offscreen texture) for correct compositing, flagged by the render_surface_reason field for complex needs like filters or non-standard blend modes. The document details the structure of an EffectNode, including fields that track cumulative properties like screen_space_opacity and visibility flags like is_drawn, and explains how the effect tree seamlessly interacts with the Transform and Clip property trees to ensure correct coordinate spaces and boundaries are maintained during effect application. Finally, it addresses the tree's role in facilitating performant CSS animations by allowing real-time property updates on the compositor thread and ensuring stability through element identification.

Jaksot(486)

Chromium Fragment Items: Storage, Lifecycle, and Memory Architecture

Chromium Fragment Items: Storage, Lifecycle, and Memory Architecture

These sources explain the technical implementation and storage of Fragment Items within Google’s Blink rendering engine. They clarify that while line boxes exist as nodes in the fragment tree, the act...

12 Maalis 48min

[ADV] Blink Layout Engine: Float Avoidance and Exclusion Space Mechanics

[ADV] Blink Layout Engine: Float Avoidance and Exclusion Space Mechanics

The provided documents describe how the Chromium layout engine, specifically the Blink renderer, prevents content from overlapping CSS floats using the LayoutNG framework. This process relies on an Ex...

11 Maalis 42min

Blink Layout Engine: Float Avoidance and Exclusion Space Mechanics

Blink Layout Engine: Float Avoidance and Exclusion Space Mechanics

The provided sources describe how Chromium’s Blink engine manages CSS float avoidance through a specialized ExclusionSpace model. This system works by recording every positioned float as a geometric e...

10 Maalis 51min

[DEEP] Chromium Threaded Implementation of CSS Position Sticky

[DEEP] Chromium Threaded Implementation of CSS Position Sticky

The provided text outlines the technical architecture of how the Chromium browser handles CSS sticky positioning across its main and compositor threads. The process begins in Blink, where the main thr...

10 Maalis 37min

[PRO] Chromium Compositor Sticky: Implementation and Impl-Thread Mechanics

[PRO] Chromium Compositor Sticky: Implementation and Impl-Thread Mechanics

These sources explain how the Chromium browser engine implements sticky positioning across its main and compositor threads. The process begins in Blink, where layout geometry is calculated and cached ...

10 Maalis 50min

Blink LayoutNG: Architecture of the Physical Fragment Tree

Blink LayoutNG: Architecture of the Physical Fragment Tree

These sources describe the architectural design of the Chromium Blink layout engine, specifically focusing on how physical fragments serve as durable post-layout output. The documentation explains tha...

8 Maalis 35min

Mechanics of the Blink Pre-Paint Tree Walk

Mechanics of the Blink Pre-Paint Tree Walk

These sources describe the pre-paint lifecycle phase in the Chromium Blink rendering engine, a process primarily responsible for paint invalidation and building paint property trees. The mechanism is ...

8 Maalis 49min

Blink to CC Property Tree Conversion and Commit Pipeline

Blink to CC Property Tree Conversion and Commit Pipeline

This technical deep dive clarifies the separation of duties between Blink and the Chrome compositor (cc) regarding property tree construction. The text explains that Blink converts its own paint prope...

5 Maalis 33min