Skip to content

css+paint: honour appearance:none on checkbox/radio controls - #246

Merged
tannevaled merged 1 commit into
mainfrom
appearance-none-checkbox-round146
Sep 28, 2026
Merged

tannevaled merged 1 commit into
mainfrom
appearance-none-checkbox-round146

Conversation

@tannevaled

Copy link
Copy Markdown
Contributor

Summary

  • paintCheckboxLike had no *css.Style parameter at all, so a checkbox/radio with appearance:none (the standard custom-toggle-switch pattern) always painted this engine's generic hardcoded square instead of the author's own cascaded style.
  • Confirmed real, load-bearing trigger: developer.mozilla.org's own <mdn-switch> toggle-switch component sets appearance:none;background-color:...;background-image:radial-gradient(...);border-radius:9999px unconditionally on a real <input type=checkbox> (independently fetched and verified against the live page's own declarative-shadow-DOM markup, not trusted from a delegated audit alone).
  • Adds a new non-inherited css.Style.AppearanceNone field (backing appearance/-webkit-appearance: none; other keywords have no confirmed trigger and are left unsupported). When set, paintCheckboxLike now paints like any other styled box — background colour, background-image layers (gradient/bitmap, reusing paintBackgroundLayers generalized off *layout.Box), border-radius, and per-side border — instead of the generic square. Without appearance:none, nothing changes.
  • Corrected a stale css/ua.go comment that predicted paint would never consult a checkbox's Background/Border fields — no longer true for the appearance:none branch.

See the new FIDELITY.md entry (round 146, "Known gaps" also updated) for full detail, including the live-page verification (an isolated repro of the real <mdn-switch> markup, rendered standalone) and the full per-page bench attribution (4/10 pages moved, each individually confirmed to be pre-existing, unrelated live-content churn — none reach a checkbox at all).

Test plan

  • go build ./... / go vet ./... clean
  • go test ./... green, all five coverage floors held (css 99.5%, paint/layout/paginate 100.0%, dom 98.4%)
  • Git-stash-confirmed: reverting the four production files alone fails to even compile in both css and paint
  • 8 new tests: TestApplyAppearanceProperty (css) + 6 new paint/formcontrol_test.go cases (regression guard without appearance:none, background colour, background-image gradient, border + bare/no-style, border-radius)
  • Visually verified on an isolated repro of MDN's own real <mdn-switch> markup: unchecked renders a grey pill with a white knob on the left, checked a blue pill with the knob slid right (both the paint fix and the :checked colour/position swap, which needs no special-casing)
  • Plain unstyled checkboxes re-render identically to before this change
  • Full 10-page bench run against headless Chrome; every moved page individually attributed to unrelated, already-documented noise

🤖 Generated with Claude Code

paintCheckboxLike had no *css.Style parameter at all, so a checkbox with
appearance:none (the standard custom-toggle-switch pattern, confirmed live
on developer.mozilla.org's own <mdn-switch> component) always painted this
engine's generic hardcoded square instead of the author's own cascaded
background/background-image/border/border-radius.

Adds css.Style.AppearanceNone (backing appearance/-webkit-appearance: none)
and, when set, routes the checkbox through the same background-layer/
border-radius/border painting a real element's box already uses instead of
the generic square. Without appearance:none, nothing changes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@tannevaled
tannevaled merged commit cd1fdf8 into main Sep 28, 2026
7 checks passed
@tannevaled
tannevaled deleted the appearance-none-checkbox-round146 branch September 28, 2026 20:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant