| Summary: | SVG fill gradients don't support P3 color space | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | wk1 | ||||
| Component: | SVG | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | dino, sabouhallawa, sam, simon.fraser, thorton, webkit-bug-importer, zimmermann | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari 12 | ||||||
| Hardware: | Mac | ||||||
| OS: | macOS 10.14 | ||||||
| See Also: | https://bugs.webkit.org/show_bug.cgi?id=212231 | ||||||
| Attachments: |
|
||||||
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? 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. 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()? 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) |
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)