1303574 - I can't style with css pseudo img::before when an image is broken or inexistent.

Status: NEW

(Core :: Layout: Images, Video, and HTML Frames, defect, P3)

Description

[Francisco dos Santos]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:48.0) Gecko/20100101 Firefox/48.0
Build ID: 20160823121617

Steps to reproduce:

Show additional information in case of an image is broken or inexistent.

HTML
<img src="any-image.jpg" width="256" height="256" alt="Harry and James" />

CSS
img::before { 
   content: "Sorry, this image is broken or inexistent. \a My cat Harry and my dog James together"
   white-space: pre;
}


Actual results:

Only appears the alternative text of the broken image, nothing more.

Note:
If i use img::after, works fine.

Sometimes i need to use both ::before and ::after pseudo elements.

My actual Firefox desktop version is 48.0.2.


Expected results:

Show the text defined in css "content" property.

Comment 1

[Francisco dos Santos]

My working OS is Windows 7 x64.

Comment 2

[Loic]

Attachment: 1303574.html

Comment 3

[Mats Palmgren (inactive)]

Attachment: ::before/::after testcase

The box tree we create for this testcase looks like this:
Inline(img)<
  Inline(_moz_generated_content_before)<
    Text(0)"alt"
  >
  Inline(_moz_generated_content_after)<
    Text(0)"::after"
  >
>

Comment 4

[Emilio Cobos Álvarez (:emilio)]

This is expected, per this rule:

  https://searchfox.org/mozilla-central/rev/1ce4e8a5601da8e744ca6eda69e782318afab54d/layout/style/res/html.css#647

I think this is a Layout: Images bug. We could try to avoid hacking up the alt content using ::before.

Comment 5

[Mats Palmgren (inactive)]

Oh, that's where it comes from... I figured it was a frame constructor
bug which is why I changed the component.

Yeah, it's definitely not correct to implement ALT like that.

Comment 6

[Mats Palmgren (inactive)]

It appears we use ::before in our UA sheet to display the <optgroup>
label too, so I imagine we should fix that in a similar way to this bug.
(testcase in bug 1498358)

Comment 7

[Mats Palmgren (inactive)]

Note: the ALT (and the <optgroup> label) text is selectable in Chrome.

Comment 8

[Xidorn Quan [:xidorn] UTC+11]

::after works but ::before not indeed seems to be broken. We should either disable both or support both. I wonder what other browsers do and what the spec says... I wouldn't be surprised if the spec doesn't say anything about this, though, since it seems to be an error case...

Comment 9

[Mats Palmgren (inactive)]

The spec actually goes into some detail about this:
https://html.spec.whatwg.org/multipage/rendering.html#images-3

It'd be interesting to know what Chrome/Safari/Edge/Firefox do
for each of the listed cases there...