Canvas shadows on gradients and patterns don't work sensibly

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Philip Taylor]

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.)

[Philip Taylor]

Created attachment 16364 [details]
test case

This does some minimal testing of the behaviour.

[Adam Roben (:aroben)]

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.

[Adam Roben (:aroben)]

(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.

[Philip Taylor]

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.

[Philip Taylor]

Created attachment 16367 [details]
output from earlier test case

I see this, with the same WebKit/Safari versions.

[Michael Lamb]

Created attachment 64888 [details]
Test repro case

HTML page showing shadow rendering bug.

Cases Rendered:
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.

[Michael Lamb]

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

[Michael Lamb]

I am able to reproduce this with:

Mac OS X Version 10.6.4
Safari Version 5.0.1 (6533.17.8)

Hardward details:
  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

[Mihai Parparita]

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).

[Helder Correia]

(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.

[Andrei Popescu]

It looks like these tests were fixed on non-Skia platforms (i.e. Mac) by 

http://trac.webkit.org/changeset/75139

[Mihai Parparita]

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.

[John Krueger]

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.

[Simon Fraser (smfr)]

*** Bug 20933 has been marked as a duplicate of this bug. ***