Servo's style system overview
This document provides an overview of Servo's style system. For more extensive details, refer to the style doc comments, or the Styling Overview in the wiki, which includes a conversation between Boris Zbarsky and Patrick Walton about how style sharing works.
Selector Implementation
To ensure compatibility with Stylo (a project integrating Servo's style system into Gecko), selectors must be consistent.
The consistency is implemented in selectors' SelectorImpl, containing the logic related to parsing pseudo-elements and other pseudo-classes apart from tree-structural ones.
Servo extends the selector implementation trait in order to allow a few more things to be shared between Stylo and Servo.
The main Servo implementation (the one that is used in regular builds) is SelectorImpl.
DOM glue
In order to keep DOM, layout and style in different modules, there are a few traits involved.
Style's dom traits (TDocument, TElement, TNode, TRestyleDamage) are the main "wall" between layout and style.
Layout's wrapper module makes sure that layout traits have the required traits implemented.
The Stylist
The stylist structure holds all the selectors and device characteristics for a given document.
The stylesheets' CSS rules are converted into Rules.
They are then introduced in a SelectorMap depending on the pseudo-element (see PerPseudoElementSelectorMap), stylesheet origin (see PerOriginSelectorMap), and priority (see the normal and important fields in PerOriginSelectorMap).
This structure is effectively created once per pipeline, in the corresponding LayoutThread.
The properties module
The properties module is a mako template.
Its complexity is derived from the code that stores properties, cascade function and computation logic of the returned value which is exposed in the main function.
Pseudo-Element resolution
Pseudo-elements are a tricky section of the style system. Not all pseudo-elements are very common, and so some of them might want to skip the cascade.
Servo has, as of right now, five pseudo-elements:
::beforeand::after.::selection: This one is only partially implemented, and only works for text inputs and textareas as of right now.::-servo-details-summary: This pseudo-element represents the<summary>of a<details>element.::-servo-details-content: This pseudo-element represents the contents of a<details>element.
Both ::-servo-details-* pseudo-elements are private (i.e. they are only parsed from User-Agent stylesheets).
Servo has three different ways of cascading a pseudo-element, which are defined in PseudoElementCascadeType:
"Eager" cascading
This mode computes the computed values of a given node's pseudo-element over the first pass of the style system.
This is used for all public pseudo-elements, and is, as of right now, the only way a public pseudo-element should be cascaded (the explanation for this is below).
"Precomputed" cascading
Or, better said, no cascading at all. A pseudo-element marked as such is not cascaded.
The only rules that apply to the styles of that pseudo-element are universal rules (rules with a *|* selector), and they are applied directly over the element's style if present.
::-servo-details-content is an example of this kind of pseudo-element, all the rules in the UA stylesheet with the selector *|*::-servo-details-content (and only those) are evaluated over the element's style (except the display value, that is overwritten by layout).
This should be the preferred type for private pseudo-elements (although some of them might need selectors, see below).
"Lazy" cascading
Lazy cascading allows to compute pseudo-element styles lazily, that is, just when needed.
Currently (for Servo, not that much for stylo), selectors supported for this kind of pseudo-elements are only a subset of selectors that can be matched on the layout tree, which does not hold all data from the DOM tree.
This subset includes tags and attribute selectors, enough for making ::-servo-details-summary a lazy pseudo-element (that only needs to know if it is in an open details element or not).
Since no other selectors would apply to it, this is (at least for now) not an acceptable type for public pseudo-elements, but should be considered for private pseudo-elements.