blink渲染知识(二) - webcore rendering basics

Dom tree和Rendertree是独立的tree.

Render tree由renderobject构成，并且renderobject并不和DOMnode一一对应。有些dommode可能没有renderobject.比如有些节点的css属性标记为display:none不显示。

Domtree的节点可以通过renderer()函数得到对应的rendertree中的renderObject节点。

Renderer是通过对domtree的节点执行attach操作创建的。

attach的过程中，计算一个dom节点的cssstyle信息，生成一个RenderStyle对象，并设置到新建立的renderObject里面。

Attach是从上到下的递归过程，从父节点开始。

当一个dom节点从domtree中移除或者document关闭时，需要将对应的renderObjectdestroy掉，这个过程靠dom节点的detach操作完成，detach是从下到上的过程，先把childdetach,然后再detach父节点。Detach也是断开renderer和dom节点关联的过程。

RenderBox继承自RenderObject,但是表示的是遵守cssbox model的renderer.

Css box model:

http://www.w3.org/TR/CSS21/box.html#box-dimensions

renderStyle对象里取得的css属性一般只是初始的css设置，而实际物体的尺寸可能已经动态改变了。

如果有scroolbar,那么scroollbar位于border区域和padding区域之间，属于client区域，但不属于content区域。

Box模型的坐标都是相对父亲的相对坐标

attach的图：

This is the first of a series of posts designed to help peopleinterested in hacking on WebCore’s rendering system. I’ll beposting these articles as I finish them on this blog, and they willalso be available in the documentation section of the Web site.

TheDOM Tree

A Web page is parsed into a tree of nodes called the DocumentObject Model (DOM for short). The base class for all nodes in thetree isNode.

Node.h

Nodes break down into several categories. The node types that arerelevant to the rendering code are:

• Document – The root of the tree is always the document.There are three document classes,Document,HTMLDocument and SVGDocument. The first isused for all XML documents other than SVG documents. The secondapplies only to HTML documents and inherits fromDocument.
  Thethird applies to SVG documents and also inherits from Document.

  Document.h
HTMLDocument.h

• Elements – All of the tags that occur in HTML or XML sourceturn into elements. From a rendering perspective, an element is anode with a tag name that can be used to cast to a specific subclassthat can be queried for data that the renderer needs.

  Element.h

• Text – Raw text that occurs in between elements gets turnedinto text nodes. Text nodes store this raw text, and the render treecan query the node for its character data.

  Text.h

TheRender Tree

At the heart of rendering is the render tree. The render tree isvery similar to the DOM in that it is a tree of objects, where eachobject can correspond to the document, elements or text nodes. Therender tree can also contain additional objects that have nocorresponding DOM node.

The base class of all render tree nodes is RenderObject.

RenderObject.h

The RenderObject for a DOM node can be obtained usingthe renderer() method onNode.

RenderObject* renderer() const

The following methods are most commonly used to walk the rendertree.

RenderObject* firstChild() const;

RenderObject* lastChild() const;

RenderObject* previousSibling() const;

RenderObject* nextSibling() const;

Here is an example of a loop that walks a renderer’s immediatechildren. This is the most common walk that occurs in the render treecode.

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

    ...

}

Creatingthe Render Tree

Renderers are created through a process on the DOM calledattachment. As a document is parsed and DOM nodes are added, amethod calledattach gets called on the DOM nodes to createthe renderers.

void attach()

The attach method computes style information for the DOM node. Ifthe display CSS property for the element is set tononeor if the node is a descendant of an element with display: noneset, then no renderer will be created. The subclass of the node andthe CSS display property value are used together to determine whatkind of renderer to make for the node.

Attach is a top down recursiveoperation. A parent node will always have its renderer createdbefore any of its descendants will have their renderers created.

Destroyingthe Render Tree

Renderers are destroyed when DOM nodes are removed from thedocument or when the document gets torn down (e.g., because thetab/window it was in got closed).Amethod called detachgets called on the DOM nodes to disconnect and destroy the renderers.

void detach()

Detachment is a bottom uprecursive operation. Descendant nodes will always have theirrenderers destroyed before a parent destroys its renderer.

AccessingStyle Information

During attachment the DOM queries CSS to obtain style informationfor an element. The resultant information is stored in an objectcalled aRenderStyle.

RenderStyle.h

Every single CSS property that WebKit supports can be queried viathis object. RenderStyles are reference counted objects. If a DOMnode creates a renderer, then it connects the style information tothat renderer using thesetStyle method on the renderer.

void setStyle(RenderStyle*)

The renderer adds a reference to the style that it will maintainuntil it either gets a new style or gets destroyed.

The RenderStyle can be accessed from a RenderObjectusing thestyle() method.

RenderStyle* style() const

TheCSS Box Model

One of the principal workhorse subclasses of RenderObjectis RenderBox. This subclass represents objects that obeythe CSS box model. These include any objects that have borders,padding, margins, width and height. Right now some objects that donot follow the CSS box model (e.g., SVG objects) still subclass fromRenderBox. This is actually a mistake that will be fixedin the future through refactoring of the render tree.

Thisdiagram from the CSS2.1 spec illustrates the parts of a CSS box.The following methods can be used to obtain the border/margin/paddingwidths.The RenderStyleshould not be used unless the intent is to look at the original rawstyle information, since what is actually computed for theRenderObjectcould be very different (especially for tables, which can overridecell padding and have collapsed borders between cells).

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 givethe width and height of the box including its borders.

int width() const;

int height() const;

The client box is the area of the box excluding borders andscrollbars. Padding is included.

int clientLeft() const { return borderLeft(); }

int clientTop() const { return borderTop(); }

int clientWidth() const;

int clientHeight() const;

The term content box is used to describe the area of theCSS box that excludes the borders and padding.

IntRect contentBox() const;

int contentWidth() const { return clientWidth() - paddingLeft()
- paddingRight(); }

int contentHeight() const { return
clientHeight() - paddingTop() - paddingBottom(); }

When a box has a horizontal orvertical scrollbar, it is placed in between the border and thepadding. A scrollbar’s size is included in the client width andclient height. Scrollbars are not part of the content box. Thesize of the scrollable area and the current scroll position can bothbe obtained from theRenderObject. I will cover this inmore detail in a separate section on scrolling.

int scrollLeft() const;

int scrollTop() const;

int scrollWidth() const;

int scrollHeight() const;

Boxes also have x and ypositions. These positions are relative to the ancestor that isresponsible for deciding where this box should be placed.Thereare numerous exceptions to this rule, however, and this is one of themost confusing areas of the render tree.

int xPos() const;

int yPos() const;