Bug 159401 – When copying embedded SVG, CSS is not retained.

• Status: NEW
• Component: WebKit2

[Samuel Williams]

Created attachment 282693 [details]
A case which shows the issue.

When copying either via the API or using Command-C, from the attached sample, and then pasting into Mail.app, the circular pie-chart shows black.

There is possibly an additional bug where the sample also shows only one pie chart but on loading in Safari shows two. Not sure why. Perhaps it's evaluating the JavaScript code a second time?

[Samuel Williams]

Another way to reproduce this is to go to https://gionkunz.github.io/chartist-js/ and copy the charts and paste into Mail.app. It shows up as black shapes, i.e. without styles applied.

[Samuel Williams]

Created attachment 282701 [details]
Example of copying into Mail.app from chartist-js website.

[Samuel Williams]

Tried copying from Chrome.. issue was still similar.

[Samuel Williams]

Created attachment 282702 [details]
Results of copying from Chrome.

[Samuel Williams]

If the issue is similar from Chrome and Safari, i.e. the pasteboard content is similar but rendering is broken in both instances, is the problem related to how the pasteboard content is rendered? I assume webkit is responsible for rendering in Mail.app? Could it be a sandbox-related issue? I also noticed for the web archive, quick look was generating some odd previews.

For example, when the preview was the thumbnail type, the shape was black. But when pressing spacebar to open quick look preview, it rendered correctly. Odd.

[Samuel Williams]

Managed to work around the issue by traversing the SVG DOM and using getComputedStyle to apply fill and other related CSS properties as inline styles. Then, copying works.

Here is a simple example of the code I used:

function embedSVGStyle(element) {
	Array.prototype.forEach.call(element.children, function(child) {
		embedSVGStyle(child);
	});
	
	var computedStyle = getComputedStyle(element);
	element.style.fill = computedStyle.fill;
}

Attached is a picture showing it working.

[Samuel Williams]

Created attachment 282705 [details]
Example showing inline stylesheets working.