An Esoteric Pile of Nonsense

Today I had the idea to download the source for Google Chrome and browse through some of the WebKit rendering and CSS code. Like Firefox browser, Chrome is open source, and you can download the code here. If you are so inclined, you can also compile your own version of Chrome. It's written in C++, so you need a C++ compiler and a number of other tools (e.g. Python and Perl scripting languages, bison build system, and a number of libraries) installed in order to build it. Instructions for Linux are here, and for Windows look here.

The reason you might want to recompile your own version of the browser code is to make custom changes which is what I'm going to be doing: logging messages in the rendering code to produce a trace of what it is doing. I saw a very strange behaviour the other day with a table scroll and I think it will help me to look at what the browser code is doing behind the scenes.

Chrome uses the WebKit browser engine, which handles things like networking, HTTP headers, parsing of HTML and CSS, the DOM tree, and of course rendering the page. Apple's browser, Safari, is also based on WebKit. The image you see below represents some of the Webkit software modules. The ones I was interested in, CSS and rendering, are shown towards the bottom of the image, highlighted in pink. I post a cropped version of the image below, you can view the Webkit Webcore Subsystem here.

The CSS module is the part of the Browser that looks at the CSS you write, parsing each statement and building internal data structures to represent it. Likewise there is an HTML module that does the same for the page's HTML. The rendering module processes the HTML and CSS internal data structures, figuring out how and where each element should be displayed on the page.



Just browsing around in the rendering code I came across this function:

void RenderBlock::layoutInlineChildren(bool relayoutChildren, 
     int& repaintTop, int& repaintBottom)
{
    bool useRepaintBounds = false;
    m_overflow.clear();        
    setHeight(borderTop() + paddingTop());
    ...

Which had a funny comment within it regarding CSS3:

// FIXME: CSS3 says that descendants that are clipped must also know how to truncate.  
    // This is insanely difficult to figure out (especially in the middle of doing layout), 
    // and is really an esoteric pile of nonsense anyway, so we won't worry about following 
    // the draft here.
    bool hasTextOverflow = style()->textOverflow() && hasOverflowClip();

I guess that's one place where Chrome and Safari are definitely not CSS3 compliant. :)