Bug 176500 – SVG linear gradient - wrong stop color when offset is 100%

• Component: SVG
• Status: RESOLVED WORKSFORME

[antisergey]

Created attachment 320107 [details]
Picture: expected (FF, Chrome) vs actual (WebKit)

There's a linear gradient which has two stops with offset 100%. Element using this gradient is expected to be filled with first color, but it's filled with second.

I have the following svg-file to reproduce error:

<?xml version='1.0' encoding='UTF-8' standalone='yes'?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="800" style="background:ivory" xmlns="http://www.w3.org/2000/svg" height="600" xmlns:svg="http://www.w3.org/2000/svg">
  <defs>   
    <linearGradient x1="0%" spreadMethod="pad" id="lg1000" x2="0%" y2="0%" y1="100%">
      <stop stop-opacity="1" stop-color="red" offset="50%"/>
      <stop stop-opacity="1" stop-color="white" offset="50%"/>
    </linearGradient>
	<linearGradient x1="0%" spreadMethod="pad" id="lg1001" x2="0%" y2="0%" y1="100%">
      <stop stop-opacity="1" stop-color="red" offset="100%"/>
      <stop stop-opacity="1" stop-color="white" offset="100%"/>
    </linearGradient>
  </defs>
  <g visibility="visible" id="layer1">
    <rect width="110" id="el1000" fill="url(#lg1000)" transform="translate(294,128)" height="172" stroke="rgb(0,0,0)"/>
    <text text-anchor="middle" id="el1001" fill="rgb(0,0,0)" transform="translate(343,200)">50%</text>    
  </g>
  <g id="layer2">
    <rect width="110" id="el1002" fill="url(#lg1001)" transform="translate(494,128)" height="172" stroke="rgb(0,0,0)"/>
    <text text-anchor="middle" id="el1003" fill="rgb(0,0,0)" transform="translate(543,200)">100%</text>    
  </g>
</svg>


Second rectangle with linear gradient, which has offset for both colors 100%, is expected to be filled with first color, red - and it's red in browsers: Firefox, Chrome, even in MS Edge.

I use Qt port of WebKit (Qt version 5.5.1) and separate QtWebKit build for the latest version of Qt (https://github.com/annulen/webkit/), error is reproduced in both versions - second rectangle is filled with second color, it's white.

[antisergey]

Maybe there's something like in https://bugs.webkit.org/show_bug.cgi?id=41484

[Said Abou-Hallawa]

The test case works for me using the latest build of WebKit. I used Safari and Mini browser and both showed the SVG contents as expected. If this bug is reproducible only on Qt-WebKit, you may report this bug to Qt.

[Said Abou-Hallawa]

Created attachment 320119 [details]
test case

[Konstantin Tokarev]

Yep, this is a bug in a platform-specific Gradient implementation