Situations in which the browser can't get an image:
This text is replaced by non-existent image
In Opera and Safari, this shows a broken image icon, like they do when an img tag had a non-existent src attribute. The CSS 2.1 spec says "If the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed", so that's allowed (although it would be better to show the contents of the element, surely).
However, the CSS 3 spec says "If there are multiple URIs provided, then each is tried in turn until a value which is both available and supported is found. The last value is used as a fallback if the others fail…If no alternatives exist, then 'none' is used as a final fallback…Thus to make an element fallback on its contents, you have to explicitly give 'contents' as a fallback". So let's give that a go:
Contents of element
The CSS used here is content:url(http:/www.brucelawson.co.uk/punk-images/XXXbruce-logo.jpg), contents, so according to CSS 3, the text "Contents of element" should show. In Opera, they do. Safari renders the broken image icon, allowed in CSS 2 but not in CSS 3.
This is the contents of element replaced with malformed URL
The example above uses the CSS content:url(a b 3 45 ). According to the CSS 2 spec, " the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed", so here, both browsers are obeying the CSS 2 spec—but in a different manner from the way they dealt with the non-existent image above.
According to CSS 3, nothing should be displayed above: presumably this should have the same effect as if the CSS were display:none.
This is the contents of element replaced with malformed URL
This paragraph has fallback of contents, so the content of the element correctly shows in Opera and Safari.
Contents of element
In Opera with images off, this lovely baby picture of me shows a "broken image" icon. That's legitimate according to <abbr>CSS 2</abbr> but should show nothing according to CSS 3. In Safari, it shows nothing at all—but seems to throw a blank line.
Contents of element.
In Safari, it behaves exactly as the test above with no fallback, as if the part of the browser that knows not to show images hasn't told the part of the browser that deals with CSS, so it's not trying to use the fallback contents. It does throw a blank line.
In Opera, the fallback contents are shown, whether images are on or off. That is contrary to both CSS 2 and CSS 3, as if the image can be rendered, it should be. This worried me, so here's an example which (assuming conectivity) should always work:
Should render image
These content should not show because image exists
Opera incorrectly falls back to the element's contents, even if the image does exist. (Is it giving the later value precedence, even though it's the last in the chain of alternatives?)