Bug 19942 – Printing of CSS gradients does not work properly

• Component: Printing
• Status: NEW

[Torsten Radtke]

CSS gradients lack their transparency and boundaries if printed from r35024 on a Mac OS X 10.5.4 system. Iff the background-repeat property is set to "no-repeat" the transparency of the gradient colors seems to be ignored as well as the size (gradient fills the element even if its size is smaller). No problems are visible when background-repeat is set to "repeat", "repeat-x", or "repeat-y".

Example:

test.xml:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="test.css"?>
<book>
Lorem ipsum dolor.
</book>

test.css:

book {
	display: block;
	width: 200px; border:1px solid black; padding: 10px; margin: 10px; 
	background-image: -webkit-gradient(linear, 0 0, 0 20, from(rgba(127,0,0,0.5)), to(rgba(0,127,0,0.0)));
	background-repeat: no-repeat;
}

[Torsten Radtke]

Created attachment 22420 [details]
Test case XML file

[Torsten Radtke]

Created attachment 22421 [details]
Test case CSS file

[Robert Blaut]

Confirmed.

[Tim Horton]

(In reply to comment #0)
> CSS gradients lack their transparency and boundaries if printed from r35024 on a Mac OS X 10.5.4 system. Iff the background-repeat property is set to "no-repeat" the transparency of the gradient colors seems to be ignored as well as the size (gradient fills the element even if its size is smaller). No problems are visible when background-repeat is set to "repeat", "repeat-x", or "repeat-y".

I don't know about size, but transparency is also broken when printing SVG gradients. See https://bugs.webkit.org/show_bug.cgi?id=63371

[Tim Horton]

<rdar://problem/9724098>

[Dan Beam]

Created attachment 118169 [details]
another HTML test case for linear gradients not printing

[Dan Beam]

I believe the scope of this goes further than just MacOS 10.5.  Printing linear gradients with rgba() still doesn't work for me today using Chromium 17.0.963.0 (Chromium r113143, Webkit r101876) and the behavior seems to be incorrect on all platforms that I tried (Windows, Mac, Linux).

On Windows and Linux the gradient simply wasn't shown and on MacOS the gradient was shown without alpha (so an rgba(255,255,255,1) -> rgba(255,255,255,.5) gradient like I was using just looked white).

Here's the text case I was looking at:
http://fiddle.jshell.net/qjRxP/27/show/ (also attached).

Screenshots of each OS will be attached shortly.

[Dan Beam]

Created attachment 118170 [details]
what's expected

[Dan Beam]

Created attachment 118171 [details]
result on linux

[Dan Beam]

Created attachment 118172 [details]
result on windows

[Dan Beam]

Created attachment 118173 [details]
result on mac

[Dan Beam]

Removing MacOS qualifier in title as this has issues on all platforms (please change back if this is wrong thing to do).

[Allan Sandfeld Jensen]

It prints correctly in the Qt port.

[Chris Rebert]

Still repros in recent Nightly.