Implementation of Inset Box Shadow on image elements

http://dl.dropbox.com/u/952/pola/index.html

I have submitted this as a "bug" to all major browsers [1], but given
that all browsers implement it this way, I think there needs to be
clarification in the spec.

Basically, the inset box-shadow in the spec is to be rendered in this way [2]:

"The shadow effects are applied front-to-back: the first shadow is on
top and the others are layered behind. Shadows do not influence layout
and may overlap other boxes or their shadows. 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)."

But in the case of an image element, I think it makes more sense to
render the box-shadow ABOVE the image itself, rather than behind it
(as the latest betas of Opera/IE/Safari/Chrome/Firefox are doing,
check the above URL, where the translucent image on the right shows
this).

There are several use cases for box-shadows on images, one of which is
outlined in the URL above, and to replicate the same effect requires a
wrapper HTML element and at least 13 more lines of CSS.

I think the "expected' behavior would be that the box-shadow render
above the image than under it.

- Divya


[1] Mozilla's bug report explains this issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=581601
[2] http://dev.w3.org/csswg/css3-background/#the-box-shadow

Received on Saturday, 24 July 2010 01:25:23 UTC