SVG - support radialGradient fr attribute

This commit is contained in:
janekptacijarabaci 2017-08-17 20:27:14 +02:00 • committed by Roy Tam
commit 4ba6ca9106
10 changed files with 103 additions and 13 deletions

View file

@ -0,0 +1,27 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Test gradient fr attribute</title>
<defs>
<radialGradient id="grad1" fr="100%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="lime" />
</radialGradient>
<radialGradient id="grad2" xlink:href="#grad1"/>
<style>
circle {
stroke-width: 3px;
stroke: lime;
}
</style>
</defs>
<rect width="100%" height="100%" fill="lime"/>
<circle cx="100" cy="100" r="50" fill="url(#grad1)" />
<circle cx="300" cy="100" r="50" fill="url(#grad2)" />
</svg>

After

Width:  |  Height:  |  Size: 748 B

View file

@ -0,0 +1,28 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Test gradient fr attribute</title>
<defs>
<radialGradient id="grad1">
<stop offset="0%" stop-color="red" />
<stop offset="20%" stop-color="red" />
<stop offset="100%" stop-color="lime" />
</radialGradient>
<style>
.cover {
stroke-width: 3px;
stroke: lime;
fill: none;
image-rendering: optimizeSpeed;
}
</style>
</defs>
<rect width="100%" height="100%" fill="lime"/>
<circle cx="100" cy="100" r="50" fill="url(#grad1)" />
<circle class="cover" cx="100" cy="100" r="50" fill="none"/>
</svg>

After

Width:  |  Height:  |  Size: 795 B

View file

@ -0,0 +1,27 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Test gradient fr attribute</title>
<defs>
<radialGradient id="grad1" fr="10%">
<stop offset="0%" stop-color="red" />
<stop offset="100%" stop-color="lime" />
</radialGradient>
<style>
.cover {
stroke-width: 3px;
stroke: lime;
fill: none;
image-rendering: optimizeSpeed;
}
</style>
</defs>
<rect width="100%" height="100%" fill="lime"/>
<circle cx="100" cy="100" r="50" fill="url(#grad1)" />
<circle class="cover" cx="100" cy="100" r="50" />
</svg>

After

Width:  |  Height:  |  Size: 748 B

View file

@ -290,6 +290,8 @@ fuzzy-if(skiaContent,3,5) == pattern-scale-01c.svg pattern-scale-01-ref.svg
== radialGradient-basic-02.svg pass.svg
fuzzy-if(cocoaWidget,4,15982) fuzzy-if(winWidget,4,92) fuzzy-if(skiaContent,4,60) == radialGradient-basic-03.svg radialGradient-basic-03-ref.svg
== radialGradient-basic-04.svg pass.svg
== radialGradient-fr-01.svg pass.svg
fuzzy(1,3235) fuzzy-if(winWidget,1,6704) == radialGradient-fr-02.svg radialGradient-fr-02-ref.svg
fuzzy-if(skiaContent,1,3600) == rect-01.svg pass.svg
== rect-02.svg pass.svg
== rect-03.svg pass.svg

View file

@ -623,7 +623,7 @@ nsSVGRadialGradientFrame::GradientVectorLengthIsZero()
already_AddRefed<gfxPattern>
nsSVGRadialGradientFrame::CreateGradient()
{
float cx, cy, r, fx, fy;
float cx, cy, r, fx, fy, fr;
cx = GetLengthValue(dom::SVGRadialGradientElement::ATTR_CX);
cy = GetLengthValue(dom::SVGRadialGradientElement::ATTR_CY);
@ -631,6 +631,7 @@ nsSVGRadialGradientFrame::CreateGradient()
// If fx or fy are not set, use cx/cy instead
fx = GetLengthValue(dom::SVGRadialGradientElement::ATTR_FX, cx);
fy = GetLengthValue(dom::SVGRadialGradientElement::ATTR_FY, cy);
fr = GetLengthValue(dom::SVGRadialGradientElement::ATTR_FR);
if (fx != cx || fy != cy) {
// The focal point (fFx and fFy) must be clamped to be *inside* - not on -
@ -651,7 +652,7 @@ nsSVGRadialGradientFrame::CreateGradient()
}
}
RefPtr<gfxPattern> pattern = new gfxPattern(fx, fy, 0, cx, cy, r);
RefPtr<gfxPattern> pattern = new gfxPattern(fx, fy, fr, cx, cy, r);
return pattern.forget();
}