1649040 - Printing SVG with mask does not match preview

Status: RESOLVED FIXED

(Core :: Printing: Output, defect)

Description

[Ted]

Attachment: testsvg.pdf

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0

Steps to reproduce:

1. Copy Masking example at https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking#Masking to a local svg file

2. Click printer icon to preview the print. Looks OK.

3. Click Print...

4. Select a real printer or Microsoft Print to PDF (same problem results for both)

5. Print

Here's the sample code for reference:

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="black" />
<stop offset="1" stop-color="white" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
</mask>
</defs>

<rect x="0" y="0" width="200" height="200" fill="green" />
<rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>

Actual results:

The preview looks fine, but the print does comes out with a very different image.

Expected results:

The print should match the image and preview, at least approximately.

The problem also occurs with embedded SVG images on HTML5 webpages.

Comment 1

[Ted]

The original task was to fade out the edges of a photo using a radial gradient. The workaround for that was:
Overlay another image with a gradient from transparency in the middle to background color (tested and works)

I also tried another workaround but it also failed in a similar manner
Use css property mask-image: radial-gradient (also fails)

Comment 2

[Ted]

This feature used to work earlier this year - maybe a month or two ago. It broke just recently. I was using radial gradient to get the effect and it a browser upgrade between then and now broke it. So after I found a workaround, I found and tested a similar simple example illustrating the problem and cited it for this report.

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 4

[Robert Longson [:longsonr]]

If it broke recently it's a regression. Could you use the https://mozilla.github.io/mozregression/ tool to find out when it broke and post the results here please?

Comment 5

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Hello! Attaching here the regression range made on Windows 10x64 using Print to Pdf function:
Last good revision: f7ec497fd3334e98072da15e81f44ebafa72c15a (2019-06-22)
First bad revision: a8c21ee98a4c2f683335b8358c11b2fceb863f05 (2019-06-23)
INFO: Pushlog:
https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=f7ec497fd3334e98072da15e81f44ebafa72c15a&tochange=a8c21ee98a4c2f683335b8358c11b2fceb863f05

Comment 6

[Sean Voisen (:svoisen)]

If print preview is working correctly, but the actual print is broken, my guess from the regression range is bug 1539702.

Jeff: Any ideas?

Comment 7

[Jeff Muizelaar [:jrmuizel]]

Yep, this almost certainly bug 1539702

Comment 8

[Jeff Muizelaar [:jrmuizel]]

It looks like a weird thing is going on with the scale during printing and that confuses things.

Comment 9

[Ted]

It broke on 2019-06-23 (was working on 2019-06-22 central build)

Mozregression Details:
app_name: firefox
build_date: 2019-06-23
build_file: C:\Users\shane.mozilla\mozregression\persist\2019-06-23--mozilla-central--firefox-69.0a1.en-US.win64.zip
build_type: nightly
build_url: https://archive.mozilla.org/pub/firefox/nightly/2019/06/2019-06-23-21-50-20-mozilla-central/firefox-69.0a1.en-US.win64.zip
changeset: a8c21ee98a4c2f683335b8358c11b2fceb863f05
pushlog_url: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=f7ec497fd3334e98072da15e81f44ebafa72c15a&tochange=a8c21ee98a4c2f683335b8358c11b2fceb863f05
repo_name: mozilla-central
repo_url: https://hg.mozilla.org/mozilla-central

Comment 10

[Ted]

Details for the previous WORKING build of 2019-06022

GOOD:
app_name: firefox
build_date: 2019-06-22
build_file: C:\Users\shane.mozilla\mozregression\persist\2019-06-22--mozilla-central--firefox-69.0a1.en-US.win64.zip
build_type: nightly
build_url: https://archive.mozilla.org/pub/firefox/nightly/2019/06/2019-06-22-21-47-27-mozilla-central/firefox-69.0a1.en-US.win64.zip
changeset: f7ec497fd3334e98072da15e81f44ebafa72c15a
pushlog_url: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=f7ec497fd3334e98072da15e81f44ebafa72c15a&tochange=b23bd78e4d949c20a5e83f852958cd5fa58e02ea
repo_name: mozilla-central
repo_url: https://hg.mozilla.org/mozilla-central

Comment 11

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Here's a testcase (HTML with SVG from the mdn page), for convenience.

I confirmed that I do see the bug when printing this page to PDF (on linux)

Comment 12

[Jeff Muizelaar [:jrmuizel]]

Attachment: Bug 1649040. Properly set the transform on the clipped surface.

This changes DrawTargetWrapAndRecord::CreateClippedDrawTarget to
properly set the transform on the newly created DrawTarget
to match DrawTargetRecording::CreateClippedDrawTarget.

More interestingly, it adds a print reftest that
ensures that this code is actually excerised.

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/23f3cd957926
Properly set the transform on the clipped surface. r=mstange

Comment 14

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/24429 for changes under testing/web-platform/tests

Comment 15

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 16

[Jeff Muizelaar [:jrmuizel]]

Comment on attachment 9161099 [details]
Bug 1649040. Properly set the transform on the clipped surface.

Beta/Release Uplift Approval Request

• User impact if declined: Some content (mostly SVG) will print incorrectly
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): The fix was an obvious omission from the regressing change. It lasted so long because the printing code paths are very poorly tested. The new tests shows correct behaviour and finally tests this code path.
• String changes made/needed:

Comment 17

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/23f3cd957926

Comment 18

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 19

[Jeff Muizelaar [:jrmuizel]]

Attachment: Bug 1649040. Add some more masking and some fuzz to the test.

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/67c1841b4ef4
Add some more masking and some fuzz to the test.

Comment 21

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/24438 for changes under testing/web-platform/tests

Comment 22

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.

Comment 23

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/67c1841b4ef4

Comment 24

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 25

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9161099 [details]
Bug 1649040. Properly set the transform on the clipped surface.

Fixes a longstanding SVG printing regression. Approved for 79.0b5. Thanks for including a test.

Comment 26

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/87320df16f72
https://hg.mozilla.org/releases/mozilla-beta/rev/e2821ae37192