BG2-a3 native on master: gradient layers drawn by Dragon on iOS and Android (supersedes #119)

[thejackshelton]

Requested by Jack · project thread

Before: since #235, gradients and background layers compile for web. iOS and Android refuse every one of them with "the native targets draw gradient layers from BG2-a3 on".

After: on iOS and Android, Dragon rasterises a box's background colour and gradient layers into one premultiplied bitmap, using the translated reference engine (paint-gradient.ts), and draws it in the background-layers paint stage. Gradients that Chrome draws in ways Dragon doesn't model are still refused on native at their background-image: a transformed subtree (R13), a bleed-avoidance layer on rounded boxes, a composited layer (will-change, scroll containers), tiling, and translucent stacks.

This is #119 (BG2-a3) rebuilt on current master as one unstacked PR. It supersedes #119, which is stacked on #110/#99 and was 1241 commits behind. Its source diff was applied with a 3-way merge, without the old generated outputs; regen-on-CI rebuilds them.

Deviations from #119

• R6(b) (a translucent stack under opacity < 1) stays refused. Master has no opacity longhand yet (PNT1). bg2-reference.test.ts counts R6(b) as refused while opacity is not a longhand. Its dormant-plant guard fails on purpose once opacity lands.
• R4 composited layer: BG2-a2 compiler on master: background layer longhands and gradients (supersedes #110) #235's compositesSubtree (will-change transform/opacity) replaces gradientLayerOf, and now also counts overflow: auto | scroll. Master's OVFL-B compiles scroll containers natively, and Chrome scrolls their contents in a layer of its own. The lowering guards on compositesSubtree.
• DragonTree.apply (Swift and Kotlin):
  • Master's REPL-a replaced-content loop and OVFL-B's scroll range/refusal writes are kept beside the gradient shape (lu, padding, rootX).
  • contentWidth moved before the layout loop, as BG2-a3 native: gradient layers drawn by Dragon on iOS and Android (stacked on #110) #119 did.
  • Inline boxes and <br> get zero paddings, because master scopes their style inside a branch. Gradients on inline boxes are refused anyway.
• Paint registries: master's derived plant and write-kind types are kept. GRADIENT_EMITTER declares its two plants in its type.
• Ported subsets:
  • emit/runtime/state.ts: only the background-layers refusal case. Master has no visibility write.
  • device-run.ts: the two gradient plants in PLANT_CASES/PLANT_RULES, and DORMANT_PLANTS. BG2-a3 native: gradient layers drawn by Dragon on iOS and Android (stacked on #110) #119's shadow, opacity, stacking, outline and visibility entries, and PLANT_LANES, are not on master.
  • cli/native-devices.ts: the dormant check uses isPaintPlant, because master has the line plant.
  • fixtures.ts: the gradients group is one sorted GROUPS line.
• pnt1-effects.test.ts is not ported. Its BG2 change extends PNT1's whole-corpus paint-order model, which master doesn't have.

Changed tests and why

• paint-gradient.test.ts:
  • The R13 test's synthetic elements carry will-change: auto and overflow: visible, as every resolved element does.
  • The R4 test now covers scroll containers, and overflow: hidden is not refused.
  • BG2-a3 native: gradient layers drawn by Dragon on iOS and Android (stacked on #110) #119's bleed-layer and R13 tests are unchanged.
• paint-seams.test.ts, device-run.test.ts: master's derived checks are kept; the gradient entries come from the floor files.
• bg2-samples.test.ts: the one PLANT_LANES assertion is removed, because master has no lanes table. plantVerdict still checks device-pixels.
• Floors (paint-seams-floor.json, seams-floor.json): append-only, written with DRAGON_FLOOR_WRITE=1/DRAGON_PIN_WRITE=1.

Self-review fixes (after the port)

• RTL root scroll origin: the root scroller's layer now starts at a whole device px, the ceiling of the overflow's left edge. This is inferred from Chrome's UpdateScrollOrigin flooring the negated offset; I did not re-read the source. It applies on the device and in the host plans. Before this, a fractional origin gave an empty, unmodelled plan, so gradients silently vanished and parity still passed. An unmodelled plan now fails on the device and in backgroundPlans, except when a gradient fault is planted.
• Percentage paddings under an abspos parent: the device's contentWidth now resolves a box's own paddings against its padding basis (Swift and Kotlin), so a child of an absolutely positioned box gets the right content width.
• Tall boxes: the raster is split into strips of at most 16 MiB, instead of one bitmap the size of the border box (an Android drawBitmap crash, and heavy on iOS).
• BG2c, animated colours: on ios and android, an animation of a colour a gradient box bakes into its raster (background-color, color, border colours) is refused. So is a transition a reachable state starts. Covered in paint-gradient.test.ts and animations.test.ts.
• R4 root overflow: the overflow the viewport takes (html's, or a propagating body's) is the root scroller, not a composited layer. PaintCheck now gets the propagated element.
• Not fixed here (low): the RTL "held" model walks DOM ancestors rather than the containing-block chain.

Changed fixtures and why

• gradient-abspos.html: .abs and .abs-icb moved off .flow. bg2-reference was comparing .flow pixels that a later-painted abspos box covers, in LTR and in RTL. Added .abs-wrap > .abs-kid (an abspos wrapper without a background, with a gradient child) to cover the padding fix. bg2-samples.test.ts asserts the child's paddings.

Outside the spec

• packages/dragon/src/analysis/paint-values/gradient.ts (R4 scroll containers, root overflow, animated colours), analysis/paint-values/types.ts and computed-checks.ts (the propagated element), and project.ts (the animated-colour refusal).

R6(b) after #196 (opacity)

PNT1 made opacity a longhand. A translucent gradient stack under opacity below 1 stays refused on ios and android, like any other translucent stack, until a Chrome proof models the group. paint-gradient.test.ts compiles both cases. bg2-reference's dormant-plant guard now reads this refusal instead of opacity's absence.

What passed on ec46ab8 (the current head)

• Regen on CI: run 38068434163 produced ec46ab8. That run regenerated after merging master (ALIAS-2: -webkit-transform, -webkit-transform-origin and the -webkit- corner radii #249, ANIM-b1: a box under half a device px snaps to one px, as Chrome paints it (Blink SnapSizeToPixel) #252) on top of the R6(b) commit.
• pnpm typecheck: pass.
• pnpm -s pr:review 250 --once: exit 0. CI is green, Macroscope was skipped at its spending limit, and no findings are open.
• ci:test-files run 38074447393 (tested ec46ab83a9 at ec46ab83a9):
  • Chrome: bg2-reference 10/10, bg2-samples 9/9, bg2-layers 2/2, bg2-libm 5/5, chrome-ports 13/13, pnt1-radius 13/13, pnt2-plants 2/2, parity registry-claims 8/8.
  • Native: native-backends 12/12, native-backends-strict 1/1, device-run 45/45.
• Locally, platform-free, on the merged tree: animations, overflow, paint-gradient, paint-seams, registry-claims and state-program (111 tests). Earlier on this branch, paint-radius, paint-transform and the anim tests passed too.

🤖 Generated with Claude Code

https://claude.ai/code/session_015DE6siPvWXmHBDwbuC9zxg

---

Generated by Claude Code