Fresnel CSS Algorithm: what changed

Revision 0 to 1. Removed lines have a minus sign; added lines have a plus sign.

Title: Fresnel CSS Algorithm

New		Line
1	+	## Contents
2	+
3	+	* 1 Overview
4	+	* 2 Delayed computation
5	+	* 3 ApplyCSS
6	+	* 3.1 Collecting type stylesheets
7	+	* 3.2 Parsing stylesheets
8	+	* 3.3 Collect CSS attributes for each element
9	+	* 3.4 Box-Modell
10	+	* 3.5 Layout
11	+	* 3.5.1 Layout Top-Down
12	+	* 3.5.2 Layout Final
13	+	* 4 Flow Layouter
14	+	* 5 Flex Layouter
15	+	* 6 Grid Layouter
16	+
17	+	# Overview
18	+
19	+	This page describes the how [[Fresnel]] parses and applies CSS, layouts and renders.
20	+
21	+	# Delayed computation
22	+
23	+	Whenever an element or CSS is added, removed, altered TFresnelElement.DomChanged is called. This does not compute anything immediately in contrary to LCL or VCL. Instead a change:
24	+
25	+	* calls _TFresnelCustomForm.DomChanged_ to _LayoutQueued_ to true,
26	+	* the first change queues a call of _TFresnelCustomForm.OnQueuedLayout_.
27	+	* which eventually calls _ApplyCSS_ and _Invalidate_ ,
28	+	* which queues a _WSDraw_ ,
29	+	* which eventually calls _Renderer.Draw_.
30	+
31	+	Each form has its own queued call.
32	+
33	+	If you need to compute a change immediately call _Form.ApplyCSS_.
34	+
35	+	# ApplyCSS
36	+
37	+	The article gives an overview of the order and how the CSS is parsed and computed in Fresnel. The central method is TFresnelViewport.ApplyCSS.
38	+
39	+	## Collecting type stylesheets
40	+
41	+	The Viewport gathers all used type stylesheets via _GetCSSTypeStyle_ and adds them to resolver. These have _origin user-agent_.
42	+
43	+	* E.g. if there is a _TDiv_ and a _TButton_ on the form, it will use the stylesheets returned by _TDiv.GetCSSTypeStyle_ and _TButton.GetCSSTypeStyle_.
44	+	* If there is a TMyButton, with _TMyButton = class(TButton)_ , it will contain both stylesheets. This allows to create a 'button' descendant, adding the 'button' stylesheet only once.
45	+
46	+	## Parsing stylesheets
47	+
48	+	Each form has one Resolver: TCSSResolver. The resolver parses all stylesheets:
49	+
50	+	* Starts with the stylesheets from the used element types, e.g. all used _TFresnelElement_ classes. These have origin user-agent.
51	+	* Next it parses the _application_ stylesheets. These have origin user.
52	+	* Finally it parses the _form_ stylesheet. This has origin author.
53	+	* Checks every attribute:
54	+	* The resolver searches all attribute names and stores the numerical ID for later faster lookup.
55	+	* Every attribute is registered in the CSSRegistry and has a _OnCheck_ method. E.g. the 'display' attribute calls _TFresnelCSSRegistry.CheckDisplay_.
56	+	* Every value is checked for syntax. If the value contains a _var_ function, its syntax cannot be checked at this point.
57	+	* If the value has a syntax error, then it is marked _invalid_ and will be skipped. A warning can be logged.
58	+
59	+	## Collect CSS attributes for each element
60	+
61	+	The _Viewport_ traverses all nodes (TFresnelElement) to compute basic attributes:
62	+
63	+	* It calls ComputeInlineStyle, which parses the _Style_ property as _inline style_ , similar to the above.
64	+	* It calls ComputeCSSValues:
65	+	* Calls Resolver.Compute
66	+	* Collects all matching rules for this element
67	+	* Merges the attributes of these rules and the inline style to a list of attributes. Considering origin , rule-specifity , short-hands , all and !important.
68	+	* Substitutes var() calls using the custom-attributes of the element, or the inherited values.
69	+	* Applies shorthands. E.g. _padding_ is split into _padding-top_ , _padding-right_ , _padding-bottom_ and _padding-left_.
70	+	* Returns a list of attributes.
71	+	* Substitute the base keywords initial , inherit , unset. Note: _revert_ and _revert-layer_ are currently treated as _unset_.
72	+	* Compute base attributes: visibility, display, position, box-sizing, direction, writing-mode, overflow-x, overflow-y, float
73	+	* if _display:none_ then _ComputedVisibility_ becomes _CSSRegistry.kwCollapse_
74	+
75	+	## Box-Modell
76	+
77	+	* MarginBox: outer rectangle
78	+	* BorderBox: outer rectangle of the border (Note: a border-width is only relevant with a border-style)
79	+	* GutterBox: inside the border, the gutter is space for scrollbars. Scrollbars might be painted bigger than the gutter space, overlapping into the clientbox.
80	+	* ClientBox: inside the gutterbox, scrollable area.
81	+	* child elements left, top are relative to the container's ClientBox
82	+	* ContentBox: ClientBox without the padding.
83	+	* width and height are MarginBox minus margins, border and padding (box-sizing: content-box). Keep in mind, that this ignores gutter space.
84	+
85	+	## Layout
86	+
87	+	The _Viewport_ calls Layouter.Apply , which is TViewportLayouter.Apply.
88	+
89	+	### Layout Top-Down
90	+
91	+	First all elements are traversed top-down.
92	+
93	+	* Every visible, non collapsed element (TFresnelElement) gets an instance of _TUsedLayoutNode_ in _LayoutNode_.
94	+	* Every non static element gets a z-index.
95	+	* Every block element gets a layouter: TFLFlowLayouter , TFLFlexLayouter orTFLGridLayouter.
96	+	* Set LayoutNode.Container
97	+	* All used lengths are reset:
98	+	* border-, padding-, margin-top/right/bottom/left , and line-height are set 0.
99	+	* left, top, right, bottom, width, height, min-width, max-width, min-height, max-height are set to _NaN_.
100	+	* TUsedLayoutNode.ComputeUsedLengths is called with _NoChildren=true_ (top-down run).
101	+	* It computes each length, using only the element's and its parents' attributes.
102	+	* Some values can be computed immediately e.g. 'width:100px'
103	+	* Some values are relative:
104	+	* font-size:150% means 150% of parent's font-size, that means it can be computed top-down.
105	+	* line-height:150% means 150% of element's font-size, it can be computed top-down
106	+	* line-height:1.2 must be inherited as '1.2', because it can mean different sizes in descendants, that means distinguish _Computed_ and _Used_
107	+	* Some values can be deducted. E.g. given _left, right_ , it can deduct _width_. Well, it is more complicated due to _min-width_ , _max-width_ , _display_ , _position_ , and _box-sizing_ , but you get the idea.
108	+
109	+	### Layout Final
110	+
111	+	After the top-down traversal, all fixed or relative to fixed lengths are computed.
112	+
113	+	The elements are again traversed top-down, but now the layouters can use child lengths and compute intrinsic sizes recursively. Intrinsic sizes are the width and/or height of the content ignoring the element's min/max-width/height. The intrinsic sizes are cached, so the recursion runs in linear time.
114	+
115	+	After the layout was computed, each TFresnelElement.ComputeCSSLayoutFinished is called.
116	+
117	+	# Flow Layouter
118	+
119	+	* block elements are using a line of their own.
120	+	* each block has a block layouter (TFLBlockLayouter) to calculate min-/max-content ignoring outer floats
121	+	* the flow-root block computes the final layout, including the layout of its non-flow-root child blocks, so float elements affects the inline elements.
122	+	* inline elements are added till a line is full and broken at line breaks. See fragmentation. Each series of inline elements build a pseudo block consisting of line boxes.
123	+	* elements are vertically aligned at the baseline. If an element has no baseline (display: inline flow-root), its bottom is its baseline.
124	+	* vertical padding , border and margin have no layout effect on inline-elements, they effect block and float-elements.
125	+	* horizontal padding , border , margin effect all elements.
126	+	* margin collapse : not yet implemented
127	+	* between blocks
128	+	* child and parent top/bottom-margin collapse if there is no separation (padding, border, block formatting context)
129	+	* empty block: no padding, border and content height 0, then margin-top+bottom collapse
130	+	* Pos and Pos = Max, Pos and Neg = Sum, Neg and Neg = Min
131	+	* left , top , right , bottom have no effect on static elements
132	+	* the static position is the default for the other positions, so it must be always computed
133	+	* width , height have no effect on static inline elements (unless flow-root or overflow)
134	+	* direction : LTR or RTL, start left or right - not yet implemented
135	+	* writing-mode : not yet implemented
136	+	* text-align : align lines horizontally: left , right , start , end , center , justify , match-parent
137	+	* justify : the last line is aligned left or right, depending on direction
138	+	* vertical-align : align inline elements vertically, baseline , sub , super , text-top , text-bottom , middle
139	+	* this effects the baseline of the child elements
140	+	* float : none , left , right , Not yet implemented: inline-start , inline-end , top , bottom
141	+	* removes element from the flow and puts it left or right, making inline elements flow around and following float elements are stacked
142	+	* its content size is computed using MaxWidth of current block ignoring other floats (not trying to fit other floats)
143	+	* clear: : none , left , right. Put block or float element below preceding floats.
144	+	* line-height : positive float, 1=element's font ascent+descent, % allowed, inherited, default: normal (1.2)
145	+	* padding : positive float, % uses container's width even for top and bottom
146	+	* border-width : positive float, no %, only used if border-style is not none
147	+	* margin : float, can be negative, % uses container's width even for top and bottom
148	+	* spans:
149	+	* can spread over multiple lines - fragmentation into line-boxes:
150	+	* all line-boxes get the top and bottom border, only the first box the left border, only the last the right border.
151	+	* the UsedClientBox, UsedBorderBox are the union or hull of the line-boxes.
152	+	* vertical-align changes the baseline of the child elements
153	+	* a span can have position: relative or stick:, the child elements are moved with the span.
154	+
155	+	# Flex Layouter
156	+
157	+	# Grid Layouter
158	+
159	+	---
160	+	From the Free Pascal wiki, page "Fresnel CSS Algorithm", as the Internet Archive kept it on 2026-01-08, last changed on 2025-11-15. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).

Back to history