One of WebCore rendering: Basics

(Reproduced from: http://www.cnblogs.com/jz1108/archive/2012/07/02/2573045.html)

 

Document Tree

The webpage is parsed into a tree structure containing several nodes, that is, the Document Object Model (DOM ). The base class of all nodes in the tree is node.

Node. h

Nodes are divided into several types. Node types related to rendering Code include:

• Document: the root node of the tree is a document. There are three document-related classes: Document, htmldocument, and svgdocument. The first one is used to represent all XML documents except SVG documents. The second is inherited from the document, which only indicates the HTML document. The third part is also inherited from document, which is used to represent SVG documents (involving document. h and htmldocument. h ).
• Elements: tags in HTML or XML code will eventually become elements. From the rendering perspective, an element is a node with a tag name. It can be converted to a specific subclass during rendering to obtain its data. (Involved: element. h)
• Text: plain text between elements is converted into a text node. The text node stores plain text information. The rendering tree can use it to obtain data (involving text. h ).

 

Rendering tree

The rendering tree is the core of the rendering process. The rendering tree is similar to the DOM tree and is a tree structure. Each element in the tree can correspond to a document, element, or text node. The rendering tree can also contain nodes not in the DOM tree.

The base class of the rendering Tree node is renderobject.

Renderobject. h

The renderobject object corresponding to the DOM node can be obtained through the node Renderer () method.

RenderObject* renderer() const

The following methods are most commonly used to traverse a rendering tree:

RenderObject* firstChild() const;RenderObject* lastChild() const;RenderObject* previousSibling() const;RenderObject* nextSibling() const;

In the following example, we cyclically access the subnode of a rendering node. This is common in rendering tree code.

for (RenderObject* child = firstChild(); child; child = child->nextSibling()) {    ...}

Create a rendering tree

The rendering node is created through a process called attachment. As the document is parsed and DOM nodes are added, a method called attach is called by DOM nodes to create each rendering node.

void attach()

The attach method calculates the style information for DOM nodes. If the display attribute of element CSS is none, or the element is a child element of an element whose display is none, the rendering node will not be created. The subclass related to the node and the display attribute of CSS determine the rendering node to be created.

Attach is a top-down recursive process. The creation of a rendering node of a parent node is always earlier than that of its child node.

Destroy rendering tree

When the DOM node is removed or the entire document is destroyed (for example, the page is closed), the rendering node is destroyed. The detach method of the DOM node is called to destroy the rendering node.

void detach()

Detach is a bottom-up recursive operation. The rendering node of the child node is destroyed before its parent node.

Get style information

In the attach process, Dom obtains the element style information through CSS. The result is stored in the renderstyle object.

Renderstyle. h

Each CSS attribute supported by WebKit can be queried through this object. The renderstyles object is a reference counting object. If a DOM node creates a rendering node, it calls the setstyle method of the rendering node to associate the style information with it.

void setStyle(RenderStyle*)

The rendering node adds a reference to the style object. This reference will be maintained until the node obtains a new style or is destroyed.

Renderstyle can be obtained through the style () method of renderobject.

RenderStyle* style() const

CSS Box Model

A main subclass of renderobject is renderbox, which indicates the objects following the CSS box model. These objects have their own border (Border), padding (padding), and margin (margin) width (width) and height (height ). But now some objects that do not follow the CSS box model also inherit from renderbox (for example, SVG objects ). This problem will be fixed in the reconstruction of the rendering tree.

The following figure in the CSS 2.1 Standard describes each part of the CSS box model. The following method can be used to obtain the border and internal and external margins. Renderstyle is only used to obtain original style information, because the calculation result of renderobject is very different (especially for table elements, it can overwrite the padding attribute of cells, border between tables can also be overlapped ).

int marginTop() const;int marginBottom() const;int marginLeft() const;int marginRight() const;int paddingTop() const;int paddingBottom() const;int paddingLeft() const;int paddingRight() const;int borderTop() const;int borderBottom() const;int borderLeft() const;int borderRight() const;

The width () and height () methods give the width and height (including the border ).

int width() const;int height() const;

The client box contains the border and scroll bar, And the padding also includes:

int clientLeft() const { return borderLeft(); }int clientTop() const { return borderTop(); }int clientWidth() const;int clientHeight() const;

Content box is used to describe CSS boxes that do not contain border and padding:

IntRect contentBox() const;int contentWidth() const { return clientWidth() - paddingLeft() - paddingRight(); }int contentHeight() const { return clientHeight() - paddingTop() - paddingBottom(); }

When a scroll bar appears in the box, it is placed between border and padding. The size of the scroll bar is included in client width and client height. The scroll bar is not included in the content box. The size of the scroll bar and the current scroll position can be obtained through renderobject. This issue will be further elaborated in separate chapters.

int scrollLeft() const;int scrollTop() const;int scrollWidth() const;int scrollHeight() const;

The box also has the location attribute of X and Y. These positions are relative to the parent element of the element. The parent element determines where the box should be placed. This rule has many exceptions, which are the most confusing part of the rendering tree.

int xPos() const;int yPos() const;