1490481 - background-clip: text not respected when printing to pdf

Status: RESOLVED WORKSFORME

(Core :: Printing: Output, defect, P3)

Description

[Alex Dytrych]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

Steps to reproduce:

HTML:

<style>
  #someText {
    font-size: 80px;
    font-weight: 700;
    background: linear-gradient(cyan, magenta);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
</style>

<div id="someText">Some Text</div>

Code Pen: https://codepen.io/anon/pen/zJWRge/

Open the HTML file or go to the above codepen and click to focus the preview window. Try to print the page and save it as a PDF. Make sure 'Print background images' and 'Print background colors' are checked.


Actual results:

The rendered PDF appears blank


Expected results:

The rendered PDF should contain the gradient text.

fwiw, Chrome also struggles with this - it renders a gradient rectangle (the background without the clip applied) https://bugs.chromium.org/p/chromium/issues/detail?id=883026

Comment 1

[Alex Dytrych]

Sorry, my original report was unclear - this isn't a problem with Firefox's built-in PDF viewer. It's a problem with the PDF that gets generated by Firefox when the page is printed.

Comment 2

[Sylvestre Ledru [:Sylvestre]]

ok, thanks

Comment 3

[Sylvestre Ledru [:Sylvestre]]

I am not sure which component is the correct

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

Comment 5

[Emilio Cobos Álvarez [:emilio]]

This seems to work for me now. Daniel can you confirm?

Comment 6

[Daniel Holbert [:dholbert]]

Works for me, too. (I tested "Save to PDF" with the new tab-modal printing UI, and I checked More Settings | Print Backgrounds.)