CSS Gradient test Gotcha, IE vs. other

Making some test cases for applying gradients on top of "something" for various browsers.  Since IE 7 - 9 doesn't  support gradient, so we will use the most compatible "gradient filter" for IE.  The test cases link will be at the end of this post.

In FF, Chrome and Safari, the result is the same as the following image :-

The above demo does not just only show you how to create different effects using gradients, but also includes some gotcha you may not know.  Please pay attention to box 3, 4, 7 and 8.

Box 3 and 4 - The background and the gradient is in the same box.  The order doesn't matter, the gradient will have more weight.  And the background will be covered by the gradient in both cases. 

Box 7 and 8 - Similar to the above, but we use "background-color" instead.  However, instead of being covered by gradient, the background color does show up.

So "background color" and "background image" could have different effects when used with gradient. And the next question will be why?  Since background color and background image both will fill the spaces, why background color will show up while background image won't.  I'm guessing this behavior is due to browser optimization, because calculating complex pixels in one shot could be slow.  But if you know the answer, feel free to let me know as well :)

Now it is IE's turn.  Actually IE's gradient filter play pretty well, and it doesn't have the background color and background image inconsistent issues.  Here is the screen shot, aIl E 7 - 9 looks the same.

See that?  The Box 3 and 4 background's image does show up.

So based on the above comparison, which gradient implementation is the correct one?  Is it the one covered the background image, or the one that doesn't?

My test cases page - http://jsfiddle.net/bf4hq/4/, you can test on various browsers and feel free to add more test cases to it that you found interesting and let me know :)

Extra
I created 2 more test cases, Box 9 and 10 .  What I tried to do is to see the result when I do some permutations on gradient, background-image and background-color.  And this is what I found here :-

For FF, Chrome and Safari

1. When you put background-image and gradient in the same box, gradient wins.
2. When you put background-color and gradient in the same box, both merges.
3. When you put background-image and background-color in the same box, background image wins.
4. When you put 3 together, background-color and gradient wins.

Below is what my Chrome browser told me, it's consistent with the results listed above, maybe it is the default behavior :)  Gradient and background image cannot lived in the same element ?!

And IE actually behaves a little bit different.  Well after all, IE's gradient-filter is not the same as css3 gradient.

That's interesting :)

For those who haven't known it yet, W3C gradient color code is sequenced as rgba, while IE gradient filter color code is sequenced as argb.  Be careful when you copy and paste color code around :)

If you are looking for how to apply background image and gradients on the same elements, I found a post - http://www.heresonesolution.com/2010/09/using-a-css-gradient-and-a-background-image-on-the-same-element/