581601 - -moz-box-shadow renders box-shadow behind an image element if specified for img

Status: RESOLVED INVALID

(Core :: Web Painting, defect)

Description

[u382751]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; en-US) AppleWebKit/534.3 (KHTML, like Gecko) Chrome/6.0.466.4 Safari/534.3
Build Identifier: 4.0b3pre

The spec says box-shadow should render on all elements.  The inset shadow seems to render behind the contents of the element, this would be fine for all elements except the image element, where it should render in front of the image to serve any useful purpose. 

You can see this in action on the URL mentioned. The left image does not seem to have any box-shadow, but the right image (which is a transparent version of the left one) has them. 

Also reducing the opacity of the image does not seem to have any effect on getting the box-shadow to show. 

This is a cross-browser issue: Safari/Chrome/Opera/Firefox. 


Reproducible: Always

Steps to Reproduce:
1.Click the URL
2.
3.
Actual Results:  
No box shadow on the image

Expected Results:  
There should be a inset box shadow on the image

http://dev.w3.org/csswg/css3-background/#the-box-shadow

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

This looks like how things are supposed to work.  Why do you think they should work some other way?

Comment 2

[u382751]

I assert that is not how it is supposed to work for image element. 

The spec says:

"The shadow effects are applied front-to-back: the first shadow is on top and the others are layered behind…In terms of stacking contexts and the painting order, the outer shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any)."

My view is the last sentence does not apply completely to an image element, given that typically it does not have a background.

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Image elements can have backgrounds, which you'll see when the image is partly or completely transparent.

Comment 4

[adam j. sontag]

Yes, but having an inset shadow on an image's background is simply not the same as the actual image having an inset shadow.

http://jsbin.com/asede3/2

Comment 5

[Boris Zbarsky [:bzbarsky]]

Marking invalid, since this is what the spec in fact says we should do; bringing spec changes up on www-style as you did is the right thing.  If the discussion there leads to a spec change, please reopen.