Csswg-drafts: [css-content] Does `content: url()` apply to images?
Blink and WebKit implement content: url() allowing to replace an element with an image.
However the behavior differs and doesn't look quite intentional, and WebKit's behavior looks different if the image is already loaded or not (the second image would display alt text after a relayout, wat).
Consider this test-case:
<!doctype html>
<img src="broken" style="content: url(https://www.w3.org/2008/site/images/logo-w3c-mobile-lg)" alt="This is my alt text">
<img src="https://www.w3.org/2008/site/images/logo-w3c-mobile-lg" style="content: url(broken)" alt="This is my alt text">
How should this render? Should content: url() apply or not? If it does, should it display the alt text? Why only for <img> (if the image is broken in a <div>) it just doesn't render?
Also, note that in Blink at least, if the image is already loaded for the second <img>, or if you toggle display manually, suddenly it displays the image instead of the alt text.
css-content-3
emilio
Most helpful comment