How does the layout work?

[konstantinjdobler]

First we create a DOM-Tree from a given HTML document (meaning we have a node for each DIV, SPAN etc and if a DIV has two SPANs inside it, the DIV node will have two SPAN children). Also each node gets a collection of all CSSStyleRules that are relevant for it. This works correctly.

However this is just an abstract representation. We cannot see it. This is done in the next step, were each node goes a graphical representation we can see using Morphs.
However, all inline nodes in one line get pushed together into one single HtmlInlineMorph. (This is something were a possible refactor comes into play). Every Morph we create for a node (or set to nodes) retains an accessor to his node.

When such a Morph is created, he gets a HtmlLayoutStyles object which contains the information relevant for layouting (margin, padding etc). Morphs also have a LayoutPolicy. This LayoutPolicy then uses the information in HtmlLayoutStyles to do a correct layout.