The Adobe Web Platform Team has some features and specifications that we focus on implementing in WebKit, but we also like to contribute to the quality of the project as a whole. To this end, we often work on bug fixes for things that are not related to one of our features. Not only is this a good way to contribute to the project in a more general way, it also is an excellent way to get broader experience with the code.
As part of these efforts, I recently fixed Bug 101879. This bug was filed by a user who discovered that WebKit didn’t correctly implement the CSS 3 UI text-overflow property when a block contained a mixture of inline content and block content. Specifically, it fails to render one of the examples from the specification properly:
The correct rendering is as follows:
If you want to know how your browser fares, you can go to the
text-overflow section of the specification and scroll down a little to find the table with this example and others.
It turns out this happens because a block element can only contain either all inline content or all block content, so when the block contains both inline and block content, WebKit creates anonymous blocks to contain the inline content. (Anonymous block creation is explained in Section 22.214.171.124 Anonymous block boxes of the CSS 2.1 spec) Since the value of the
text-overflow property is not inherited by child blocks by default, it was getting lost when laying out the text in the anonymous blocks. I changed the code to check for a block parent that has
text-overflow set when laying out the content in an anonymous block, and use that value to determine if the inline content overflow in the anonymous block should get an ellipsis or not.
So that’s the short story of this one bug. If you’ve been having some issues with ellipsis in WebKit, this is good news for you. If you have some other bug that’s been bothering you, perhaps you should take a look at the code: you might find it easier than you expect to get started and fix a bug. If you think that sounds interesting, you should check out my post on Getting Started with the WebKit Layout Code.