CSS Rendering Engine (2/2)

...continued from CSS Rendering Engine (1/2)

Computing styles to match up with render tree nodes.

Style Computation

CSS Style rule tree is yet another tree created to help match styles with Render Tree nodes.

Style Rule Tree

CSS Cascade rules determine how render tree nodes are lined up on the page.

CSS Cascade Rules

The render tree nodes are laid out on the page (and potentially updated). If a user makes an incremental change to a render tree node, that node is marked as ‘dirty‘ and it will be re-layed out along with its children (similar to how the React Trees diff to only update altered components and their children!)

Render Tree layout

Elements are laid out, then their positions are fine-tuned, then painted.

Layout Process

How CSS affects HTML element positioning.

CSS Visual Model

CSS Box types:

CSS Block types

CSS element positioning - x, y, and z space

CSS Positioning