A new implementation of CSS layout for Servo. For more information see the Servo Layout Engines Report.

Servo’s original implementation of CSS layout (retronymed layout 2013) achieves fine-grained parallelism through a rigid separation of multi-thread tree traversal from the operations that run on each tree nodes. Some parts of CSS (particularly floats) do not map well to this model, making web-compatibility hard or impossible.

The high level design ideas and goals in no particular order:

• Don’t gratuitously make code deviate from CSS specs in terms of structure or terminology.

• Mostly “classic” imperative code style with recursive tree traversals.

• Prefer Rust enums over inheritance or dynamic dispatch. Try to model in the Rust type system what tree structures are possible or impossible in CSS. (For example: direct children of an inline box are all inline-level boxes.)

• Don’t mandate parallelism at every level of the tree(s), opportunistically parallelize some loops with rayon. This is hopefully enough to usually saturate available cores and maintain speedups. When floats are involved, disable parallelism for that block formatting context and pass around an Option<&mut FloatContext>. Parallelism can be resumed within inner formatting contexts, if any.

• Separate the box tree from the fragment tree (as defined in CSS specs). Make their nodes atomically-reference-counted, and mostly immutable. (AtomicRefCell or similar is still acceptable, to consider on a case-by-case basis.) Make them persistent: incremental updates (e.g. after the DOM changed) are done by making new nodes are re-using unchanged sub-trees. Consider im’s Vector over Vec for the (direct) children of a given node, to reduce the cost of replacing just one in case there are many.

• Write new tests for WPT while writing new code, if we find that that code isn’t well covered already.

The style crate is used by three different layout “engines”: gecko (Firefox), servo-2013, and servo-2020. It has a single rough mechanism that causes a property not to be parsed which involves putting a property behind a run-time preference. A pref can be useful to land a partial implementation of a feature, or one whose specification is not stable enough yet.

Layout 2020 started out by disabling (almost) every property, and now is progressively enabling them as corresponding layout support is added. So when working on a new feature, before tests start doing anything interesting you will likely need to find some property declaration(s) in .mako.rs files under components/style/ and remove a servo_pref="layout.legacy_layout line.

• Basic rendering
• Font selection and fallback: consider Skribo + font-kit
• Better shaping through more correct use of Harfbuzz
• Maybe evaluate YesLogic’s allsorts as an alternative to HarfBuzz?
• @font-face
• Bidi
• Vertical text

• Constructing boxes from the DOM
  • display: none
  • display: contents
  • Abstracting ::before and ::after pseudo-elements v.s. DOM elements
• Basic box model: margins, borders, padding
• min/max-width/height
• Intrinsic sizing
• Writing modes
  • Write layout code in flow-relative directions and dimensions instead of physical
  • Orthogonal flows
• Fragmentation
  • Simple(r) cases where a break is at a single point of the tree
  • Parallel flows
• Paint ordering, z-index, and stacking contexts
• Flow layout (a.k.a. blocks and inlines)
  • Construct anonymous block boxes as needed
  • Block-in-inline splits
  • Basic flow and line breaking
  • Better handling of line break opportunities
  • (Control for) white-space collapsing
  • Baselines and vertical-align
  • Inline-level independent formatting contexts such as inline-block
  • Margin collapsing
  • [-] Floats and clearing
• position: absolute
• position: fixed
• Generated content (::before, ::after, display: list-item, …)
  • Counters and ordered lists
  • Quotes
• Replaced elements/boxes (such as <img>)
  • Layout support (sizing is different)
  • Construct replaced boxes for <img>
  • For other HTML element types as appropriate
• Tables
• Multicol
• [-] Flexbox
• Grid
• Transforms
• Transitions and animations