PNT1-radius: border-radius, its corner longhands and -webkit-border-radius drawn natively on iOS and Android (supersedes #80, #81)

[thejackshelton]

PNT1-radius (coverage-rank lane 4): border-radius, its four corner longhands and -webkit-border-radius, parsed and computed as Chrome 145 does and drawn by Dragon on iOS and Android.

Supersedes #80 and #81 (PNT1 1-2/8). Those were stacked and 820 commits behind master. This PR carries their radius content onto current origin/master as one branch, adapted to master's per-feature registries. Nothing here is stacked: the base is master.

The branch is pnt1-radius-native. The name pnt1-radius is still #81's head branch, and reusing it would need a force-push over #81.

What changed

Engine (from #80, radius half only)

• packages/layout/src/paint-radius.ts: border-radius geometry as Blink 145 paints it.
  • CalcRadiiFor against the layout border box.
  • gfx::SizeF's clamp, then ConstrainRadii.
  • The padding-edge radii.
• Its suite, layout/test/paint-radius.test.ts, and its harness cases (paint:radius:* in translate/harness/harness.ts).
• Its vector inputs come from scripts/gen-paint-inputs-radius.ts. That is a new regen step in scripts/regen-steps/pnt1.ts, placed before paint-vectors, with its .gitattributes line.
• docs/ports.json registers the cited contoured_border_geometry.cc range (PixelSnappedContouredBorder) and the box_border_painter.cc reference.
• Host plumbing:
  • the expected dump's PaintEngine (roundedShape);
  • the layout border-box size in NodeGeometry and SampleBox.

Compiler and native (from #81)

• The radius family and the paint value hook. css/properties/radius.ts, shorthands/radius.ts and css/paint-parsers.ts are called from stylesheet.ts and do Chrome's checks beyond the grammar:
  • a negative radius is invalid;
  • a calculation, a viewport unit and a font-metric unit are refused.
• Computed values in analysis/paint-values/radius.ts:
  • em and rem become px;
  • percentages are kept;
  • a corner with two equal components is written as one value.
• One border-radius write per rounded box (lower/paint/radius.ts), with radius facts.
• The emitter (emit/paint/radius.ts) on both backends:
  • dragonSetRadii;
  • a rounded border-box path from the translated paint-radius.ts, through the roundedPath hook;
  • the rounded overflow clip.
• A rounded box paints its own background colour in the background stage (emit/paint/background.ts), and draws solid borders between the rounded outer and inner paths, using Blink's edge quads (emit/paint/border.ts).
• The radius-square raster plant. Its PLANT_CASES entry is radius-basic and its PLANT_RULES entry is radius:.
• animation-kinds/radius.ts: the corners interpolate in Chrome, so they are UNADMITTED (there is no state writer yet).

New in this PR

• -webkit-border-radius is a radius-family shorthand with Chrome's legacy parsing (ConsumeRadii with use_legacy_parsing): exactly two values and no / mean one horizontal and one vertical radius for every corner. ALIAS (ALIAS: legacy -webkit- aliases of supported properties resolve as in Chrome (44 aliases) #172) leaves this alias to the radius lane. The per-corner -webkit-border-*-radius aliases are plain alias_for entries, so they can join ALIAS's registry once this lands.
• The native targets refuse a rounded html or body, at the radius declaration, with DRAGON_UNSUPPORTED_VALUE. Their background paints the canvas, which is not rounded.
• They also refuse a rounded replaced element (img, iframe). Blink clips replaced content to the rounded content box, and Dragon's image and web-view stages draw it square.
• These two refusals sit beside the existing refusal for rounded dashed, dotted and double borders (PNT1b). The web target is unaffected.
• The hit lane (hitRefusal) refuses a case with a rounded box by name, just as it refuses a transformed case. Blink clips a hit to the rounded border, and rt-hit.ts does not model that yet.
• New fixture radius-longhands (ltr and rtl). It covers each corner longhand on its own (px, em, rem, %, pairs), and -webkit-border-radius with 1, 2 (legacy), 3 and 4 values and the slash form, cascading both ways against border-radius and the longhands.

Left out of #80: the shadow engine (paint-shadow.ts, paint-aa.ts's A8 additions, gen-paint-inputs-shadow.ts, the Adobe notice) and check-pnt1-additive.ts. Radius uses none of them. The shadow engine depends on paint-radius.ts, so it belongs to PNT1-shadow once this lands. The identity check below covers what the additive tool proved.

Rows promoted

Profiles from the CI regen after the catch-up merge (0d8d045414):

• 58 radius rows (the 4 corners × px, em, rem, %, pair, inherit, initial (+ unset on one), × ltr and rtl):
  • exact on web;
  • caveat on iOS and Android, with chrome-dual computed-value proofs from the six radius fixtures, until the driver's device run adds the paint proofs.
• Before this PR all of these were DRAGON_UNSUPPORTED_PROPERTY, as were border-radius and -webkit-border-radius.
• Tailwind sweep: borders go from 75 to 156 of 250 supported on every target. Overall, web goes 4176 → 4257, and iOS and Android 4157 → 4238.
• Music player (north-star-check.json): 199 → 205 declarations compile on both native targets (68.9% → 70.9%).
  • Six of the eight radius declarations now compile.
  • .library-song img is refused on native (rounded replaced element).
  • *::-webkit-scrollbar-thumb is still refused by its selector.

Changed tests (reasons)

• pointer-events.test:
  • "keeps border-radius refused" becomes "compiles border-radius and leaves the hit facts unchanged". The guard it stood for, that no rounded box reaches a hit table unmodelled, moves to hitRefusal and hit-report.test.
  • The registry order check now expects the radius family between pointer-events and transform. That is where properties.ts has always placed it.
• hit-report.test: the refused cases are exactly those that write a transform or a border radius. Each is refused with its own reason, and there are some of each.
• hit-capture-identity (withoutPointerEvents): the identity base predates PNT1, so every base capture and emitted rule now also gains the four corner keys.
  • The check strips exactly those four keys alongside pointer-events. Base files must still differ by nothing else.
  • A new case proves that other radius-like keys and changed values still differ.
  • The alternative was rewriting the manifest against a hand-built base without pointer-events (the MANUAL command), which proves less.
• device-run.ts / device-lanes.test: radius-square joins PLANT_CASES and PLANT_RULES in registry order, and gains a plant-verdict test.
• layout/test/paint-seams.test: radius is a filled seam, with its two index.ts lines.
• s4b.test: the corner longhands get two radius values for the paint-never-reaches-layout check (colours are invalid for them).
• samples, paint-seams (parity), native-compare, pnt2-samples tests: their SampleBox literals gain the required size.
• expected-dump.test: the engine gains paint: { roundedShape }.
• native-backends, state-program, p6a-dash-oracle, seams tests: as in PNT1 2/8: border-radius, parsed as Chrome 145 and drawn natively on iOS and Android #81. The background is written through dragonBackground on both backends. border-radius in a state program is refused by name. A rounded box's border is drawn by the rounded painter, so the side-painter oracle skips it. The border shorthand sets no radius.
• Floors: no floor or pin file changed. The derived pins took the new longhands as appended names.

Outside the spec

• packages/parity/src/hit-capture.ts: hitRefusal, plus withoutPointerEvents / IDENTITY_NEW (above).
• packages/dragon/src/css/stylesheet.ts: env() in a paint value property gets the specific env() refusal.
• packages/dragon/src/emit/runtime/state.ts: the Swift state record writes the background through dragonBackground, as Kotlin already did. The background's after-layout sync would otherwise overwrite a state write.
• packages/dragon/src/analysis/paint-values/transform.ts: check: null, needed by the paint-values type now that it has check.

What passed

• pnpm typecheck: clean.
• Regen on CI:
  • run 37382572332: commit 8c3a713153;
  • after merging origin/master (GitHub reported a conflict in hit-capture.ts; master's IDENTITY_RULED is kept beside this PR's keys), run 37389802133: commit 0d8d045414, fixed point.
• Targeted vitest runs at 0d8d045414 (after the merge and regen): 87 files, 2098 passed, 2 skipped.
  • packages/dragon/test, all files. The two pointer-events pins were retargeted in 130716bbfc.
  • layout/test/paint-radius and layout/test/paint-seams.
  • 25 parity files: pnt1-radius (the paint model at every radius, clip and base point equals the committed Chrome pixels for all six fixtures, both directions, every DPR), pnt1-radius-edges, native-compare, samples, paint-seams, device-run, device-lanes, pnt2-samples, pnt2-plants, hit-report, hit-capture-identity, regen, registry-claims, css-escapes, p6a-dash-oracle, paint-vectors-cli, fixture-reader, values, the three north-star-* files, gallery, fonts-fixtures and script-conditions.
• pnpm native:build (at 8c3a713153): passes for iOS (swiftc, iOS 15 availability), for Android (kotlinc, d8, API floor 31: 0 references above it), and for the iOS radius-square plant build.
• Host lanes: layout-vectors-host passes on both targets, including the radius paint vectors, TS = Swift = Kotlin.
• Not run locally: the full pnpm test, which the landing driver runs. Device lanes are "device step pending": lanes.json is host-only after the regen.

Reviewed diff (outside .macroscope/ignore.md): about 198 KB over 62 files. Splitting it would leave one PR stacked on the other, because the compiler half needs the engine half, so it ships as one.

Catch-up (2026-10-06): merged origin/master 2c48409, regenerated

• Hit-lane refusals are a named list. The new packages/parity/test/hit-refusals-radius.ts lists the 12 radius-* cases (RADIUS_OUT) and their reason (RADIUS_REASON), the same pattern as SVG-a1: inline <svg> (path, rect, circle; fill, stroke, stroke-width) on web, proven by a strict outline differential against Chrome; native refused as SVG-a2 #206's hit-refusals-svg.ts, so either PR merges onto the other as a union of the two lists. hit-report.test now checks that the refused cases are exactly the transform cases plus RADIUS_OUT, each with its own reason. That is stricter than before: a new rounded fixture has to be named in the list.
• lanes.test device-hit test (retargeted). It required every refused id to match ^transform-, which fails once the radius cases are refused. It now requires every RADIUS_OUT case to be refused with RADIUS_REASON, and every other refusal to be a transform- case with the transform reason. The intent is unchanged: device-hit runs exactly the cases the hit lane does not refuse.
• s4b.test. The radius value pair moved from the pair literal into the pair[p] ?? fallback, with the same values and the same check.
• Passed: pnpm typecheck; native:build for ios and android (591 cases each, API floors pass); vitest over 24 files (chrome-ports, both registry-claims, profile-index, android-target, native-backends, not-applicable-native, s4b, aliases, paint-radius, pointer-events, seams, state-program, hit-report, hit-capture-identity, lanes, device-lanes, native-compare, p6a-dash-oracle, paint-seams, pnt1-radius-edges, pnt1-radius, pnt2-samples, samples): 1250 passed, 1 failed. The failure is device step pending: lanes.test "every device lane ran" reports ios layout-vectors-device as not run.

🤖 Generated with Claude Code

Catch-up (2026-10-08): merged #194 (ovfl-a) and #200 (casc-supports), regenerated

• Landing failure fixed. The last landing-failed comment was a merge conflict in packages/dragon/src/analysis/computed-checks.ts onto 27712c4 (OVFL A: scroll containers (overflow auto, scroll, clip), viewport propagation and Chrome scroll metrics, rebuilt on master (supersedes #96/#97) #194). 4e0723868b merges origin/master 7a7ba63 and resolves it.
  • How computed-checks.ts was resolved. Both sides changed the end of checkComputed's walk. This PR added the paint modules' refusals (if (!here) for (const m of PAINT_VALUES) m.check?.(...)). OVFL A: scroll containers (overflow auto, scroll, clip), viewport propagation and Chrome scroll metrics, rebuilt on master (supersedes #96/#97) #194 added the scroller argument (the nearest scroll container, used by the OVFL-p check), passed to children through own/inner. The merge keeps both, in that order: the PAINT_VALUES checks run first, then the walk descends with walk(c, here, inner).
  • Nothing else in the file conflicted. OVFL A: scroll containers (overflow auto, scroll, clip), viewport propagation and Chrome scroll metrics, rebuilt on master (supersedes #96/#97) #194's checks (checkOverflow one-axis clip, checkNativeScroll OVFL-B, checkPercentRelative OVFL-p, propagatedFrom) and this PR's checkRoundedElement (html/body, replaced, PNT1b border styles) are all unchanged.
• New test, dragon/test/paint-radius.test.ts. It covers one compile of a rounded, dashed-border overflow: hidden box with a position: relative; top: 10% child, so both sides' refusals run in the same walk. It asserts the exact PNT1b refusal for ios and android at 6px, and the exact OVFL-p refusal for android, ios and web. I checked that it fails without each half of the resolution:
  • dropping the PAINT_VALUES line, the PNT1b refusal is gone;
  • passing null instead of inner, the OVFL-p refusal is gone.
• Second merge, 6279b61fe4. CASC 1: @supports decided at build time as Chrome 145 decides it; revert and revert-layer; CSS-wide keyword rows #200 landed during the first regen and made the PR conflict again. The merge of origin/master 9b32f10 had no conflicts (stylesheet.ts, seams.test.ts and fixtures.ts merged automatically). Generated files kept this side, and regen rebuilt them.
• No test was loosened and no floor or pin changed.

What passed (head b8e462fe86a4b9fc1dac3a3afd312854eeea1cb5)

• Regen on CI:
  • run https://github.com/compiled-run/dragoncss/actions/runs/37839749061 at 06ad7bd871, regen commit 7d162742b9 (superseded by the CASC 1: @supports decided at build time as Chrome 145 decides it; revert and revert-layer; CSS-wide keyword rows #200 catch-up);
  • run https://github.com/compiled-run/dragoncss/actions/runs/37848210107 at 6279b61fe4, regen commit b8e462fe86.
• pnpm typecheck: passes on b8e462fe86.
• Platform-free, local, 21 files, 347 passed:
  • dragon/test: aliases, casc, cascade-var, expected-dump, initial-line-width, interaction, media-wiring, overflow, paint-radius, pointer-events, profile-index, registry-claims, s4a, s4b, s5, seams, state-program;
  • layout/test: overflow, paint-radius, paint-seams, rt-hit.
• Chrome and native, ci:test-files run https://github.com/compiled-run/dragoncss/actions/runs/37855173626, tested b8e462fe86a4b9fc1dac3a3afd312854eeea1cb5, 24 files:
  • all pass: android-profile, casc (parity), chrome-ports, device-lanes, fixture-reader, hit-capture-identity, hit-report, native-compare, ovfl-metrics, p6a-dash-oracle, paint-seams (parity), pnt1-radius-edges, pnt1-radius, pnt2-samples, registry-claims (parity), replaced-identity, samples, supports-parse, corpus-dpr, native-backends, native-dpr-kotlin, native-dpr-swift, paint-roots;
  • lanes.test: 349 passed, 1 failed. The failure is device step pending: "every device lane ran" reports ios layout-vectors-device as not run.
• pnpm pr:review 198 --once: exit 0 on b8e462fe86. It is UNREVIEWED (Macroscope at its spending limit), CI checks passed, and there are 0 unanswered findings.

🤖 Generated with Claude Code

---

Generated by Claude Code

[thejackshelton]

Landing stopped at step merge (pnpm land)

merge-train: merging pnt1-radius-native onto e2e965b0d560b75555171262e8200cde4f48e6c2 failed; conflicts in packages/layout/test/paint-seams.test.ts, packages/translate/harness/harness.ts

Fix the cause, then hand #198 back to the landing queue with the new clean head.

[thejackshelton]

Catch-up after queue 54's merge conflict:

• c0e92b60d7 merges origin/master and keeps both sides.
  • paint-seams FILLED = dash, gradient, radius, transform.
  • The harness keeps BG2-a: gradient raster engine (paint-gradient.ts) on master, unstacked (supersedes #99's engine) #192's gradientResult dispatch (its full-row backgroundRow bytes) and the radius cases.
• d1d479d9ea: fixes three chrome-ports.test failures from this PR, so the ports registry follows the code.
  • The box_border_painter.cc entry names checkRoundedElement.
  • css/shorthands/radius.ts is listed under css_parsing_utils.cc.
  • An uncited replaced_painter.cc mention is gone from the radius checks.
• 85ae72f79f: pnpm regen through /tmp/job.sh, fixed point after 3 passes.
• 34270076ae: aliases.test (from ALIAS ALIAS: legacy -webkit- aliases of supported properties resolve as in Chrome (44 aliases) #172) no longer lists -webkit-border-radius as refused, because this PR parses it as the radius family's legacy shorthand. The test now asserts -webkit-border-radius: 4px 8px parses clean.

Passed:

• typecheck;
• 81 test files: packages/dragon/test, layout paint-seams and paint-radius, translate/test/paint-roots, and parity chrome-ports, pnt1-radius(-edges), native-compare, samples, paint-seams, device-run, device-lanes, hit-report, hit-capture-identity, regen, registry-claims, css-escapes, pnt2-samples, pnt2-plants, north-star-accounting and bg2-gradient. 1707 passed, 2 skipped; the one failure was the aliases pin above, fixed in 34270076ae.

pr:review --conflicts-ok exits 0 at 3427007; it is UNREVIEWED (Macroscope at its spending limit).

🤖 Generated with Claude Code

[thejackshelton]

Landing stopped at step merge (pnpm land)

merge-train: merging pnt1-radius-native onto 3195d55ee655701ffcd2021a632eb16300b096ae failed; conflicts in packages/dragon/test/s4b.test.ts, packages/parity/src/hit-capture.ts, packages/parity/test/hit-report.test.ts

Fix the cause, then hand #198 back to the landing queue with the new clean head.

[thejackshelton]

Landing stopped at step merge (pnpm land)

merge-train: merging pnt1-radius-native onto 24a602b8e5a0bfa37235154f77bcca3c42bac175 failed; conflicts in packages/dragon/src/analysis/computed-checks.ts, packages/parity/src/cli/native-devices.ts, packages/parity/src/device-run.ts, packages/parity/src/hit-capture.ts, packages/parity/test/hit-report.test.ts, packages/parity/test/lanes.test.ts

Fix the cause, then hand #198 back to the landing queue with the new clean head.