Layout 2013 and Layout 2020

Servo currently has two independent layout engines, known as Layout 2013 and Layout 2020, which are named after when they began development. Layout 2020 was designed to fix several shortcomings in Layout 2013, but it’s not yet enabled by default, and this raises the question: which layout engine should Servo use going forward?

To answer this question, we analysed the two layout engines and found differences in:

• their approaches to parallelism
• the ways they manage trees of boxes and fragments
• their relationships with WebRender
• the degrees to which their architectures reflect CSS specs
• the completeness of their implementations of CSS features
• the difficulty in supporting complex features like floats

For more details, check out our report, but in short, we believe Layout 2020 is the best layout engine for Servo going forward.

To give us more confidence in this choice with some practical experience, we’ve started implementing some smaller features in Layout 2020, like <iframe>, min/max width and height, sticky positioning, and ‘text-indent’. We will also start building and testing Layout 2020 (as well as Layout 2013) on CI in the near future.

We will continue to maintain Layout 2013 for now, but we hope that completing many of these features, plus some more complex ones like counters and vertical writing modes, will give us the experience we need to decide whether we want to commit to Layout 2020 and remove Layout 2013 from the tree.

We would love to have you with us on this journey, and we hope that after this transition period, together we can tackle the most challenging parts of Servo’s CSS2 story, like floats and incremental layout!