Shapes with gradients and patterns should get shadowed like any other shape or image. The bottom three examples of http://philip.html5.org/demos/canvas/shadows/various.html demonstrates the cases, and http://philip.html5.org/demos/canvas/shadows/expected.png is how I think it should be rendered.
WebKit appears to treat patterns as if they were totally solid, and does something weirder with gradients.
(There's no specification of how shadows should behave, but http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-June/011799.html is my suggestion.)
Created attachment 16364 [details]
This does some minimal testing of the behaviour.
The pattern part of your testcase and <http://philip.html5.org/demos/canvas/shadows/various.html> both work fine for me, though I do see problems with the gradients.
(In reply to comment #2)
> The pattern part of your testcase and
> <http://philip.html5.org/demos/canvas/shadows/various.html> both work fine for
> me, though I do see problems with the gradients.
Sorry, that was a bit unclear. I don't see any problems with patterns+shadows in either your testcase or the page at philip.html5.org. I do see problems with gradients+shadows in both of those. I'm testing using ToT WebKit on Windows XP.
Created attachment 16366 [details]
output from http://philip.html5.org/demos/canvas/shadows/various.html
From the bottom of various.html, I see this with r25699 (from nightly.webkit.org) on Win2003, and also with r25567 on Win2000, both in Safari 3.0.3.
Created attachment 16367 [details]
output from earlier test case
I see this, with the same WebKit/Safari versions.
Created attachment 64888 [details]
Test repro case
HTML page showing shadow rendering bug.
1. Rectangle with gradient fill and shadow
2. Stroked circle with gradient fill and shadow
3. Rectagle with solid fill and shadow
4. Circle with solid fill and shadow
5. Stroked rectagle with shadow
6. Stroked circle with shadow
7. Text with gradient fill, and shadow.
8. Text with gradient stroke, and shadow
9. Text with solid fill and shadow
10. Text with solid stroke, and shadow.
Created attachment 64889 [details]
PNG of expected rendering of Test Repro Case
This is a PNG of the expected rendering of the Test Repro Case
I am able to reproduce this with:
Mac OS X Version 10.6.4
Safari Version 5.0.1 (6533.17.8)
Model Name: MacBook Pro
Model Identifier: MacBookPro4,1
Processor Name: Intel Core 2 Duo
Processor Speed: 2.6 GHz
Number Of Processors: 1
Total Number Of Cores: 2
L2 Cache: 6 MB
Memory: 4 GB
Bus Speed: 800 MHz
Boot ROM Version: MBP41.00C1.B03
SMC Version (system): 1.28f2
I briefly investigated this. It looks like the problem is that the GraphicsContext::fillRect implementation in GraphicsContextCG.cpp ignores shadows altogether for the case where there's a gradient. It ends up clipping to the rect to the filled and calling Gradient::Paint (as implemented in GradientCG.cpp). That just uses CGContextDrawLinearGradient, which doesn't use the context shadow.
Fixing this probably involves drawing the gradient into a temporary CG context and then drawing it into the canvas one using the codepath that drawImage uses, which uses drop shadows (and does the right thing for alpha).
(In reply to comment #9)
I just found this bug accidentally. Your analysis is totally correct. I recently noticed the issue with gradients+shadow and have fixed it in bug 51869.
It looks like these tests were fixed on non-Skia platforms (i.e. Mac) by
Marking this as fixed, since bug 51869/http://trac.webkit.org/changeset/75139 fixed this for Mac. Bug 51989 is open about the Chromium/Skia failures, other ports should open bugs as appropriate.
using WebKit r84622, and the code here: http://jsfiddle.net/simevidas/MDgR3/ I am unable to see a shadow on the text that has a gradient.
*** Bug 20933 has been marked as a duplicate of this bug. ***