Bug 176500 - SVG linear gradient - wrong stop color when offset is 100%
Summary: SVG linear gradient - wrong stop color when offset is 100%
Status: RESOLVED WORKSFORME
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: Other
Hardware: PC Windows 10
: P2 Normal
Assignee: Nobody
URL:
Keywords: Qt
Depends on:
Blocks:
 
Reported: 2017-09-07 03:36 PDT by antisergey
Modified: 2017-09-08 13:19 PDT (History)
3 users (show)

See Also:


Attachments
Picture: expected (FF, Chrome) vs actual (WebKit) (9.86 KB, image/png)
2017-09-07 03:36 PDT, antisergey
no flags Details
test case (1.04 KB, image/svg+xml)
2017-09-07 09:18 PDT, Said Abou-Hallawa
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description antisergey 2017-09-07 03:36:25 PDT
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.
Comment 1 antisergey 2017-09-07 03:45:43 PDT
Maybe there's something like in https://bugs.webkit.org/show_bug.cgi?id=41484
Comment 2 Said Abou-Hallawa 2017-09-07 09:18:04 PDT
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.
Comment 3 Said Abou-Hallawa 2017-09-07 09:18:54 PDT
Created attachment 320119 [details]
test case
Comment 4 Konstantin Tokarev 2017-09-08 13:19:22 PDT
Yep, this is a bug in a platform-specific Gradient implementation