Skip to content

Keep a bare img subject's own corner radius through the image bridge - #5282

Draft
chubes4 wants to merge 1 commit into
trunkfrom
fix/5216-img-radius-subject-direct
Draft

chubes4 wants to merge 1 commit into
trunkfrom
fix/5216-img-radius-subject-direct

Conversation

@chubes4

@chubes4 chubes4 commented Nov 9, 2026

Copy link
Copy Markdown
Contributor

Fixes #5216.

What

AuthorStylesheetProjector emits a bridge rule for every source rule that targets an image: ….wp-block-image > img{…;border-radius:inherit}. The bridge is right when the image's class moved onto the generated figure, because then the source rule paints the figure and the image follows it. It is wrong when the rule's subject is a bare img (.avatar img, .card > img). In that case nothing moves to the figure, the source rule still paints the image itself, and the bridge overrides the image's own radius with the figure's 0 at the same specificity, later in the cascade. The result is round avatars imported as squares.

The bridge now omits border-radius:inherit for selectors whose subject compound is a bare img. In a mixed list (.photo, .avatar img), only the moved arms keep the inherit, in a separate rule at the same cascade position.

Evidence

I compiled each case with ArtifactCompiler and measured the computed radius of the rendered img in Chromium:

case source trunk this branch
.photo{border-radius:50%} on <img class="photo"> (class moves to the figure) 50% 50% 50%
img.round{…} 50% 50% 50%
.avatar img{border-radius:50%} 50% 0px 50%
the same, plus a later radius-less @media rule for .avatar img 50% 0px 50%
.avatar img{border-top-left-radius:50%} 50% / 0 0px / 0 50% / 0
.photo, .avatar img{…}, both images 50%, 50% 50%, 0px 50%, 50%
.card{border-radius:20px;overflow:hidden} around a bare image clipped 20px clipped 20px clipped 20px

An earlier attempt removed the bridge's border-radius:inherit outright. That fixed the third row and broke the first, which is why the first row stays in the test.

Test

There is a new table-driven case in tests/unit/artifact-author-stylesheet-projection.php. It resolves each image's border-radius with StaticCssCascade, following inherit to the figure, and covers the moved class, the descendant subject, the later breakpoint rule and the mixed list. On trunk it fails for the descendant subject, the later breakpoint rule and the mixed list; the moved-class row guards against the earlier regression. StaticCssCascade does not expand radius shorthands, so the longhand row is covered by the browser check above only.

The full composer test suite passes (1314 tests).


This PR was finished outside Homeboy: Cook could not admit the task, failing in Lab admission before the provider ran. The fix, test and verification were written by Franklin (Claude, an Anthropic model, via the Pi coding agent and Roadie). A human (@chubes4) directed the work.

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.

Source border-radius on <img> is overridden by the figure projection's border-radius:inherit

1 participant