Incorrect rendering of SVG <radialGradient>s where the start circle is outside the end circle
Categories
(Core :: SVG, defect)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox79 | --- | verified |
People
(Reporter: fsoder, Assigned: longsonr)
References
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.113 Safari/537.36 OPR/68.0.3618.55 (Edition beta)
Steps to reproduce:
Load the attached testcase.
Actual results:
The top gradient (using SVG <radialGradient>) renders differently to the same gradient (the bottom gradient) rendered using <canvas>. It appears to clamp the location of the start circle ('fx', 'fy', 'fr') to the edge of the end circle ('cx', 'cy', 'r').
Expected results:
The top and bottom gradients should look the same.
The clamping of the location seems to follow SVG 1.1: https://www.w3.org/TR/SVG11/pservers.html#RadialGradients
But per SVG2 there should be no clamping: https://svgwg.org/svg2-draft/pservers.html#RadialGradientNotes
|
||
Comment 1•4 years ago
|
||
Bugbug thinks this bug should belong to this component, but please revert this change in case of error.
|
Assignee | |
Updated•4 years ago
|
|
|
Assignee | |
Comment 2•4 years ago
|
||
|
|
Assignee | |
Comment 4•4 years ago
•
|
||
Removing the clamping makes the reporters testcase work but other gradients (i.e. two of the gradients in https://dxr.mozilla.org/mozilla-central/source/layout/reftests/svg/radialGradient-basic-03.svg) are oddly cut off. Chrome cuts them off too, Safari displays the parts that Firefox and Chrome cut off in black.
|
||
Updated•4 years ago
|
|
|
Assignee | |
Comment 5•4 years ago
|
||
We have to remove one of the radialGradient-basic-03-ref.svg tests (id=gradient5)
because it's testing clamping i.e. an fr just inside the radius is the same as
just outside and that's no longer true. Two of the other references are now different
due to the lack of clamping. Note that the test and reference are similar but
not identical gradients so we're not expecting an exact match here.
|
||
Updated•4 years ago
|
|
|
Assignee | |
Comment 6•4 years ago
|
||
This change makes us match Chrome, but not Safari. Safari doesn't clamp but displays black areas if the gradient would have been subject to SVG 1.1 clamping. We also now match canvas.
|
|
Assignee | |
Comment 7•4 years ago
|
||
No-fuzz: https://treeherder.mozilla.org/#/jobs?repo=try&revision=f23f6d6a434cd8d49b10b5e857e045e9229e594d
Some fuzz (only windows webrender fails): https://treeherder.mozilla.org/#/jobs?repo=try&revision=41a9a9c3fcbf1a8aada5e0fab43faf732153ac60
Green: https://treeherder.mozilla.org/#/jobs?repo=try&revision=8f5fdc0626021a63d69ce715eeed77428a1ea360
Pushed by longsonr@gmail.com: https://hg.mozilla.org/integration/autoland/rev/c98948afa16b Stop clamping radialGradients. r=dholbert
|
||
Comment 9•4 years ago
|
||
| bugherder | ||
|
||
Updated•4 years ago
|
|
||
Comment 10•4 years ago
|
||
Reproduced with Firefox 78.0a1 (20200514211114) on Ubuntu 18.04 and Windows 10x64 using the attached test case.
The issue is verified fixed with Firefox 79.0b9 on Windows 10x64, macOS 10.12 and Ubuntu 18.04.
Description
•