WebKit kernel source code guide 5: How CSS works on the render tree

The purpose of this chapter is to mainly describe the CSS-related classes and relationships, and cannot explore their processes and principles. We will discuss it later.

CSS is mainly used to modify the appearance and layout of Dom. It must be combined with the rendering object of render-dom.

In render, an important object is renderstyle. This renderstyle is created from CSS.

Renderstyle and styleresolver

Renderstyle saves all the information required for rendering the render tree. As for how the render tree uses render, we will not carefully explore it here. I would like to focus on exploring styleresolver.

Styleresolver converts CSS content to renderstyle. Several functions are important:

    PassRefPtr<RenderStyle> styleForElement(Element*, RenderStyle* parentStyle = 0, StyleSharingBehavior = AllowStyleSharing,        RuleMatchingBehavior = MatchAllRules, RenderRegion* regionForStyling = 0);      ......    PassRefPtr<RenderStyle> pseudoStyleForElement(PseudoId, Element*, RenderStyle* parentStyle);    PassRefPtr<RenderStyle> styleForPage(int pageIndex);    PassRefPtr<RenderStyle> defaultStyleForElement();    PassRefPtr<RenderStyle> styleForText(Text*);    static PassRefPtr<RenderStyle> styleForDocument(Document*, CSSFontSelector* = 0); 

Here are a fewStyleforxxxFunction is an important part of renderstyle generation.

Relationship between styleresolver

Styleresolver is the sub-object of document. Document is responsible for creating it. To use styleresolver for other data, you need to callDocument ()-> styleresolver ();

In document. H (class document)

    StyleResolver* styleResolver()    {        if (!m_styleResolver)            createStyleResolver();        return m_styleResolver.get();    }

Styleforxxx series functions of styleresolver are called in different places. For example, styleforelement is called in element: styleforrender, while element: styleforrender is called in recalcstyle (including document: recalcstyle and element: recalcstyle.

The recalcstyle function is called when CSS changes. For example, document: updatestyleifneeded. Because there are many calls, we will not list them one by one. Only need to understand: When the style changes, it will cause recalcstyle

Styleforelement: CSS selection and matching

Go back to styleresolver and check styleforelement. Let's see how the CSS selector works.

Code snippet of styleforelement

// Temporarily Save the elements in the styleresolver class 1534 1535 initelement (element); 1536 initforstyleresolve (element, defaultparent );.... // perform rule match 1570 matchresult; 1571 if (matchingbehavior = matchonlyuseragentrules) 1572 matchuarules (matchresult); 1573 else1574 matchallrules (matchresult, matchingbehavior! = Matchallrulesexcludingsmil); 1575 // map the obtained rule to 1576 applymatchedproperties (matchresult, element) in renderstyle );

The key functions for selection and matching are as follows:Matchuarules and matchallrulesOf the two functions.

The key here is the function.Matchuarules. This function has two reloads. The following is the final implementation.

 825 void StyleResolver::matchUARules(MatchResult& result, RuleSet* rules) 826 {    827     m_matchedRules.clear(); 828      829     result.ranges.lastUARule = result.matchedProperties.size() - 1; 830     collectMatchingRules(rules, result.ranges.firstUARule, result.ranges.lastUARule, false); 831          832     sortAndTransferMatchedRules(result); 833 }   

Note FunctionsCollectmatchrulesAndSortandtransfermatchedrules. These two functions are used to collect the selected rules and sort the rules.

So what is ruleset?

Ruleset represents a CSS rule. CSS rules include CSS selection and CSS description. For example

p { background : red; }

This is a ruleset.

In the ruleset definition, several member variables are worth reading:

class RuleSet ... {.....132     AtomRuleMap m_idRules;133     AtomRuleMap m_classRules;134     AtomRuleMap m_tagRules;135     AtomRuleMap m_shadowPseudoElementRules;...};

Obviously, these items correspond to the css id, class, tag and so on. These selection items are most frequently used. Therefore, WebKit has optimized them separately.

SoCollectmatchrulesIt is not hard to achieve. The specific implementation is not described in detail.

ForSortandtransfermatchedrulesSort the obtained ruleset to ensure the correct matching order. Otherwise, CSS display errors may occur. It is sorted according to the standard document of CSS, which will be considered in detail later.

Ruleset Source

Ruleset has many sources, including the default ruleset, which are defined by the browser. The ruleset of author, which is defined by the author of the web page. For elements, there are also rules from the element itself.

Ruleset source of Element

Ruleset can be provided only for elements inherited from styledelement. These are the so-called inline CSS, such,

<p background="red"> ...<p style="background:red;">...

CSS in this form.

This type of CSS is generated inStyledelement: rebuildpresentationattributestyle. This function is called after attributedata of element changes. We can see how this function generates the CSS ruleset:

void StyledElement::rebuildPresentationAttributeStyle(){.....    RefPtr<StylePropertySet> style;    if (cacheHash && cacheIterator->value) {        style = cacheIterator->value->value;        presentationAttributeCacheCleaner().didHitPresentationAttributeCache();    } else {        style = StylePropertySet::create(isSVGElement() ? SVGAttributeMode : CSSQuirksMode);        unsigned size = attributeCount();        for (unsigned i = 0; i < size; ++i) {            const Attribute* attribute = attributeItem(i);            collectStyleForPresentationAttribute(*attribute, style.get());        }    }    // ImmutableElementAttributeData doesn't store presentation attribute style, so make sure we have a MutableElementAttributeData.    ElementAttributeData* attributeData = mutableAttributeData();    attributeData->m_presentationAttributeStyleIsDirty = false;    attributeData->setPresentationAttributeStyle(style->isEmpty() ? 0 : style);....

Please note:CollectstyleforpresentationattributeFunctions andAttributedata-> setprosentationattributestyleTwo functions.

CollectstyleforpresentationattributeA function is a virtual function and must be implemented by the quilt class. Subclass must determine which attributes are style attributes and generate their values as styleproperty objects.

Attributedata is the object for storing the attribute of the element. This object is elementattributedata.

This class uses some tips to save memory, which requires attention during reading.

Styleresolver calls the styledelement: presentationattributestyle-> elementattributedata: presentationattributestyle () function to obtain the above setprosentationattributestyle result.

Source of authorstyle

Styleresolver: m_authorstyle saves the style related to the current webpage. All style elements and CSS introduced by link elements are saved here.

So how does it do it? It comes fromDocument: styleresolverchangedFunction. This function is called in many places. When CSS changes or page size changes, the function is triggered.

The call sequence is:

Document: styleresolverchanged-> documentstylesheetcollection: updateactivestylesheets-> styleresolver: appendauthorstylesheets

At this point, the CSS Parsing is basically complete.