cburgmer/firefoxBackgroundBug.html

## firefoxBackgroundBug.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Test case for bug in Firefox where a background image in a SVG isn't rendered to the canvas unless a workaround is applied</title>
</head>
<body>
    <canvas id="canvas" style="border:1px solid black;" width="200" height="200"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas"),
            html = '<div style="padding: 10px; width: 100%; height: 100%; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAKUlEQVQ4jWNYt27df2Lwo0ePiMIMowaOGjgsDSRWIbEWjxo4auCwNBAAenk4PB4atggAAAAASUVORK5CYII=);">' +
                "You should see a chess board like background image here. If not enable workaroundFirefoxBug() in the source code." +
                '</div>';

        function htmlToXml(html) {
            var doc = document.implementation.createHTMLDocument("");
            doc.documentElement.innerHTML = html;

            doc.documentElement.setAttribute("xmlns", doc.documentElement.namespaceURI);
            return (new window.XMLSerializer()).serializeToString(doc.documentElement);
        }

        function getSvgForXml(html, width, height) {
            return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
                    '<foreignObject width="100%" height="100%">' +
                        html +
                    '</foreignObject>' +
                '</svg>';
        }

        function buildImageUrl(svg) {
            return "data:image/svg+xml;charset=utf-8," + svg;
        }

        function drawSvgToCanvas(svg, canvas) {
            var context = canvas.getContext("2d");

            var image = new window.Image();
            image.onload = function() {
                context.drawImage(image, 0, 0);
            };
            image.src = buildImageUrl(svg);
        }

        function workaroundFirefoxBug(backgroundImageUrl) {
            var div = document.createElement("div");
            div.style.backgroundImage = "url(" + backgroundImageUrl + ")";
            document.getElementsByTagName("body")[0].appendChild(div);
        }

        window.onload = function () {
            workaroundFirefoxBug("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAKUlEQVQ4jWNYt27df2Lwo0ePiMIMowaOGjgsDSRWIbEWjxo4auCwNBAAenk4PB4atggAAAAASUVORK5CYII=");

            drawSvgToCanvas(getSvgForXml(htmlToXml(html), canvas.width, canvas.height), canvas);
        };
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>Test case for bug in Firefox where a background image in a SVG isn't rendered to the canvas unless a workaround is applied</title>
	</head>
	<body>
	<canvas id="canvas" style="border:1px solid black;" width="200" height="200"></canvas>
	<script type="text/javascript">
	var canvas = document.getElementById("canvas"),
	html = '<div style="padding: 10px; width: 100%; height: 100%; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAKUlEQVQ4jWNYt27df2Lwo0ePiMIMowaOGjgsDSRWIbEWjxo4auCwNBAAenk4PB4atggAAAAASUVORK5CYII=);">' +
	"You should see a chess board like background image here. If not enable workaroundFirefoxBug() in the source code." +
	'</div>';

	function htmlToXml(html) {
	var doc = document.implementation.createHTMLDocument("");
	doc.documentElement.innerHTML = html;

	doc.documentElement.setAttribute("xmlns", doc.documentElement.namespaceURI);
	return (new window.XMLSerializer()).serializeToString(doc.documentElement);
	}

	function getSvgForXml(html, width, height) {
	return '<svg xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '">' +
	'<foreignObject width="100%" height="100%">' +
	html +
	'</foreignObject>' +
	'</svg>';
	}

	function buildImageUrl(svg) {
	return "data:image/svg+xml;charset=utf-8," + svg;
	}

	function drawSvgToCanvas(svg, canvas) {
	var context = canvas.getContext("2d");

	var image = new window.Image();
	image.onload = function() {
	context.drawImage(image, 0, 0);
	};
	image.src = buildImageUrl(svg);
	}

	function workaroundFirefoxBug(backgroundImageUrl) {
	var div = document.createElement("div");
	div.style.backgroundImage = "url(" + backgroundImageUrl + ")";
	document.getElementsByTagName("body")[0].appendChild(div);
	}

	window.onload = function () {
	workaroundFirefoxBug("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAKUlEQVQ4jWNYt27df2Lwo0ePiMIMowaOGjgsDSRWIbEWjxo4auCwNBAAenk4PB4atggAAAAASUVORK5CYII=");

	drawSvgToCanvas(getSvgForXml(htmlToXml(html), canvas.width, canvas.height), canvas);
	};
	</script>
	</body>
	</html>