Execution — bi-09-paint

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 M10–M11

  1. Display list. Walk your layout tree in paint order and emit display items ({type, rect, color, …}). Do not draw yet.
  2. Stacking contexts. Implement z-index and at least one property that creates a stacking context. Prove ordering with a test case that changes when you remove the stacking-context rule.
  3. Property trees. Add a transform tree. Represent a translated subtree as a node reference rather than by baking coordinates into items.
  4. Raster. Draw the display list to a canvas.
  5. The payoff experiment. Animate a subtree two ways: (a) by changing layout position and re-recording, (b) by changing only a transform node. Measure both. Report how much of the pipeline each skips.
  6. Hit testing. Implement reverse-paint-order hit testing and find a case where it disagrees with DOM order.

Deliverable: the stage-5 measurement, plus a written statement of exactly which stages were skipped in case (b) and why they could be skipped.

7. Failure Lab

  1. Bake transforms into display items. Re-run the stage-5 experiment. Show that the cheap path is now impossible. This is the strongest possible argument for property trees.
  2. Break paint order. Paint in DOM order instead. Find markup that renders wrong.
  3. Invalidate too little. Skip paint invalidation for a property that needs it; produce a stale-pixels bug.
  4. Layer explosion. Put will-change: transform on 5,000 elements. Measure memory. Explain why the "optimisation" lost.

8. Debugging Exercise

  1. DevTools: enable paint flashing and layer borders. Find one change that repaints and one that does not.
  2. Compare a top-animated element with a transform-animated one in a Perfetto trace. Name the stages present in one and absent in the other.
  3. Find a hit-test bug you can only explain via stacking contexts.
  4. In the checkout, find where a property-tree-only change avoids repaint. Quote the condition.