How webkit does attachment
-
wrote on 5 Sept 2012, 11:23 last edited by
Hello All,
I'm not sure if this is the appropriate forum to post this in, however I'm looking for some conceptual assistance about how webkit does dom to renderer attachment. I've been actively developing a HTML Parser/Renderer in 100% lua code for a well known 2d game engine "Love2d":https://love2d.org/. The project is called LURE (Love UI Rendering Engine) and my project page can be found here:
"LURE Project Page":https://love2d.org/wiki/lure
I've read through articles such as "How Browsers Work":http://taligarsiel.com/Projects/howbrowserswork1.htm#Render_tree_construction and other resources such as webkit source, but I'm having specific trouble during my render tree construction phase. I've tried working with both gecko and webkit render tree construction methods in which either:
1.) (gecko) Render tree construction is done after the dom tree has been built via a dom parser class (FrameConstructor) that builds the render tree by parsing the completed dom, or
2.) (webkit) Render tree construction is done synchronously with dom tree construction via .attach() methods which creates new renderers passing in dom computed style data etc.I've settled on trying to make the webkit method work. However, Regardless of the method used, I'm having specific trouble on how to handle attachment of multiple sequential inline or inline-block elements from the DOM tree. Example of a DOM tree:
@
<html>
<head>
<style>
.inline{ display:inline-block; }
</style>
</head>
<body>
<div>I'm a block element</div>
<div class="inline">I'm a inline-block element</div>
<div class="inline">I'm a inline-block element</div>
</body>
</html>
@Conceptually, both inline-block divs should be wrapped within an anonymous block renderer as the parent <body> element renderer cannot contain both block and inline/inline-block elements. When I use the webkit style .attach() methods, during DOM tree construction both inline-block divs get wrapped in their own anonymous block renderer as so (Note: does not represent line box construction):
@
BlockRenderer:html
BlockRenderer:body
BlockRenderer:div</BlockRenderer:div>
BlockRenderer:anonymous
InlineBlockRenderer:div</InlineBlockRenderer:div>
</BlockRenderer:anonymous>
BlockRenderer:anonymous
InlineBlockRenderer:div</InlineBlockRenderer:div>
</BlockRenderer:anonymous>
</BlockRenderer:body>
</BlockRenderer:html>
@My question is, how does webkit handle grouping multiple sequential inline/inline-block elements into their appropriate anonymous block containers? When the first inline-block div is attached, the DOM does not yet have in its tree the second inline-block div so how would it know to place the second inline-block div into the prior created anonymous block container?
I hope I have explained this well enough. Any help or external resources are appreciated. Thanks!
1/1