<image> in <svg> <pattern> is filled incorrectly in window.print()

UNCONFIRMED
Unassigned

Status

()

Product:
Core
Component:
SVG
Importance:
P3
normal
Status:
UNCONFIRMED
Reported:
2 years ago
Modified:
a year ago

People

(Reporter: snowfalcon.z, Unassigned)

Tracking

Version:
54 Branch
Points:
---

Firefox Tracking Flags

(firefox57 wontfix, firefox58 wontfix, firefox59 ?)

Details

Attachments

(2 attachments)

Output from window.print
12.69 KB, application/pdf
Details
reporter's testcase
1020 bytes, text/html
Details
(Reporter)

Description

•
2 years ago 
Created attachment 8882771 [details]
Output from window.print

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

Steps to reproduce:

Open the following html in firefox. This will call window.print() onload.

<html>
<head>
<title>TEST SVG</title>
<meta charset="utf-8"/>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
</head>
<body onload="window.print()">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="watermark" style="position: absolute; z-index: 10; display: block; width: 5724px; height: 16665px; top: 112px;">
    <defs> 
        <pattern id="watermarkPattern" patternUnits="userSpaceOnUse" width="250px" height="250px"> 
			<rect x="0" y="0" width="50" height="50" fill="skyblue"/>
			<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Template_doc_page_icon.svg/200px-Template_doc_page_icon.svg.png" x="0" y="0" 
        </pattern> 
    </defs> 
    <rect style="stroke-width:3;stroke:rgb(0,0,0); fill: url(#watermarkPattern) " x="0" y="0" height="100%" width="100%"></rect>
</svg>
</body>
</html>


Actual results:

After printing, only the <rect> is filled across the page. the <image> is not repeatedly filled. (Screenshot attached)

This issue does not occur if you use "Print Preview" feature of firefox to print.
This issue does not occur when invoking window.print() from Chrome/IE11.


Expected results:

<image> should fill the page similar to how <rect> does in print.

Comment 1

•
2 years ago 
we don't yet support svg <image> elements that have no width and height attributes so I don't expect that to display whether you're printing or not.
 (Reporter)

Comment 2

•
2 years ago 
I am sorry. I made a mistake in the html file.  The <image> element should have height and width attributes. Please see the updated html below. I can see the image in both normal display and "Print Preview" of Firefox but not in window.print()

<html>
<head>
<title>TEST SVG</title>
<meta charset="utf-8"/>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
</head>
<body onload="window.print()">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="watermark" style="position: absolute; z-index: 10; display: block; width: 5724px; height: 16665px; top: 112px;">
    <defs> 
        <pattern id="watermarkPattern" patternUnits="userSpaceOnUse" width="250px" height="250px"> 
			<rect x="0" y="0" width="50" height="50" fill="skyblue"/>
			<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Template_doc_page_icon.svg/200px-Template_doc_page_icon.svg.png" x="0" y="0" width="200" height="200"
        </pattern> 
    </defs> 
    <rect style="stroke-width:3;stroke:rgb(0,0,0); fill: url(#watermarkPattern) " x="0" y="0" height="100%" width="100%"></rect>
</svg>
</body>
</html>
 (Reporter)

Comment 3

•
2 years ago 
Updated HTML with height and width set in <image>
==================================================

<html>
<head>
<title>TEST SVG</title>
<meta charset="utf-8"/>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=edge">
</head>
<body onload="window.print()">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="watermark" style="position: absolute; z-index: 10; display: block; width: 5724px; height: 16665px; top: 112px;">
    <defs> 
        <pattern id="watermarkPattern" patternUnits="userSpaceOnUse" width="250px" height="250px"> 
		<rect x="0" y="0" width="50" height="50" fill="skyblue"/>
		<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Template_doc_page_icon.svg/200px-Template_doc_page_icon.svg.png" x="0" y="0" width="200" height="200"></image> 
        </pattern> 
    </defs> 
    <rect style="stroke-width:3;stroke:rgb(0,0,0); fill: url(#watermarkPattern) " x="0" y="0" height="100%" width="100%"></rect>
</svg>
</body>
</html>

Comment 4

•
2 years ago 
Created attachment 8882782 [details]
reporter's testcase
Attachment #8882782 - Attachment mime type: text/plain → text/html
Component: Untriaged → SVG
Product: Firefox → Core
Priority: -- → P3
status-firefox57: --- → wontfix
status-firefox58: --- → fix-optional
You need to log in before you can comment on or make changes to this bug.