`content` CSS attribute does not work with images

[OpenSauce]

I was unsure of whether to post this here or in the Browser Development forum, so hopefully I chose correctly.

As the title says, I have encountered an issue where attempting to use the `content` CSS attribute to replace the content of an element with an image.

I have produced a minimal example which shows 3 different ways of displaying an image across 3 browsers. As you can see, both of the images displayed using `content` are missing in Pale Moon but display fine in Chromium and Firefox:

Code: Select all

<style>
  .test {
    content: url('https://forum.palemoon.org/styles/prosilver_se/theme/images/logo_70.png');
  }
}
</style>

<p>img:</p>
<img src="https://forum.palemoon.org/styles/prosilver_se/theme/images/logo_70.png"/>

<p>span content:</p>
<span class="test"></span>

<p>div content:</p>
<div class="test"></div>

[Moonchild]

I'm not sure what you're expecting. Neither <span> nor <div> support displaying raw image data, for starters.

In addition, CSS "content" applies only to ::before and ::after pseudo-elements. The whole point of it is being able to prefix and suffix existing content with style elements (which can get pretty fancy, think tooltips); CSS isn't meant to generate actual page content. If you want to replace elements as a whole, you would do so in the DOM tree.

I'm guessing this falls under the header that Blink pretty much treats everything as a "generic element", never mind the HTML standard...? I inspected this in Edge (Chromium) and the resulting "content:" image isn't even part of the DOM node tree (i.e. not accessible at all), so it's a really really weird way this is even done and feels like a bug.

[OpenSauce]

For the sake of completeness I also tested the example on a Webkit-based browser, and it works as expected:


Given that every relevant browser engine in existence (Blink, Gecko, Webkit) supports this behaviour, I don't think this can really be classified as a bug. It has to be intentional.

Even ignoring the bug classification though, not including such a behaviour would only be doing a disservice to the browser and its users by making page compatibility worse.
Realistically, Pale Moon is too niche to make any affected website change their behaviour to accommodate.

I actually discovered this issue due to my own project's website using the behaviour to display an icon in the navbar:

Other browsers:

Pale Moon:


Granted I'm not quite sure why I went with this method at the time, but that's besides the point.

[Moonchild]

Look, I get it. We always have to balance web compatibility and browser parity with logic. If it's widely supported and actively used then we probably have to align our behaviour with that. I'm just not sure how this can be done in any other way than just hacking it into the display layer -- but that seems to be what other engines are doing too (because the CSS "generated content" isn't actually part of the document, yet displayed anyway as if it was). So maybe not a bug per se, but at least a dirty hack.
What is important here for us is how widely this is used, to know how to prioritise it.

EDIT: Filed Issue #2665 (UXP)

[adoxa]

It's at least used by privacytests.org for their status marks (Rendering topic).