Bug 198628 – SVG fill gradients don't support P3 color space

• Status: NEW
• Component: SVG

Created attachment 371534 [details]
Test case

WebKit doesn't render gradients containing display-p3 colors correctly.

The attached SVG file shows a square filled with a blue linear gradient and a circle filled with a flat purple color. All colors are in display-p3 color space and are specified using CSS color() syntax. The circle renders as expected, but the fill of the square is white.

Environment:
Safari 12.1.1 (14607.2.6.1.1)
macOS 10.14.5 (18F132)

[Radar WebKit Bug Importer]

<rdar://problem/51511996>

The bug is related to how WebCore incorporates the opacity of the stop into the color of the stop. For combining the stop's color and opacity, the color is converted to RGBA32, which doesn't work for extended (i.e. P3) colors.

There is a FIXME comment present that the current approach should be changed, but it notes that the corresponding member function of Color rounds the alpha component differently and is therefore not used.

https://trac.webkit.org/browser/webkit/trunk/Source/WebCore/svg/SVGStopElement.cpp#L98

What is the suggested way to proceed?

[Simon Fraser (smfr)]

As of https://trac.webkit.org/changeset/262035/webkit, the gradient now shows up. I'm not sure if it's using extended color correctly. yet.

[Sam Weinig]

Cool. We should probably add a test case for this then. Not sure what our best bet is. Ref-test vs. the same css gradient? Some pixel poking getImageData()?

[Sam Weinig]

As for accuracy, I am also not sure. The general gradient code uses a color space called kCGColorSpaceExtendedSRGB when any stop contains an extended color. I haven't been able to find any good documentation on that colorspace and whether P3 is a subset of it. (Not mention, "correct" here is not really defined yet - https://github.com/w3c/csswg-drafts/issues/4647)