WebCore rendering I-the basics

WebCore rendering I-the basics

PostedDave HyattOn Wednesday, August 8th, 2007 at pm

This is the first of a series of posts designed to help people interested in hacking on WebCore's rendering system. i'll be posting these articles as I finish them on this blog, and they will also be available in the documentation section of the web site.

The DOM tree

A web page is parsed into a tree of nodes called the Document Object Model (dom for short). The base class for all nodes in the tree isNode.

Node.h

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

• Document-the root of the tree is always the document. There are three document classes,Document,HTMLDocumentAndSVGDocument. The first is used for all XML documents ents other than SVG documents ENTs. The second applies only to HTML documents ents and inherits fromDocument.
  The third applies to SVG documents and also inherits fromDocument.

   

  Document.h
HTMLDocument.h

• Elements-all of the tags that occur in HTML or XML source turn into elements. from a rendering perspective, an element is a node with a tag name that can be used to cast to a specific subclass that can be queried for data that the Renderer needs.

  Element.h

• Text-raw text that occurs in between elements gets turned into text nodes. text nodes store this raw text, and the render tree can query the node for its character data.

  Text.h

The render tree

At the heart of rendering is the render tree. the render tree is very similar to the DOM in that it is a tree of objects, where each object can correspond to the document, elements or text nodes. the render tree can also contain additional objects that have no corresponding Dom node.

The base class of all render Tree nodes isRenderObject.

RenderObject.h


TheRenderObjectFor a DOM node can be obtained usingrenderer()Method onNode.

RenderObject* renderer() const

The following methods are most commonly used to walk the render tree.

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

Here is an example of a loop that walks a Renderer's immediate children. This is the most common walk that occurs in the render tree code.

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

Creating the render tree

Renderers are created through a process on the Dom calledAttachment. As a document is parsed and DOM nodes are added, a method calledAttachGets called on the DOM nodes to create the renderers.

void attach()

The attach method computes style information for the DOM node. IfDisplayCSS property for the element is setNoneOr if the node is a descendant of an elementDisplay: NoneSet, then no Renderer will be created. The subclass of the node and the CSS display property value are used together to determine what kind of Renderer to make for the node.

Attach is a top down recursive operation. A parent node will always have its Renderer created before any of its descendants will have their renderers created.

Destroying the render tree

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

void detach()

Detachment is a bottom up recursive operation. Descendant nodes will always have their renderers destroyed before a parent destroys its Renderer.

Accessing style information

During attachment the DOM queries CSS to obtain style information for an element. The resultant information is stored in an object calledRenderstyle.

RenderStyle.h

Every single CSS property that WebKit supports can be queried via this object. renderstyles are reference counted objects. If a DOM node creates a Renderer, then it connects the style information to that Renderer usingSetstyleMethod on the Renderer.

void setStyle(RenderStyle*)

The Renderer adds a reference to the style that it will maintain until it either gets a new style or gets destroyed.

TheRenderStyleCan be accessed fromRenderObjectUsingstyle()Method.

RenderStyle* style() const

The CSS Box Model

One of the principal workhorse subclassesRenderObjectIsRenderBox. This subclass represents objects that obey the CSS box model. these include any objects that have borders, padding, margins, width and height. right now some objects that do not follow the CSS box model (e.g ., SVG objects) still subclass fromRenderBox. This is actually a mistake that will be fixed in the future through refactoring of the render tree.

This digoal from the css2.1 spec extends strates the parts of a CSS box. The following methods can be used to obtain the border/margin/padding widths.RenderStyleShocould not be used unless the intent is to look at the original raw style information, since what is actually computed forRenderObjectCocould be very different (especially for tables, which can override cell 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;

Thewidth()Andheight()Methods Give the width and height of the box including its borders.

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

TheClient boxIs the area of the box excluding borders and scrollbars. Padding is already ded.

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

The termContent boxIs used to describe the area of the CSS 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 or vertical scrollbar, it is placed in between the border and the padding. a scrollbar's size is wrongly ded in the client width and client height. scrollbars are not part of the content box. the size of the scrollable area and the current scroll position can both be obtained fromRenderObject. I will cover this in more detail in a separate section on scrolling.

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

Boxes also have x and y positions. these positions are relative to the ancestor that is responsible for deciding where this box shoshould be placed. there are numerous exceptions to this rule, however, and this is one of the most confusing areas of the render tree.

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