layout: Support content: <image> on non-pseudo-elements#41480
Merged
mrobinson merged 1 commit intoservo:mainfrom Jan 28, 2026
Merged
layout: Support content: <image> on non-pseudo-elements#41480mrobinson merged 1 commit intoservo:mainfrom
content: <image> on non-pseudo-elements#41480mrobinson merged 1 commit intoservo:mainfrom
Conversation
servo-highfive
added
the
S-awaiting-review
|
🔨 Triggering try run (#20443356076) for Linux (WPT) |
mrobinson
reviewed
Dec 22, 2025
Member
mrobinson
left a comment
mrobinson
left a comment
There was a problem hiding this comment.
Great stuff. Question below:
components/layout/dom_traversal.rs
Outdated
Comment on lines
+202
to
+219
| // If `content` is a single image URL, the box gets replaced with a | ||
| // replaced image. | ||
| let contents = match info.style.clone_content() { | ||
| Content::Items(GenericContentItems { items, .. }) if items.len() == 1 => { | ||
| if let GenericContentItem::Image(img) = &items[0] { | ||
| match ReplacedContents::from_image(element, context, img) { | ||
| Some(replaced) => Contents::Replaced(replaced), | ||
| // Invalid images are treated as zero-sized. | ||
| None => Contents::Replaced(ReplacedContents::zero_sized_invalid_image( | ||
| element, | ||
| )), | ||
| } | ||
| } else { | ||
| Contents::for_element(element, context) | ||
| } | ||
| }, | ||
| _ => Contents::for_element(element, context), | ||
| }; |
Member
There was a problem hiding this comment.
Should this go into Contents::from_element. For instance, does content: <image> work on the root?
Contributor
Author
There was a problem hiding this comment.
Good question. The spec doesn't say it shouldn't work on the root; and it does work in Chromium and Webkit, but not in Firefox. I think it makes sense to make it work on the root, and so to move it into Contents::for_element, although I'd have to add WPT tests for it.
(By the way, if we replace the root in a quirks mode document, Chromium renders the image at its natural size, but Webkit stretches it vertically to fit the viewport if the image is smaller. This seems to be caused by the "html element fills the viewport" quirk, but shouldn't that also stretch the width? But anyway, Servo doesn't seem to implement this quirk, so it's probably not worth worrying too much about it.)
|
Test results for linux-wpt from try job (#20443356076): Flaky unexpected result (32)
Stable unexpected results that are known to be intermittent (26)
Stable unexpected results (5)
|
|
|
Collaborator
|
🤖 Opened new upstream WPT pull request (web-platform-tests/wpt#56912) with upstreamable changes. |
andreubotella
force-pushed
the
issue-41479
branch
from
cdbaef4 to
5e9a9b3
Compare
Collaborator
|
📝 Transplanted new upstreamable changes to existing upstream WPT pull request (web-platform-tests/wpt#56912). |
Contributor
Author
|
For the record, This PR also makes I've also added new tests for the document root. |
Collaborator
|
✍ Updated existing upstream WPT pull request (web-platform-tests/wpt#56912) title and body. |
Member
|
I suspect that pending images whether loaded via the image tag of CSS content should delay screenshot taking until their load completes successfully or fails. |
Contributor
Author
True, but Edit: In fact, I believe pending images loaded via |
andreubotella
force-pushed
the
issue-41479
branch
from
5e9a9b3 to
e18e959
Compare
Collaborator
|
📝 Transplanted new upstreamable changes to existing upstream WPT pull request (web-platform-tests/wpt#56912). |
Contributor
Author
|
I noticed that changes of the This should have been caught by the |
Contributor
The test uses <!DOCTYPE html>
<script>document.documentElement.offsetWidth</script>That's why the test seemed to work. Note the problem would be exposed with <script>
document.body.style.display = "none";
requestAnimationFrame(() => {
document.body.style.display = "block";
const target = document.getElementById("target");
getComputedStyle(target).width;
target.className = "replaced";
});
</script>With the It's still fine to change the test, but it's not like it was wrong, it's an orthogonal problem. |
mrobinson
approved these changes
Dec 29, 2025
Member
mrobinson
left a comment
mrobinson
left a comment
There was a problem hiding this comment.
Seems reasonable. I have a few nits below, but maybe @Loirooriol wants to take a look as well.
servo-highfive
added
S-needs-rebase
Loirooriol
reviewed
Dec 29, 2025
servo-highfive
added
S-awaiting-review
Collaborator
|
📝 Transplanted new upstreamable changes to existing upstream WPT pull request (web-platform-tests/wpt#56912). |
Collaborator
|
📝 Transplanted new upstreamable changes to existing upstream WPT pull request (web-platform-tests/wpt#56912). |
Loirooriol
reviewed
Dec 30, 2025
Loirooriol
reviewed
Dec 30, 2025
Collaborator
|
📝 Transplanted new upstreamable changes to existing upstream WPT pull request (web-platform-tests/wpt#56912). |
Loirooriol
approved these changes
Dec 30, 2025
servo-highfive
removed
the
S-awaiting-review
mrobinson
force-pushed
the
issue-41479
branch
from
c463bb9 to
a02c38d
Compare
servo-highfive
added
the
S-awaiting-review
Collaborator
|
📝 Transplanted new upstreamable changes to existing upstream WPT pull request (web-platform-tests/wpt#56912). |
servo-highfive
added
the
S-awaiting-merge
github-merge-queue bot
pushed a commit
that referenced
this pull request
Jan 28, 2026
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 Signed-off-by: Andreu Botella <[email protected]>
github-merge-queue
bot
removed this pull request from the merge queue due to failed status checks
servo-highfive
added
S-tests-failed
servo-highfive
added
S-awaiting-merge
servo-highfive
removed
the
S-awaiting-merge
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: servo#41479 Signed-off-by: Andreu Botella <[email protected]>
mrobinson
force-pushed
the
issue-41479
branch
from
a02c38d to
046ed44
Compare
Collaborator
|
📝 Transplanted new upstreamable changes to existing upstream WPT pull request (web-platform-tests/wpt#56912). |
servo-highfive
added
the
S-awaiting-merge
servo-highfive
removed
the
S-awaiting-merge
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
5 participants
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