layout: Support content: <image> on non-pseudo-elements#56912
Merged
servo-wpt-sync merged 1 commit intoweb-platform-tests:masterfrom Jan 28, 2026
Merged
layout: Support content: <image> on non-pseudo-elements#56912servo-wpt-sync merged 1 commit intoweb-platform-tests:masterfrom
content: <image> on non-pseudo-elements#56912servo-wpt-sync merged 1 commit intoweb-platform-tests:masterfrom
Conversation
wpt-pr-bot
approved these changes
Dec 24, 2025
Collaborator
wpt-pr-bot
left a comment
There was a problem hiding this comment.
The review process for this patch is being conducted in the Servo project.
9bd7f83 to
93ddd6d
Compare
93ddd6d to
79060e8
Compare
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]>
79060e8 to
f9b772f
Compare
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.
Per CSS-CONTENT-3, one of the possible values of the
contentCSS 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 thedisplayvalue is notnoneorcontents, we first check whether thecontentsproperty 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_imageto 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