Skip to content

layout: Support content: <image> on non-pseudo-elements#56912

Merged
servo-wpt-sync merged 1 commit intoweb-platform-tests:masterfrom
servo:servo_export_41480
Jan 28, 2026
Merged

layout: Support content: <image> on non-pseudo-elements#56912
servo-wpt-sync merged 1 commit intoweb-platform-tests:masterfrom
servo:servo_export_41480

Conversation

@servo-wpt-sync
Copy link
Copy Markdown
Collaborator

@servo-wpt-sync servo-wpt-sync commented Dec 24, 2025

Per CSS-CONTENT-3, one of the possible values of the content CSS property is <content-replacement>, which evaluates to a single <image>. This value is also allowed on regular elements, not just on pseudo-elements, and it will make the element into a replaced element representing the given image, discarding its contents.

This patch implements this in traverse_element: if the display value is not none or contents, we first check whether the contents property should make the element replaced, and if it shouldn't, then we check whether the element itself is replaced or a widget.

Per the spec, an invalid image must be treated as representing a transparent black image with zero natural width and height – in particular, it must not show a broken image icon. We added the method ReplacedContents::zero_sized_invalid_image to implement this.

This patch adds support for image URL references, but not for color gradients, which are treated as invalid images. The reason for this is that currently Servo does not support gradients in ReplacedContentKind. This is left as a follow-up change.

Testing: Some of the existing css/css-content/element-replacement* WPT tests now pass with this patch. We also added some new ones dealing with replacing the document root.

Fixes: #41479
Reviewed in servo/servo#41480

Copy link
Copy Markdown
Collaborator

@wpt-pr-bot wpt-pr-bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The review process for this patch is being conducted in the Servo project.

@servo-wpt-sync servo-wpt-sync force-pushed the servo_export_41480 branch 7 times, most recently from 9bd7f83 to 93ddd6d Compare December 30, 2025 11:25
Per CSS-CONTENT-3, one of the possible values of the `content` CSS
property is `<content-replacement>`, which evaluates to a single
`<image>`. This value is also allowed on regular elements, not just on
pseudo-elements, and it will make the element into a replaced element
representing the given image, discarding its contents.

This patch implements this in `traverse_element`: if the `display`
value is not `none` or `contents`, we first check whether the
`contents` property should make the element replaced, and if it
shouldn't, then we check whether the element itself is replaced or a
widget.

Per the spec, an invalid image must be treated as representing a
transparent black image with zero natural width and height – in
particular, it must not show a broken image icon. We added the method
`ReplacedContents::zero_sized_invalid_image` to implement this.

This patch adds support for image URL references, but not for color
gradients, which are treated as invalid images. The reason for this is
that currently Servo does not support gradients in
`ReplacedContentKind`. This is left as a follow-up change.

Testing: Existing `css/css-content/element-replacement*` WPT tests
that now pass with this patch. `element-replacement-gradient.html`
still fails because this patch does not add support for gradients.

Fixes: web-platform-tests#41479

Signed-off-by: Andreu Botella <[email protected]>
@servo-wpt-sync servo-wpt-sync merged commit 906e94d into web-platform-tests:master Jan 28, 2026
24 checks passed
@servo-wpt-sync servo-wpt-sync deleted the servo_export_41480 branch January 28, 2026 19:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants