Source/WebCore/ChangeLog

 12018-09-10 Justin Michaud <justin_michaud@apple.com>
 2
 3 [CG] gradients do not support spreadMethod
 4 https://bugs.webkit.org/show_bug.cgi?id=5968
 5
 6 Add support for spreadMethod=repeat and reflect. Also, the opacity of a gradient is now
 7 be the result of multiplying stop-opacity with the opacity of the color.
 8
 9 Reviewed by NOBODY (OOPS!).
 10
 11 Tests: svg/gradients/spreadMethod-expected.svg
 12 svg/gradients/spreadMethod.svg
 13 svg/gradients/spreadMethodAlpha-expected.svg
 14 svg/gradients/spreadMethodAlpha.svg
 15 svg/gradients/spreadMethodClose0-expected-mismatch.svg
 16 svg/gradients/spreadMethodClose0.svg
 17 svg/gradients/spreadMethodClose1-expected-mismatch.svg
 18 svg/gradients/spreadMethodClose1.svg
 19 svg/gradients/spreadMethodClose2-expected.svg
 20 svg/gradients/spreadMethodClose2.svg
 21 svg/gradients/spreadMethodDiagonal-expected.svg
 22 svg/gradients/spreadMethodDiagonal.svg
 23 svg/gradients/spreadMethodDiagonal2-expected.svg
 24 svg/gradients/spreadMethodDiagonal2.svg
 25 svg/gradients/spreadMethodDuplicateStop-expected.svg
 26 svg/gradients/spreadMethodDuplicateStop.svg
 27 svg/gradients/spreadMethodReversed-expected.svg
 28 svg/gradients/spreadMethodReversed.svg
 29 svg/gradients/stopAlpha-expected.svg
 30 svg/gradients/stopAlpha.svg
 31
 32 * platform/graphics/cg/GradientCG.cpp:
 33 (WebCore::Gradient::paint):
 34 * svg/SVGStopElement.cpp:
 35 (WebCore::SVGStopElement::stopColorIncludingOpacity const):
 36
1372018-09-05 Zalan Bujtas <zalan@apple.com>
238
339 [LFC] Construct the Display::Box objects on demand.

Source/WebCore/platform/graphics/cg/GradientCG.cpp

@@void Gradient::paint(GraphicsContext& context)
106106void Gradient::paint(CGContextRef platformContext)
107107{
108108 CGGradientDrawingOptions extendOptions = kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation;
 109 CGGradientRef gradient = platformGradient();
109110
110111 WTF::switchOn(m_data,
111112 [&] (const LinearData& data) {
112  CGContextDrawLinearGradient(platformContext, platformGradient(), data.point0, data.point1, extendOptions);
 113 switch (m_spreadMethod) {
 114 case SpreadMethodRepeat:
 115 case SpreadMethodReflect: {
 116 FloatPoint gradientVectorNorm = data.point1 + -data.point0;
 117 gradientVectorNorm.normalize();
 118 CGFloat angle = acos(gradientVectorNorm.dot(FloatPoint(1, 0)));
 119
 120 CGAffineTransform transform = CGAffineTransformMakeRotation(-angle);
 121 FloatPoint point0 = CGPointApplyAffineTransform(data.point0, transform);
 122 FloatPoint point1 = CGPointApplyAffineTransform(data.point1, transform);
 123
 124 CGContextSaveGState(platformContext);
 125 CGContextRotateCTM(platformContext, angle);
 126
 127 CGRect boundingBox = CGContextGetClipBoundingBox(platformContext);
 128 CGFloat width = point1.x() - point0.x();
 129 CGFloat pixelSize = abs(CGContextConvertSizeToUserSpace(platformContext, CGSizeMake(1, 1)).width);
 130
 131 if (width > 0) {
 132 if (width < pixelSize)
 133 width = pixelSize;
 134
 135 bool flip = m_spreadMethod == SpreadMethodReflect;
 136 for (CGFloat end = point0.x(); end >= boundingBox.origin.x; end -= width) {
 137 CGContextDrawLinearGradient(platformContext, gradient, CGPointMake(flip? end : end - width, 0), CGPointMake(flip? end - width : end, 0), 0);
 138 if (m_spreadMethod == SpreadMethodReflect)
 139 flip = !flip;
 140 }
 141 flip = false;
 142 for (CGFloat start = point0.x(); start <= boundingBox.origin.x + boundingBox.size.width; start += width) {
 143 CGContextDrawLinearGradient(platformContext, gradient, CGPointMake(flip? start + width : start, 0), CGPointMake(flip? start : start + width, 0), 0);
 144 if (m_spreadMethod == SpreadMethodReflect)
 145 flip = !flip;
 146 }
 147
 148 CGContextRestoreGState(platformContext);
 149 break;
 150 }
 151
 152 CGContextRestoreGState(platformContext);
 153 U_FALLTHROUGH;
 154 }
 155 case SpreadMethodPad:
 156 CGContextDrawLinearGradient(platformContext, gradient, data.point0, data.point1, extendOptions);
 157 }
113158 },
114159 [&] (const RadialData& data) {
115160 bool needScaling = data.aspectRatio != 1;

Source/WebCore/svg/SVGStopElement.cpp

@@Color SVGStopElement::stopColorIncludingOpacity() const
9999 return Color(Color::transparent, true); // Transparent black.
100100
101101 const SVGRenderStyle& svgStyle = style->svgStyle();
102  return colorWithOverrideAlpha(svgStyle.stopColor().rgb(), svgStyle.stopOpacity());
 102 return colorWithOverrideAlpha(svgStyle.stopColor().rgb(), svgStyle.stopColor().alpha() / 255.0 * svgStyle.stopOpacity());
103103}
104104
105105}

LayoutTests/ChangeLog

 12018-09-10 Justin Michaud <justin_michaud@apple.com>
 2
 3 [CG] gradients do not support spreadMethod
 4 https://bugs.webkit.org/show_bug.cgi?id=5968
 5
 6 Add new svg tests for linear gradients with spreadMethod, and alpha values specified in
 7 both stop-opacity and color.
 8
 9 Reviewed by NOBODY (OOPS!).
 10
 11 * platform/mac/svg/W3C-SVG-1.1/pservers-grad-10-b-expected.png:
 12 * svg/gradients/spreadMethod-expected.svg: Added.
 13 * svg/gradients/spreadMethod.svg: Added.
 14 * svg/gradients/spreadMethodAlpha-expected.svg: Added.
 15 * svg/gradients/spreadMethodAlpha.svg: Added.
 16 * svg/gradients/spreadMethodClose0-expected-mismatch.svg: Added.
 17 * svg/gradients/spreadMethodClose0.svg: Added.
 18 * svg/gradients/spreadMethodClose1-expected-mismatch.svg: Added.
 19 * svg/gradients/spreadMethodClose1.svg: Added.
 20 * svg/gradients/spreadMethodClose2-expected.svg: Added.
 21 * svg/gradients/spreadMethodClose2.svg: Added.
 22 * svg/gradients/spreadMethodDiagonal-expected.svg: Added.
 23 * svg/gradients/spreadMethodDiagonal.svg: Added.
 24 * svg/gradients/spreadMethodDiagonal2-expected.svg: Added.
 25 * svg/gradients/spreadMethodDiagonal2.svg: Added.
 26 * svg/gradients/spreadMethodDuplicateStop-expected.svg: Added.
 27 * svg/gradients/spreadMethodDuplicateStop.svg: Added.
 28 * svg/gradients/spreadMethodReversed-expected.svg: Added.
 29 * svg/gradients/spreadMethodReversed.svg: Added.
 30 * svg/gradients/stopAlpha-expected.svg: Added.
 31 * svg/gradients/stopAlpha.svg: Added.
 32
1332018-09-05 Truitt Savell <tsavell@apple.com>
234
335 Rebaseline test after changes in https://trac.webkit.org/changeset/235669/webkit deleted the expectation.

LayoutTests/platform/mac/svg/W3C-SVG-1.1/pservers-grad-10-b-expected.png

d847f84b53a110668e402b1c79e5565b

4bdaa70f9bc5ab69c7049bcdba88ac63

LayoutTests/svg/gradients/spreadMethod-expected.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <rect x="10" y="35" width="115" height="55" fill="green"/>
 3 <rect x="125" y="35" width="345" height="55" fill="blue"/>
 4
 5 <rect x="10" y="120" width="115" height="55" fill="green"/>
 6 <rect x="125" y="120" width="115" height="55" fill="blue"/>
 7 <rect x="240" y="120" width="115" height="55" fill="blue"/>
 8 <rect x="355" y="120" width="115" height="55" fill="green"/>
 9
 10 <rect x="10" y="205" width="115" height="55" fill="green"/>
 11 <rect x="125" y="205" width="115" height="55" fill="blue"/>
 12 <rect x="240" y="205" width="115" height="55" fill="green"/>
 13 <rect x="355" y="205" width="115" height="55" fill="blue"/>
 14</svg>

LayoutTests/svg/gradients/spreadMethod.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <linearGradient id="base-grad" x1="0" y1="0" x2="50%" y2="0">
 3 <stop stop-color="green" offset="0"/>
 4 <stop stop-color="green" offset="0.5"/>
 5 <stop stop-color="blue" offset="0.5"/>
 6 <stop stop-color="blue" offset="1"/>
 7 </linearGradient>
 8
 9 <linearGradient id="pad-grad" xlink:href="#base-grad" spreadMethod="pad" />
 10 <linearGradient id="pad-reflect" xlink:href="#base-grad" spreadMethod="reflect" />
 11 <linearGradient id="pad-repeat" xlink:href="#base-grad" spreadMethod="repeat" />
 12
 13 <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
 14
 15 <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
 16
 17 <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
 18</svg>

LayoutTests/svg/gradients/spreadMethodAlpha-expected.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <rect x="10" y="35" width="115" height="55" fill="rgba(255,0,0,0.5)"/>
 3 <rect x="125" y="35" width="345" height="55" fill="rgba(0,255,0,0.5)"/>
 4
 5 <rect x="10" y="120" width="115" height="55" fill="rgba(255,0,0,0.5)"/>
 6 <rect x="125" y="120" width="230" height="55" fill="rgba(0,255,0,0.5)"/>
 7 <rect x="355" y="120" width="115" height="55" fill="rgba(255,0,0,0.5)"/>
 8
 9 <rect x="10" y="205" width="115" height="55" fill="rgba(255,0,0,0.5)"/>
 10 <rect x="125" y="205" width="115" height="55" fill="rgba(0,255,0,0.5)"/>
 11 <rect x="240" y="205" width="115" height="55" fill="rgba(255,0,0,0.5)"/>
 12 <rect x="355" y="205" width="115" height="55" fill="rgba(0,255,0,0.5)"/>
 13</svg>

LayoutTests/svg/gradients/spreadMethodAlpha.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <linearGradient id="base-grad" x1="0" y1="0" x2="50%" y2="0">
 3 <stop stop-color="rgba(255,0,0,0.5)" offset="0"/>
 4 <stop stop-color="rgba(255,0,0,0.5)" offset="0.5"/>
 5 <stop stop-color="rgba(0,255,0,0.5)" offset="0.5"/>
 6 <stop stop-color="rgba(0,255,0,0.5)" offset="1"/>
 7 </linearGradient>
 8
 9 <linearGradient id="pad-grad" xlink:href="#base-grad" spreadMethod="pad" />
 10 <linearGradient id="pad-reflect" xlink:href="#base-grad" spreadMethod="reflect" />
 11 <linearGradient id="pad-repeat" xlink:href="#base-grad" spreadMethod="repeat" />
 12
 13 <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
 14
 15 <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
 16
 17 <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
 18</svg>

LayoutTests/svg/gradients/spreadMethodClose0-expected-mismatch.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <rect x="10" y="35" width="460" height="55" fill="green"/>
 3 <rect x="10" y="120" width="460" height="55" fill="green"/>
 4 <rect x="10" y="205" width="460" height="55" fill="green"/>
 5</svg>

LayoutTests/svg/gradients/spreadMethodClose0.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <linearGradient id="base-grad" x1="0.49" y1="0" x2="0.5" y2="0">
 3 <stop stop-color="green" offset="0"/>
 4 <stop stop-color="green" offset="0.5"/>
 5 <stop stop-color="blue" offset="0.5"/>
 6 <stop stop-color="blue" offset="1"/>
 7 </linearGradient>
 8
 9 <linearGradient id="pad-grad" xlink:href="#base-grad" spreadMethod="pad" />
 10 <linearGradient id="pad-reflect" xlink:href="#base-grad" spreadMethod="reflect" />
 11 <linearGradient id="pad-repeat" xlink:href="#base-grad" spreadMethod="repeat" />
 12
 13 <rect x="10" y="35" width="100" height="55" fill="url(#pad-grad)"/>
 14
 15 <rect x="10" y="120" width="100" height="55" fill="url(#pad-reflect)"/>
 16
 17 <rect x="10" y="205" width="100" height="55" fill="url(#pad-repeat)"/>
 18</svg>

LayoutTests/svg/gradients/spreadMethodClose1-expected-mismatch.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <rect x="10" y="35" width="460" height="55" fill="green"/>
 3 <rect x="10" y="120" width="460" height="55" fill="green"/>
 4 <rect x="10" y="205" width="460" height="55" fill="green"/>
 5</svg>

LayoutTests/svg/gradients/spreadMethodClose1.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <linearGradient id="base-grad" x1="0.4999999" y1="0" x2="0.5" y2="0">
 3 <stop stop-color="green" offset="0"/>
 4 <stop stop-color="green" offset="0.5"/>
 5 <stop stop-color="blue" offset="0.5"/>
 6 <stop stop-color="blue" offset="1"/>
 7 </linearGradient>
 8
 9 <linearGradient id="pad-grad" xlink:href="#base-grad" spreadMethod="pad" />
 10 <linearGradient id="pad-reflect" xlink:href="#base-grad" spreadMethod="reflect" />
 11 <linearGradient id="pad-repeat" xlink:href="#base-grad" spreadMethod="repeat" />
 12
 13 <rect x="10" y="35" width="100" height="55" fill="url(#pad-grad)"/>
 14
 15 <rect x="10" y="120" width="100" height="55" fill="url(#pad-reflect)"/>
 16
 17 <rect x="10" y="205" width="100" height="55" fill="url(#pad-repeat)"/>
 18</svg>

LayoutTests/svg/gradients/spreadMethodClose2-expected.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <rect x="10" y="35" width="460" height="55" fill="green"/>
 3 <rect x="10" y="120" width="460" height="55" fill="green"/>
 4 <rect x="10" y="205" width="460" height="55" fill="green"/>
 5</svg>

LayoutTests/svg/gradients/spreadMethodClose2.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <linearGradient id="base-grad" x1="0.5" y1="0" x2="0.5" y2="0">
 3 <stop stop-color="green" offset="0"/>
 4 <stop stop-color="green" offset="0.5"/>
 5 <stop stop-color="blue" offset="0.5"/>
 6 <stop stop-color="blue" offset="1"/>
 7 </linearGradient>
 8
 9 <linearGradient id="pad-grad" xlink:href="#base-grad" spreadMethod="pad" />
 10 <linearGradient id="pad-reflect" xlink:href="#base-grad" spreadMethod="reflect" />
 11 <linearGradient id="pad-repeat" xlink:href="#base-grad" spreadMethod="repeat" />
 12
 13 <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
 14
 15 <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
 16
 17 <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
 18</svg>

LayoutTests/svg/gradients/spreadMethodDiagonal-expected.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <rect x="10" y="35" width="460" height="13.75" fill="green"/>
 3 <rect x="10" y="48.75" width="460" height="41.25" fill="blue"/>
 4
 5 <rect x="10" y="120" width="460" height="13.75" fill="green"/>
 6 <rect x="10" y="133.75" width="460" height="27.5" fill="blue"/>
 7 <rect x="10" y="161.25" width="460" height="13.75" fill="green"/>
 8
 9 <rect x="10" y="205" width="460" height="13.75" fill="green"/>
 10 <rect x="10" y="218.75" width="460" height="13.75" fill="blue"/>
 11 <rect x="10" y="232.5" width="460" height="13.75" fill="green"/>
 12 <rect x="10" y="246.25" width="460" height="13.75" fill="blue"/>
 13
 14 <rect x="10" y="48" width="460" height="2" fill="grey"/>
 15
 16 <rect x="10" y="133" width="460" height="2" fill="grey"/>
 17 <rect x="10" y="161" width="460" height="2" fill="grey"/>
 18
 19 <rect x="10" y="218" width="460" height="2" fill="grey"/>
 20 <rect x="10" y="232" width="460" height="2" fill="grey"/>
 21 <rect x="10" y="246" width="460" height="2" fill="grey"/>
 22</svg>

LayoutTests/svg/gradients/spreadMethodDiagonal.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <linearGradient id="base-grad" x1="0" y1="0" x2="50%" y2="0">
 3 <stop stop-color="green" offset="0"/>
 4 <stop stop-color="green" offset="0.5"/>
 5 <stop stop-color="blue" offset="0.5"/>
 6 <stop stop-color="blue" offset="1"/>
 7 </linearGradient>
 8
 9 <linearGradient id="pad-grad" xlink:href="#base-grad" spreadMethod="pad" gradientTransform="rotate(90)" />
 10 <linearGradient id="pad-reflect" xlink:href="#base-grad" spreadMethod="reflect" gradientTransform="rotate(90)" />
 11 <linearGradient id="pad-repeat" xlink:href="#base-grad" spreadMethod="repeat" gradientTransform="rotate(90)" />
 12
 13 <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
 14
 15 <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
 16
 17 <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
 18
 19 <rect x="10" y="48" width="460" height="2" fill="grey"/>
 20
 21 <rect x="10" y="133" width="460" height="2" fill="grey"/>
 22 <rect x="10" y="161" width="460" height="2" fill="grey"/>
 23
 24 <rect x="10" y="218" width="460" height="2" fill="grey"/>
 25 <rect x="10" y="232" width="460" height="2" fill="grey"/>
 26 <rect x="10" y="246" width="460" height="2" fill="grey"/>
 27</svg>

LayoutTests/svg/gradients/spreadMethodDiagonal2-expected.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <rect x="10" y="35" width="460" height="13.75" fill="green"/>
 3 <rect x="10" y="48.75" width="460" height="41.25" fill="blue"/>
 4
 5 <rect x="10" y="120" width="460" height="13.75" fill="green"/>
 6 <rect x="10" y="133.75" width="460" height="27.5" fill="blue"/>
 7 <rect x="10" y="161.25" width="460" height="13.75" fill="green"/>
 8
 9 <rect x="10" y="205" width="460" height="13.75" fill="green"/>
 10 <rect x="10" y="218.75" width="460" height="13.75" fill="blue"/>
 11 <rect x="10" y="232.5" width="460" height="13.75" fill="green"/>
 12 <rect x="10" y="246.25" width="460" height="13.75" fill="blue"/>
 13
 14 <rect x="10" y="48" width="460" height="2" fill="grey"/>
 15
 16 <rect x="10" y="133" width="460" height="2" fill="grey"/>
 17 <rect x="10" y="161" width="460" height="2" fill="grey"/>
 18
 19 <rect x="10" y="218" width="460" height="2" fill="grey"/>
 20 <rect x="10" y="232" width="460" height="2" fill="grey"/>
 21 <rect x="10" y="246" width="460" height="2" fill="grey"/>
 22</svg>

LayoutTests/svg/gradients/spreadMethodDiagonal2.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <linearGradient id="base-grad" x1="0" y1="0" x2="0" y2="50%">
 3 <stop stop-color="green" offset="0"/>
 4 <stop stop-color="green" offset="0.5"/>
 5 <stop stop-color="blue" offset="0.5"/>
 6 <stop stop-color="blue" offset="1"/>
 7 </linearGradient>
 8
 9 <linearGradient id="pad-grad" xlink:href="#base-grad" spreadMethod="pad" />
 10 <linearGradient id="pad-reflect" xlink:href="#base-grad" spreadMethod="reflect" />
 11 <linearGradient id="pad-repeat" xlink:href="#base-grad" spreadMethod="repeat" />
 12
 13 <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
 14
 15 <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
 16
 17 <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
 18
 19 <rect x="10" y="48" width="460" height="2" fill="grey"/>
 20
 21 <rect x="10" y="133" width="460" height="2" fill="grey"/>
 22 <rect x="10" y="161" width="460" height="2" fill="grey"/>
 23
 24 <rect x="10" y="218" width="460" height="2" fill="grey"/>
 25 <rect x="10" y="232" width="460" height="2" fill="grey"/>
 26 <rect x="10" y="246" width="460" height="2" fill="grey"/>
 27</svg>

LayoutTests/svg/gradients/spreadMethodDuplicateStop-expected.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <rect x="10" y="35" width="115" height="55" fill="green"/>
 3 <rect x="125" y="35" width="345" height="55" fill="blue"/>
 4
 5 <rect x="10" y="120" width="115" height="55" fill="green"/>
 6 <rect x="125" y="120" width="115" height="55" fill="blue"/>
 7 <rect x="240" y="120" width="115" height="55" fill="blue"/>
 8 <rect x="355" y="120" width="115" height="55" fill="green"/>
 9
 10 <rect x="10" y="205" width="115" height="55" fill="green"/>
 11 <rect x="125" y="205" width="115" height="55" fill="blue"/>
 12 <rect x="240" y="205" width="115" height="55" fill="green"/>
 13 <rect x="355" y="205" width="115" height="55" fill="blue"/>
 14</svg>

LayoutTests/svg/gradients/spreadMethodDuplicateStop.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <linearGradient id="base-grad" x1="0" y1="0" x2="0.5" y2="0">
 3 <stop stop-color="green" offset="0"/>
 4 <stop stop-color="green" offset="0.5"/>
 5 <stop stop-color="red" offset="0.5"/>
 6 <stop stop-color="blue" offset="0.5"/>
 7 <stop stop-color="blue" offset="1"/>
 8 </linearGradient>
 9
 10 <linearGradient id="pad-grad" xlink:href="#base-grad" spreadMethod="pad" />
 11 <linearGradient id="pad-reflect" xlink:href="#base-grad" spreadMethod="reflect" />
 12 <linearGradient id="pad-repeat" xlink:href="#base-grad" spreadMethod="repeat" />
 13
 14 <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
 15
 16 <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
 17
 18 <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
 19</svg>

LayoutTests/svg/gradients/spreadMethodReversed-expected.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <rect x="10" y="35" width="115" height="55" fill="blue"/>
 3 <rect x="125" y="35" width="345" height="55" fill="green"/>
 4
 5 <rect x="10" y="120" width="115" height="55" fill="blue"/>
 6 <rect x="125" y="120" width="115" height="55" fill="green"/>
 7 <rect x="240" y="120" width="115" height="55" fill="green"/>
 8 <rect x="355" y="120" width="115" height="55" fill="blue"/>
 9
 10 <rect x="10" y="205" width="115" height="55" fill="blue"/>
 11 <rect x="125" y="205" width="115" height="55" fill="green"/>
 12 <rect x="240" y="205" width="115" height="55" fill="blue"/>
 13 <rect x="355" y="205" width="115" height="55" fill="green"/>
 14</svg>

LayoutTests/svg/gradients/spreadMethodReversed.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <linearGradient id="base-grad" x1="50%" y1="0" x2="0" y2="0">
 3 <stop stop-color="green" offset="0"/>
 4 <stop stop-color="green" offset="0.5"/>
 5 <stop stop-color="blue" offset="0.5"/>
 6 <stop stop-color="blue" offset="1"/>
 7 </linearGradient>
 8
 9 <linearGradient id="pad-grad" xlink:href="#base-grad" spreadMethod="pad" />
 10 <linearGradient id="pad-reflect" xlink:href="#base-grad" spreadMethod="reflect" />
 11 <linearGradient id="pad-repeat" xlink:href="#base-grad" spreadMethod="repeat" />
 12
 13 <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
 14
 15 <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
 16
 17 <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
 18</svg>

LayoutTests/svg/gradients/stopAlpha-expected.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <rect x="10" y="35" width="115" height="55" fill="rgba(0,255,0,0.25)"/>
 3 <rect x="125" y="35" width="345" height="55" fill="rgba(0,0,255,0.25)"/>
 4
 5 <rect x="10" y="120" width="115" height="55" fill="rgba(0,255,0,0.25)"/>
 6 <rect x="125" y="120" width="115" height="55" fill="rgba(0,0,255,0.25)"/>
 7 <rect x="240" y="120" width="115" height="55" fill="rgba(0,0,255,0.25)"/>
 8 <rect x="355" y="120" width="115" height="55" fill="rgba(0,255,0,0.25)"/>
 9
 10 <rect x="10" y="205" width="115" height="55" fill="rgba(0,255,0,0.25)"/>
 11 <rect x="125" y="205" width="115" height="55" fill="rgba(0,0,255,0.25)"/>
 12 <rect x="240" y="205" width="115" height="55" fill="rgba(0,255,0,0.25)"/>
 13 <rect x="355" y="205" width="115" height="55" fill="rgba(0,0,255,0.25)"/>
 14</svg>

LayoutTests/svg/gradients/stopAlpha.svg

 1<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 2 <linearGradient id="base-grad" x1="0" y1="0" x2="50%" y2="0">
 3 <stop stop-color="rgba(0,255,0,0.5)" offset="0" stop-opacity="0.5" />
 4 <stop stop-color="rgba(0,255,0,0.5)" offset="0.5" stop-opacity="0.5" />
 5 <stop stop-color="rgba(0,0,255,0.5)" offset="0.5" stop-opacity="0.5" />
 6 <stop stop-color="rgba(0,0,255,0.5)" offset="1" stop-opacity="0.5" />
 7 </linearGradient>
 8
 9 <linearGradient id="pad-grad" xlink:href="#base-grad" spreadMethod="pad" />
 10 <linearGradient id="pad-reflect" xlink:href="#base-grad" spreadMethod="reflect" />
 11 <linearGradient id="pad-repeat" xlink:href="#base-grad" spreadMethod="repeat" />
 12
 13 <rect x="10" y="35" width="460" height="55" fill="url(#pad-grad)"/>
 14
 15 <rect x="10" y="120" width="460" height="55" fill="url(#pad-reflect)"/>
 16
 17 <rect x="10" y="205" width="460" height="55" fill="url(#pad-repeat)"/>
 18</svg>