linearGradient renders black, not proper color, if width is less than 0.002 px before scaling

RESOLVED WONTFIX

Status

()

Core
SVG
RESOLVED WONTFIX
8 years ago
8 years ago

People

(Reporter: Clem Dickey, Unassigned)

Tracking

({testcase})

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment, 1 obsolete attachment)

582 bytes, image/svg+xml
Details
(Reporter)

Description

8 years ago
User-Agent:       Mozilla/5.0 (X11; Linux i686; rv:2.0b8pre) Gecko/20101011 Firefox/4.0b8pre
Build Identifier: 4.0b8pre

Wrong rendering of this xhtml/svg; see comments or actual/expected results:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<body>
<svg:svg version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0,0) scale(1,5000)">
<defs>
<linearGradient id="bl">
<stop offset="0%" stop-color="blue"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<g>
<!-- OK, renders blue -->
<rect fill="url(#bl)" height="0.002px" width="100px" y="0.000px"/>
<!-- Wrong, renders black -->
<rect fill="url(#bl)" height="0.001px" width="100px" y="0.002px"/>
<!-- OK, renders blue -->
<rect fill="blue" height="0.001px" width="100px" y="0.003px"/>
</g>
</g>
</svg:svg>
</body>
</html>


Reproducible: Always

Steps to Reproduce:
1. Copy the XML data in details to a file.
2. "Open File" in Mozilla.


Actual Results:  
All three rectangle backgrounds: the top and bottom rectangles are blue, but the middle rectangle is black.

Expected Results:  
All three rectangle backgrounds: the .002 width linearGradient, the 0.001 width linearGradient, and the 0.001 width solid fill; should be blue.

Only tried on Linux; may apply to all.
Can you use the Add an attachment link to add your testcase as a file please rather than pasting it inline as a comment.
(Reporter)

Comment 2

8 years ago
Created attachment 482394 [details]
bug demo
(Reporter)

Comment 3

8 years ago
Sorry, I missed that option. It is now an attachment.
(Reporter)

Comment 4

8 years ago
Created attachment 482411 [details]
simpler bug demo
Attachment #482394 - Attachment is obsolete: true
I can confirm the black Line on http://hg.mozilla.org/mozilla-central/rev/5a41a70eb631 (WinXP), it's okay/blue on Chrome 7/Opera 10.7.
Component: General → SVG
Keywords: testcase
OS: Linux → All
QA Contact: general → general
We use cairo as a graphics engine. It has a coordinate system that is 32 bits. We've divided that up as 24 bits for integers + 8 bits of floating precision. The smallest non-zero value is therefore 1/256 or about 0.003

0.002px is closer to 0.003 so that's OK.

0.001px is closer to 0 than 0.003 so that means the rect has a height of zero unscaled and the gradient code takes that as a degenerate case and doesn't draw it.

We're pretty much stuck with 24.8, we tried 16.16 but it was much more common to find bigger numbers than smaller ones. That was bug 384681.

All I can suggest is that you use larger numbers.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 8 years ago
Resolution: --- → WONTFIX
(Reporter)

Comment 7

8 years ago
Thanks for the explanation. My SVG was computer-generated, and I figured "why not use the native values in the inner graphic, and scale later?" Now I know. I wasn't aware that the graphics engine used fixed point. (And to be pedantic, it does sound like *fixed* precision, not *floating* precision.) I will change the program to scale earlier, and make things fit the 24.8 representation.
You need to log in before you can comment on or make changes to this bug.