Forum Bugs

Sizing images inserted via the content property

Mike B. has been writing tests for the CSS Generated Content spec. There's an issue with using the content property with an image--it should be a replaced element, and sizable with the width/height properties:

Makes the element or pseudo-element a replaced element, filled with the specified <image>. Its normal contents are suppressed and do not generate boxes, as if they were display: none

<!DOCTYPE html>
 <meta charset="utf-8">
 <title>Test that a single generated-content image is treated as a content-replacement</title>
 <link rel="author" title="Mike Bremford" href="">
 <link rel="help" href="">
 <link rel="match" href="../reference/ref-filled-green-100px-square.xht">
 <meta name="assert" content="If a node's generated content is a single image it is 'content-replacement'. It becomes the replaced content of the node and, if the node is inline-block, is sized by the width/height properties"/>
 div::before {
     display: inline-block;
     width: 100px;
     content: url("data:image/svg+xml,<svg xmlns='' width='16' height='16'><rect width='100%' height='100%' fill='green'/></svg>");
 div {
     width: 100px;
     height: 100px;
     background-color: red;
 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>

The good news is that Prince, Safari, Firefox, and Chrome all do the same thing. The bad thing is that what they do seems to go against the spec.

There's some interesting discussion of this at

  1. test1.html1.1 kB
Thanks for the heads up, @dauwhe. It seems we hit this problem for a data url but not if it points to a file. We'll investigate further.
Ah, wait. The file I used had a viewBox attribute but the above does not, and it is this that seems to make the difference.