Execution — bi-08-layout

Steps extracted from CONCEPTS.md. Read the concepts first; this file is the doing.

Record results in observation.md; tick checkpoints in verification.md.

6. Lab — mini-browser M7–M9

Input: DOM + computed style (from bi-07). Output: layout tree + geometry.

  1. Layout tree construction: skip display:none, synthesise an anonymous box for at least one case.
  2. Block layout: width from containing block, height from content, margins/padding/border.
  3. Nested boxes and margin behaviour. Implement margin collapsing, then write down the three rules you had to encode.
  4. Inline layout: line boxes, text measurement, line breaking. Use a fixed-width font metric so it is deterministic.
  5. Basic flex: flex-direction: row, flex-grow, flex-basis.
  6. Intrinsic sizing: implement max-content for a subtree. Observe that you now need a second pass.
  7. Dirty-layout tracking + result caching. Give each box a constraint-space-equivalent key; skip relayout when the key is unchanged. Measure the hit rate on a resize.

Deliverable: a measurement of stage 7's cache hit rate under (a) a window resize, (b) a single deep text change, and a written explanation of why the two differ so much.

7. Failure Lab

  1. Forced synchronous layout. Build the read/write loop. Measure at n = 100/1000/5000 and plot. Then batch and re-measure. Name the complexity class of each.
  2. Break the cache key. Make your constraint-space key omit one input (say, available inline size). Find markup that now renders wrong. This demonstrates precisely why caching requires complete inputs.
  3. Mutate a fragment after publishing it. Show a downstream consumer reading stale or inconsistent geometry. This is the bug immutability prevents.
  4. Physical-thinking bug. Hard-code left/right somewhere, then run your engine in RTL.

8. Debugging Exercise

  1. In DevTools, find layout events for a forced synchronous layout; confirm the count matches your loop's iterations.
  2. Construct two DOM changes with the same visual result, one triggering layout and one not. Explain by property.
  3. In the checkout, find where a cached layout result is reused, and the exact condition under which it is not. Write the condition in one English sentence.
  4. Find an anonymous box being created. What invariant made it necessary?