Bug 15266 - Canvas shadows on gradients and patterns don't work sensibly
Summary: Canvas shadows on gradients and patterns don't work sensibly
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 523.x (Safari 3)
Hardware: PC Windows Server 2003
: P2 Normal
Assignee: Nobody
: 20933 (view as bug list)
Depends on:
Reported: 2007-09-23 15:26 PDT by Philip Taylor
Modified: 2011-06-02 20:55 PDT (History)
7 users (show)

See Also:

test case (1.03 KB, text/html)
2007-09-23 15:27 PDT, Philip Taylor
no flags Details
output from http://philip.html5.org/demos/canvas/shadows/various.html (5.89 KB, image/png)
2007-09-23 16:51 PDT, Philip Taylor
no flags Details
output from earlier test case (4.98 KB, image/png)
2007-09-23 16:54 PDT, Philip Taylor
no flags Details
Test repro case (2.99 KB, text/html)
2010-08-19 12:44 PDT, Michael Lamb
no flags Details
PNG of expected rendering of Test Repro Case (deleted)
2010-08-19 12:45 PDT, Michael Lamb
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Philip Taylor 2007-09-23 15:26:18 PDT
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.)
Comment 1 Philip Taylor 2007-09-23 15:27:41 PDT
Created attachment 16364 [details]
test case

This does some minimal testing of the behaviour.
Comment 2 Adam Roben (:aroben) 2007-09-23 15:32:05 PDT
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.
Comment 3 Adam Roben (:aroben) 2007-09-23 15:33:10 PDT
(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.
Comment 4 Philip Taylor 2007-09-23 16:51:19 PDT
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.
Comment 5 Philip Taylor 2007-09-23 16:54:32 PDT
Created attachment 16367 [details]
output from earlier test case

I see this, with the same WebKit/Safari versions.
Comment 6 Michael Lamb 2010-08-19 12:44:12 PDT
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.
Comment 7 Michael Lamb 2010-08-19 12:45:10 PDT
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
Comment 8 Michael Lamb 2010-08-19 12:47:13 PDT
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
Comment 9 Mihai Parparita 2010-12-10 17:53:34 PST
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).
Comment 10 Helder Correia 2011-01-05 19:40:08 PST
(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.
Comment 11 Andrei Popescu 2011-01-06 10:06:33 PST
It looks like these tests were fixed on non-Skia platforms (i.e. Mac) by 

Comment 12 Mihai Parparita 2011-01-06 11:22:56 PST
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.
Comment 13 John Krueger 2011-04-25 16:15:21 PDT
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.
Comment 14 Simon Fraser (smfr) 2011-06-02 20:55:11 PDT
*** Bug 20933 has been marked as a duplicate of this bug. ***