FORM-a 2/3: appearance as a longhand, and <button> as a CSS-painted control (block and flex), against Chrome

[thejackshelton]

FORM-a part 2 of 3 (T052, A2 and A3 in notes/T052J-form-a.md): appearance as a real longhand, and <button> as a CSS-painted control. It is stacked on FORM-a part 1 (#77) under the contract's stacked-slice exception. Its base is now form-a-v2 (#77's review-clean head a7a3267), so this diff is only this slice; GitHub moves it to master when #77 lands.

Phase 1 on #77 a7a3267 (2026-10-09)

• Merge of form-a-v2 at a7a3267 (carrying origin/master b97cf50) in 54c50c5. Conflicts, each keeping both sides:
  • computed-checks.ts: checkComputed's walk keeps FORM-a 1/3: the engine's form-control box kind (range, slider thumb, block button), laid out by layout() against Chrome's boxes #77's scroller (percent-relative in scroll containers), the PAINT_VALUES refusals and GEN-b's faults, and A3's button walk state (enclosing button, parent display through display: contents).
  • resolve.ts: the computed.ts import takes both appearanceDisplay (A3) and computeLists (GEN-b).
  • attributes.ts: HANDLED_ATTRIBUTES keeps button type (A3) and GEN-c's ol start/reversed, li value.
  • ios-layout.ts lowerTree: lowers the root with FORM-a 1/3: the engine's form-control box kind (range, slider thumb, block button), laid out by layout() against Chrome's boxes #77's propagated viewport-overflow source and still refuses a root that lowers to a control box.
• Regenerated on CI in 66fefee (run https://github.com/compiled-run/dragoncss/actions/runs/37968435334).
• Hit testing of controls is refused by name. FORM-a 1/3: the engine's form-control box kind (range, slider thumb, block button), laid out by layout() against Chrome's boxes #77's rt-hit.ts refuses a form control (controlRefusal), so the hit lane leaves out A3's 10 controls-* cases with that reason. No hit claim is made for a control.
• hit-capture identity (hit-capture.ts, e0ed79c): A2's appearance longhand, added after the identity base, is removed only at its exact initial value none (JSON key and emitted declaration). auto or any other value stays in the text and fails the hash. A test pins this. Without it, every base capture and emitted file failed on appearance: none.
• Support rows. Every appearance:none and appearance:auto row (web exact; ios and android caveat, paint/ltr and rtl) names controls-* cases that pass on CI at this head. Unproven appearance keywords (button, textfield, menulist-button, ...) stay refused per target with DRAGON_UNSUPPORTED_VALUE, as do the A3 refusals listed below.

Retargeted pins (this phase)

• hit-report.test and lanes.test. The exact refusal union gains the 10 FORM-a controls cases. They are listed in the new hit-refusals-controls.ts with their reason; CONTROLS_REASON is anchored and allows only HitError's hit test: prefix. Intent kept: every left-out case is named with its own reason. hit-report failed on 66fefee (run 37974645063) with 48 cases left out against the 38 the old union named.
• not-applicable-native.test. -webkit-appearance: none on a div now compiles on every target, through A3's appearance:none rows, so the "off the list" entry moves to its own test. Intent kept: -webkit-appearance never takes the not-applicable path. Unproven keywords stay blocked on every target with DRAGON_UNSUPPORTED_VALUE per target, and none and auto compile only through their rows on all three profiles. CI checks on 6507542 failed here: expected blocked, got checked.

Review fix (90ee2b2, High, ua/datasets.ts:427): inherited longhands a UA rule resets

The problem: the ELB-2 declared capture kept a longhand only when its value differed from unset under a default parent. Chrome's html.css control rules reset some inherited longhands to the value a default parent passes down anyway (line-height: normal, color: ButtonText), so the capture missed them. A <button> under an ancestor with another line-height or colour therefore inherited those values in Dragon, while Chrome resets them.

• Capture (scripts/capture-ua-defaults.ts, fb3cdd6):
  • every element is also read under a parent with a non-default value for each inherited milestone longhand (INHERITED_SKEW);
  • a guard throws if a new inherited longhand has no skew, and each skew must actually change the parent;
  • a longhand that differs there from inheriting is recorded as a declared UA value, but only when its value is the same under every parent; otherwise the capture throws;
  • the unmodelled capture does the same for the inherited properties the control rules reset: font: -webkit-small-control's font-* longhands, letter-spacing, word-spacing, text-indent, text-transform, text-shadow, text-rendering and cursor;
  • self-consistency now also reproduces every key under the skewed parent, so a missed reset fails the capture. The new plant drop-inherited-reset (button's line-height) must fail it;
  • ButtonText is Chrome's own computed value in each scheme: rgb(0, 0, 0) in light, and the dark dataset's own value in dark.
• Rows that change (regen 2ef8622, https://github.com/compiled-run/dragoncss/actions/runs/37982961694):
  • the button, input and input[type=range] keys' declared rows gain line-height: normal and color, and input gains text-align: start;
  • their unmodelled rows gain the reset list above.
  • Master-era row: ul gains its declared list-style-type: disc. It equals the initial value, so only the skewed capture finds it; in Chrome a ul under an ancestor with another list-style-type gives its items disc.
  • No earlier fixture's resolved values, layout input or web body change: controls-identity passes, and emitted CSS changes only by its digest header. Profile rows only gain the new cases.
• Fixture controls-button-inherit (ltr and rtl) is the reviewer's probe, compared against Chrome: body with line-height 30px and rgb(200, 0, 0), and block buttons with font: inherit sizes. It covers a button with a block child that inherits the reset, an author line-height/colour that wins, and an author line-height. The probe needs an author border: without one, the UA outset border is refused (border-style: outset), so the review's probe as written does not compile. line-height: inherit has no profile row, so the author case uses explicit values. The hit lane refuses this fixture by name with the other controls cases.
• Unit test: packages/dragon/test/controls-inherited.test.ts (platform-free). It fails on the old dataset. It pins:
  • the button key's line-height: normal and colour in both directions, light and dark;
  • the probe resolving to those values, and the button's contents inheriting them;
  • an author value winning;
  • the probe compiling on all three targets.
• Not changed: userAgentTextFonts (the font-weight and font-style text fonts) is unchanged. A button inside a bold or italic UA ancestor is still refused on native, so that case stays fail-closed. The font-* resets go to userAgentUnmodelled as data. The non-milestone resets cannot reach the output, because Dragon refuses those properties when an author sets them.

Retargeted pins (review fix)

• ua-elb2.test: the button and input unmodelled rows are now cursor plus the control reset list, pinned exactly in both directions. ul's declared list-style-type: disc is pinned too.
• controls-identity.test: the controls group has 6 layout fixtures (was 5), now that controls-button-inherit is added.
• glyph-clearance-pins.json: controls-button-inherit's lines are appended (49ce521, --floor-write run https://github.com/compiled-run/dragoncss/actions/runs/37989870975). These are additions only.

What passed at f19f68d

• pnpm typecheck (local): pass.
• Platform-free (local, npx vitest run): attributes, block-elements, media-runtime, paint-seams, dragon registry-claims, s4b, seams, ua-elb2, ua, not-applicable-native, controls-inherited, layout inline, rt-hit, layout rt-vectors. 14 files, 313 tests, all pass.
• pnpm ci:test-files https://github.com/compiled-run/dragoncss/actions/runs/37990256398: 31 Chrome files pass:
  • android-profile, chrome-ports, controls-identity, device-lanes, dist, env-engine, fixture-reader, fonts-fixtures, glyph-calibration;
  • hit-capture-identity, hit-lanes, hit-report, parity inline, interaction-forced, line-breaks, parity media-runtime, media-sweep;
  • native-host, p6a-dash-oracle, parity, phrasing-blockified, pixel-reference, platform, pnt2-quads, pnt2-samples;
  • parity registry-claims, replaced-identity, replaced-paint, tree-faults, values, translate rt-vectors.
• lanes.test (native): 367 pass. Its 1 failure is P5 "every device lane ran" (ios layout-vectors-device: not run), which is the device step, still pending.
• CI checks at this head: success on attempt 3 (https://github.com/compiled-run/dragoncss/actions/runs/37990256257). Attempts 1 and 2 died at "Lint the landing workflows" on the Docker Hub pull rate limit, before any test ran.
• pnpm pr:review 78 --once: exit 0. It reports UNREVIEWED because Macroscope is at its spending limit, with 0 unanswered findings.
• Reviewed diff against form-a-v2 (outside .macroscope/ignore.md paths): about 148 KB.

Outside the spec (this phase)

• scripts/capture-ua-defaults.ts beyond A2's plant retarget (the inherited-reset capture)
• packages/dragon/test/controls-inherited.test.ts (new), packages/dragon/test/ua-elb2.test.ts
• packages/parity/src/hit-capture.ts (identity strip of appearance at none)
• packages/parity/test/hit-capture-identity.test.ts, hit-report.test.ts, lanes.test.ts, new hit-refusals-controls.ts
• packages/dragon/test/not-applicable-native.test.ts

The sections below describe the slice as first opened. Its "What passed" figures were measured on the host at the earlier head; the section above is the current record.

What changed

• A2: appearance and -webkit-appearance.
  • appearance is a real longhand (route 2a, as object-fit), with Chrome's legacy -webkit-appearance alias.
  • The grammar is narrowed to what Chrome 145 parses: it drops base, although webref's grammar allows it.
  • The UA capture records it: auto on button, input and input[type=range], none elsewhere. The forced-value reference never takes the declared appearance, so the forced display: inline-block rows stay as they were.
  • scripts/check-appearance-migration.ts proves the output migration only adds appearance (details under "What passed"). It now counts only rules outside @media, because an @media rule writes only the longhands that differ (MQ-a). A new emitted-media plant covers that.
• A3: <button>.
  • What is supported: a button whose used appearance is CSS painting. That is appearance: none, or auto with an author background or border (R11, the devolve rule, from FORM-0's probe).
  • Layout:
    • A block button lowers to A1's button-block control and centres its contents safely.
    • A flex button is a plain flex container.
    • In block flow, a block button's auto width fits its content. Chrome fixtures confirmed this before the block.ts hunk was added (amendment A3/A4-1).
  • The appearance display adjustment (amendment A3-1) is in computed.ts. Chrome 145 was measured on every display value:
    • inline, math and every table-internal display become inline-block;
    • table and list-item become block.
  • The button's UA display: inline-block is an ordinary UA value that an author display overrides. Any other forced row on the button key throws.
  • type is handled on button: a fixture with every variant matches Chrome.
  • Refused:
    • a theme-painted button (FORM-b);
    • an inline-level button (RF-INL);
    • an absolutely positioned button;
    • an auto-width flex button in block flow (T156);
    • the UA control font (R13).
• Port registry. Chrome's layout_theme.cc is LGPL (class A). computed.ts states the display table as the Chrome 145 measurement, with LayoutTheme::AdjustStyle cited as a reference only. docs/ports.json lists computed.ts APPEARANCE_DISPLAY and analysis/elements/controls.ts as references, adds controls-identity.test.ts as a proof, and gains the block_layout_algorithm.cc 3341-3352 range that block.ts cites.
• Fixtures (controls group):
  • layout: controls-button-block, -flex, -demo, -type and controls-appearance-display, each in ltr and rtl;
  • rejects: reject-controls-button-theme, -inline, -abspos, -flex-width and -font, and reject-controls-appearance-inline.

What passed (host, at the head of this PR)

• pnpm regen is at a fixed point: "fixed point after 1 passes, 19 steps run", no files changed. Generated outputs are in their own commits, each naming its command.

• pnpm typecheck passes.

• pnpm test (full suite): 161 of 166 files pass, and 3709 tests pass with 1 skipped.

  • The 12 failing tests and 1 failing suite are the device-record checks only: lanes.test, lanes-records.test, lanes-concurrent.test, device-failures.test and p6a-promotion.test. They fail only because the committed packages/parity/out/lanes.json is host-only; the train's device run for this position commits it.

• The controls cases pass both host lanes in ltr and rtl, and every reject passes. Turning off the fit-content hunk or the display adjustment makes them fail.

• controls-identity.test: every pre-existing FIXTURES case's resolved values, native layout input and web body deep-equal part 1's. It also checks the A3 helpers on their edges.

• node --conditions=dragon-internal scripts/check-appearance-migration.ts 75bf9e5c5: every file that existed at part 1 differs only by appearance:

  • captures: 1966 files, 35070 keys;
  • emitted CSS: 395 files, 8184 declarations outside @media;
  • UA data: 2 files, 114 entries.

  Engine inputs, Chrome line breaks and the pixel manifest's existing entries are unchanged. The check's only other failures are the 180 added controls-* files, which come from A3, not A2. All 13 plants fail as required.

• Profile rows only gain rows and proof cases.

• North star (errors 333 → 323):

  • the <button> element errors go 7 → 0, and the type errors on buttons 7 → 0;
  • -webkit-appearance: none is no longer an error on web and ios;
  • the demo buttons gain 8 UA-control-font errors per target. The demo's font: inherit shorthand is unsupported, so they keep Chrome's control font. This is recorded on the board as TXT-W2 (T147 part 2).

Changed tests and checks, with reasons

• pixel-reference.test: the glyph-clearance pins add the 10 controls cases' own terms, because their button text sits close to button edges:

  • ios and android at DPR 2: edge +68, edge:glyph +22, border +6, rescued edge +67;
  • at DPR 3: edge +66, edge:glyph +22, border +6, rescued edge +64, rescued border +4;
  • android at DPR 2.625: edge +68, edge:glyph +22, border +6, rescued edge +60.

  With the controls cases filtered out, the earlier pins hold exactly.

• block-elements.test: the element table lets the control tags read the ELB-2 element keys (button reads the button key's tag).

• seams.test: LONGHANDS is 71 → 72 (appearance). Appearance and -webkit-appearance parsing are pinned to the Chrome 145 probe: 14 keywords kept as written; base, the older -webkit- keywords, two keywords and an unknown word dropped.

• paint-seams.test and s4b.test: appearance joins the paint longhands, with its two keywords.

• css-escapes.test: the escaped-twin count goes 13834 → 13904 (+70, the appearance and -webkit-appearance grammar words and names).

• ua.test and ua-elb2.test: the element-key longhand lists gain appearance on button, input and input[type=range]. Appearance moves from the unmodelled rows to the declared rows as auto; the forced display pins are unchanged.

• attributes.test: type is handled on button; on other elements it stays refused, naming FORM-a.

• scripts/capture-ua-defaults.ts: the drop-unmodelled plant is retargeted from button appearance (now modelled) to cursor. A guard makes the plant fail loudly when its target is not an unmodelled row.

• check-appearance-migration.ts: counts only rules outside @media, plus the emitted-media plant. No check is removed.

Catch-up onto master (2026-10-05)

Merged form-a-v2 after its catch-up (#72's last review head, then origin/master f50b6ad with HOTSPOT-SPLIT #137/#138). Regenerated in 1fa2e6c (pnpm regen). The "What passed" section above was measured at the earlier head.

• packages/layout/src/block.ts: the block button's fit-content auto width now clamps against master's stretched size (Blink-order margins, layout opportunity). The 3341-3352 range is kept in docs/ports.json beside master's.
• PIN-DERIVE: master's derived floor and pin checks replace this PR's literal lists in seams, paint-seams, s4b, css-escapes and pixel-reference. New entries were appended with the write flags, and nothing is removed or lowered:
  • appearance and -webkit-appearance in seams-floor.json (longhands, shorthands, paint role);
  • the two escaped twins in css-escapes-floor.json;
  • the p1 corpus counts in p1-floor.json;
  • the controls cases' lines in glyph-clearance-pins.json (37bd1cf, DRAGON_PIN_WRITE=1). Every existing case line is unchanged; the chain checked this before committing.
• s4b's paint-pair map gains appearance's two keywords (none, auto).
• HOTSPOT-SPLIT: appearance: DISCRETE is in animation-kinds/box.ts (Chrome 145's interpolable snapshot lists appearance and -webkit-appearance as not interpolable). The controls group is one sorted GROUPS line, so it now runs after the legacy groups, in id order. No diagnostic codes, faults or regen steps are added.

Passed at c201360 (no local full test, per the lane contract): pnpm typecheck; targeted tests (this stack's tests, the layout package, parity, values, replaced-identity, controls-identity, pixel-reference, chrome-ports, css-escapes, seams, s4b, paint-seams, registry-claims, diagnostics, animation-kinds, regen and corpus-dpr): 64 of 64 files, 1916 tests passed, 2 skipped.

Reviewed size: about 104 KB (41 files) against part 1.

🤖 Generated with Claude Code

---

Generated by Claude Code