359449 - Gradient on SVG Text using incorrect bounding box

Status: RESOLVED FIXED

(Core :: SVG, defect)

Description

[Patrick Sung]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20061010 Firefox/2.0

If we specify a gradient for the fill/stroke property for a text element. The SVG render the text, but using incorrect bounding box. This happens when there are other child element within the <text/> element, for example, if we have a <tspan/> within a <text/> as demonstrated by the SVG code below.


From the SVG 1.1 specification, section 10.4 (The 'text' element) 3rd paragraph:

It is possible to apply a gradient, pattern, clipping path, mask or filter to text. When one of these facilities is applied to text and keyword objectBoundingBox is used (see Object bounding box units) to specify a graphical effect relative to the "object bounding box", then the object bounding box units are computed relative to the entire 'text' element in all cases, even when different effects are applied to different 'tspan' elements within the same 'text' element.


The SVG example below draw a line of text, but inside the <text/> we added a <tspan/> to change the font size and different gradient fill. Had the <tspan/> not exist, the bounding box calculated for the <text/> is correct (from start of <text> to end of </text>). When <tspan/> is child of <text/> the renderer created 3 bounding boxes:
1. <text> to <tspan>
2. <tspan> to </tspan>
3. </tspan> to </text>
This results in 3 gradient instead of 2, which is what we should expect


Reproducible: Always

Steps to Reproduce:
Use the SVG sample code from "details"

Actual Results:  
3 different gradient text produced

Expected Results:  
2 gradient text

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="testrgrad" cx=".5" cy=".5" r=".5" >
      <stop offset="0" stop-color="yellow" />
      <stop offset="1" stop-color="navy" />
</radialGradient>
<linearGradient id="linearGradient01">
      <stop offset="0" stop-color="blue" />
      <stop offset="1" stop-color="red" />
</linearGradient>
</defs>
<text fill="url(#linearGradient01)" id="mytext" y="50">For example, if the parent element has a font size of "medium", <tspan font-size="40" fill="url(#testrgrad)">in tspan</tspan> a value of "larger" will make the font size of the current element be "large".</text>
</svg>

Comment 1

[tor]

Attachment: testcase as attachment

Comment 2

[tor]

Attachment: deja vu

Comment 3

[tor]

Checked in.