css+paint: honour appearance:none on checkbox/radio controls - #246
Merged
Merged
Conversation
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>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
paintCheckboxLikehad no*css.Styleparameter at all, so a checkbox/radio withappearance:none(the standard custom-toggle-switch pattern) always painted this engine's generic hardcoded square instead of the author's own cascaded style.<mdn-switch>toggle-switch component setsappearance:none;background-color:...;background-image:radial-gradient(...);border-radius:9999pxunconditionally 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).css.Style.AppearanceNonefield (backingappearance/-webkit-appearance: none; other keywords have no confirmed trigger and are left unsupported). When set,paintCheckboxLikenow paints like any other styled box — background colour, background-image layers (gradient/bitmap, reusingpaintBackgroundLayersgeneralized off*layout.Box), border-radius, and per-side border — instead of the generic square. Withoutappearance:none, nothing changes.css/ua.gocomment that predicted paint would never consult a checkbox'sBackground/Borderfields — no longer true for theappearance:nonebranch.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 ./...cleango test ./...green, all five coverage floors held (css 99.5%, paint/layout/paginate 100.0%, dom 98.4%)cssandpaintTestApplyAppearanceProperty(css) + 6 newpaint/formcontrol_test.gocases (regression guard withoutappearance:none, background colour, background-image gradient, border + bare/no-style, border-radius)<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:checkedcolour/position swap, which needs no special-casing)🤖 Generated with Claude Code