Fresnel CSS Algorithm: what changed

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

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