bi-08 step 01 — mini-browser M7–M9: layout tree and block flow

Goal

Produce geometry from DOM + computed style, and meet the three facts that break the naive model.

Tasks

  1. Layout tree construction. Skip display:none entirely. Synthesise an anonymous box for at least one case (a block-level child inside inline content). Confirm one element ≠ one box.
  2. Block layout: width from the containing block, height from content, margins/padding/border.
  3. Margin collapsing. Implement it, then write down the three rules you had to encode. Note that flex and grid do not collapse — and say why that is an improvement.
  4. Inline layout: line boxes, text measurement, line breaking. Use fixed-width font metrics so it is deterministic.
  5. Basic flex: flex-direction: row, flex-grow, flex-basis.
  6. Logical, not physical. Express your algorithm in inline/block terms from the start. Then run it in RTL and confirm nothing breaks.

Done when

  • Anonymous box created in at least one case
  • Three margin-collapsing rules written down
  • Engine produces correct geometry in RTL without special-casing