Bug 146383 - If src is empty in img tag it shows a gray border around the image
Summary: If src is empty in img tag it shows a gray border around the image
Status: REOPENED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Images (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Critical
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2015-06-27 06:22 PDT by paladox
Modified: 2016-11-17 00:50 PST (History)
4 users (show)

See Also:


Attachments
test case (393 bytes, text/html)
2016-11-16 15:29 PST, Said Abou-Hallawa
no flags Details
test case (416 bytes, text/html)
2016-11-16 15:34 PST, Said Abou-Hallawa
no flags Details
test case (443 bytes, text/html)
2016-11-16 15:39 PST, Said Abou-Hallawa
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description paladox 2015-06-27 06:22:32 PDT
Hi if you have src empty for example <img class="class" <!-- no src="" --> /> it shows a gray border around the image. Internet Explorer doesent show a gray border arrounf the img if the src is empty.
Comment 1 paladox 2016-11-16 11:19:51 PST
Hi is there any update on this please?
Comment 2 Said Abou-Hallawa 2016-11-16 15:29:15 PST
I tried to look for the specs of drawing the broken images but I could not find this part. WebKit, Chrome and FireFox intentionally draw this gray rect for the broken image. WebKit does that in RenderImage::paintReplaced() below the the statement:

 if (!imageResource().hasImage() || imageResource().errorOccurred()) 

This request is little bit strange. What exactly you are trying to achieve? If drawing the gray rect is bothering you, you can set the width and/or the height of the image to zero. When the src attribute is set to the image, the width and the height can be changed to the desired size. If you want to keep the empty space of the broken image but not to draw the gray rectangle, you can put the <img> inside a box with the desired size but set the width and the height of the image itself to zero.

I attached a test case showing two broken images, one image has size = (100, 100) which shows the gray rectangle. The other image has size = (0, 0) but it is inside a box with size = (100, 100).
Comment 3 Said Abou-Hallawa 2016-11-16 15:29:35 PST
Created attachment 294982 [details]
test case
Comment 4 Said Abou-Hallawa 2016-11-16 15:30:15 PST
Reopen if you think you have a valid test case for this request.
Comment 5 Said Abou-Hallawa 2016-11-16 15:34:06 PST
Created attachment 294983 [details]
test case
Comment 6 Said Abou-Hallawa 2016-11-16 15:39:31 PST
Created attachment 294987 [details]
test case
Comment 7 paladox 2016-11-16 15:59:53 PST
Hi I am trying to get img to work without having to set src. I am trying to use css background-image property to set the image but when I doint set the src, it creates a grey border. But on Internet Explorer this works (uses different web engine).
Comment 8 Jon Lee 2016-11-16 16:00:50 PST
So what are you doing on other browsers that also show a gray border?
Comment 9 paladox 2016-11-16 16:08:36 PST
(In reply to comment #8)
> So what are you doing on other browsers that also show a gray border?

I'm trying to not set src because I have created a patch for gerrit but I not really know how to program in java so I just had to re use a public function that allowed me to get the image I wanted. But the image was inside a background-image: css property. But if I only add a class to img and doint set a valid image in src, it will show a grey border. I would really like it if the grey border could be removed please?

See here https://gerrit-review.googlesource.com/#/c/91471/10/gerrit-gwtui/src/main/java/com/google/gerrit/client/change/Labels.java

scroll to line

203

and

211

I had to set that src with a blank image otherwise a grey border will show.

But it is unlikely they will merge the patch since that is just a work around.

Line 202 is where I set the class for the image

same for line 210
Comment 10 Said Abou-Hallawa 2016-11-16 18:03:40 PST
(In reply to comment #7)
> Hi I am trying to get img to work without having to set src. I am trying to
> use css background-image property to set the image but when I doint set the
> src, it creates a grey border. But on Internet Explorer this works (uses
> different web engine).

You should not use the <img> element in this case. You can apply the css background-image property to any other element like <span> or <div> for example. The background image is rendered by the same routine for all elements.
Comment 11 paladox 2016-11-17 00:50:14 PST
Oh I tryed using that but it just moves the other elements out of place.

But Internet Explorer dosent get a grey border if you do this.