Skip to content

Commit f646805

Browse files
author
Christoph Burgmer
committed
Fix duplicate style element when zooming. Closes #65"
1 parent 463ee41 commit f646805

File tree

5 files changed

+71
-28
lines changed

5 files changed

+71
-28
lines changed

‎dist/rasterizeHTML.allinone.js

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rasterizeHTML.js

+33-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! rasterizeHTML.js - v0.9.1 - 2014-06-16
1+
/*! rasterizeHTML.js - v0.9.1 - 2014-06-18
22
* http://www.github.com/cburgmer/rasterizeHTML.js
33
* Copyright (c) 2014 Christoph Burgmer; Licensed MIT */
44
(function(root, factory) {
@@ -713,8 +713,7 @@
713713
};
714714

715715
var zoomedElementSizingAttributes = function (size, zoomFactor) {
716-
var zoomHtmlInject = '',
717-
closestScaledWith, closestScaledHeight,
716+
var closestScaledWith, closestScaledHeight,
718717
offsetX, offsetY;
719718

720719
zoomFactor = zoomFactor || 1;
@@ -724,17 +723,38 @@
724723
offsetX = -size.left;
725724
offsetY = -size.top;
726725

726+
var attributes = {
727+
'x': offsetX,
728+
'y': offsetY,
729+
'width': closestScaledWith,
730+
'height': closestScaledHeight
731+
};
732+
727733
if (zoomFactor !== 1) {
728-
zoomHtmlInject = ' style="' +
734+
attributes.style =
729735
'-webkit-transform: scale(' + zoomFactor + '); ' +
730736
'-webkit-transform-origin: 0 0; ' +
731737
'transform: scale(' + zoomFactor + '); ' +
732-
'transform-origin: 0 0;"';
738+
'transform-origin: 0 0;';
739+
}
740+
741+
return attributes;
742+
};
743+
744+
var workAroundCollapsingMarginsAcrossSVGElementInWebKitLike = function (attributes) {
745+
var style = attributes.style || '';
746+
attributes.style = style + 'float: left;';
747+
};
748+
749+
var serializeAttributes = function (attributes) {
750+
var keys = Object.keys(attributes);
751+
if (!keys.length) {
752+
return '';
733753
}
734754

735-
return ' x="' + offsetX + '" y="' + offsetY + '"' +
736-
' width="' + closestScaledWith + '" height="' + closestScaledHeight + '"' +
737-
zoomHtmlInject;
755+
return ' ' + keys.map(function (key) {
756+
return key + '="' + attributes[key] + '"';
757+
}).join(' ');
738758
};
739759

740760
module.getSvgForDocument = function (doc, size, zoomFactor) {
@@ -745,9 +765,13 @@
745765

746766
browser.validateXHTML(xhtml);
747767

768+
var attributes = zoomedElementSizingAttributes(size, zoomFactor);
769+
770+
workAroundCollapsingMarginsAcrossSVGElementInWebKitLike(attributes);
771+
748772
return (
749773
'<svg xmlns="http://www.w3.org/2000/svg" width="' + size.width + '" height="' + size.height + '">' +
750-
'<foreignObject' + zoomedElementSizingAttributes(size, zoomFactor) + '>' +
774+
'<foreignObject' + serializeAttributes(attributes) + '>' +
751775
xhtml +
752776
'</foreignObject>' +
753777
'</svg>'

‎dist/rasterizeHTML.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/render.js

+30-11
Original file line numberDiff line numberDiff line change
@@ -124,8 +124,7 @@ var render = (function (util, browser, documentHelper, xmlserializer, ayepromise
124124
};
125125

126126
var zoomedElementSizingAttributes = function (size, zoomFactor) {
127-
var zoomHtmlInject = '',
128-
closestScaledWith, closestScaledHeight,
127+
var closestScaledWith, closestScaledHeight,
129128
offsetX, offsetY;
130129

131130
zoomFactor = zoomFactor || 1;
@@ -135,21 +134,38 @@ var render = (function (util, browser, documentHelper, xmlserializer, ayepromise
135134
offsetX = -size.left;
136135
offsetY = -size.top;
137136

137+
var attributes = {
138+
'x': offsetX,
139+
'y': offsetY,
140+
'width': closestScaledWith,
141+
'height': closestScaledHeight
142+
};
143+
138144
if (zoomFactor !== 1) {
139-
zoomHtmlInject = ' style="' +
145+
attributes.style =
140146
'-webkit-transform: scale(' + zoomFactor + '); ' +
141147
'-webkit-transform-origin: 0 0; ' +
142148
'transform: scale(' + zoomFactor + '); ' +
143-
'transform-origin: 0 0;"';
149+
'transform-origin: 0 0;';
144150
}
145151

146-
return ' x="' + offsetX + '" y="' + offsetY + '"' +
147-
' width="' + closestScaledWith + '" height="' + closestScaledHeight + '"' +
148-
zoomHtmlInject;
152+
return attributes;
153+
};
154+
155+
var workAroundCollapsingMarginsAcrossSVGElementInWebKitLike = function (attributes) {
156+
var style = attributes.style || '';
157+
attributes.style = style + 'float: left;';
149158
};
150159

151-
var workAroundCollapsingMarginsAcrossSVGElementInWebKitLike = function () {
152-
return ' style="float: left;"';
160+
var serializeAttributes = function (attributes) {
161+
var keys = Object.keys(attributes);
162+
if (!keys.length) {
163+
return '';
164+
}
165+
166+
return ' ' + keys.map(function (key) {
167+
return key + '="' + attributes[key] + '"';
168+
}).join(' ');
153169
};
154170

155171
module.getSvgForDocument = function (doc, size, zoomFactor) {
@@ -160,10 +176,13 @@ var render = (function (util, browser, documentHelper, xmlserializer, ayepromise
160176

161177
browser.validateXHTML(xhtml);
162178

179+
var attributes = zoomedElementSizingAttributes(size, zoomFactor);
180+
181+
workAroundCollapsingMarginsAcrossSVGElementInWebKitLike(attributes);
182+
163183
return (
164184
'<svg xmlns="http://www.w3.org/2000/svg" width="' + size.width + '" height="' + size.height + '">' +
165-
'<foreignObject' + zoomedElementSizingAttributes(size, zoomFactor) +
166-
workAroundCollapsingMarginsAcrossSVGElementInWebKitLike() + '>' +
185+
'<foreignObject' + serializeAttributes(attributes) + '>' +
167186
xhtml +
168187
'</foreignObject>' +
169188
'</svg>'

‎test/specs/RenderSpec.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ describe("The rendering process", function () {
102102

103103
expect(svgCode).toMatch(new RegExp(
104104
'<svg xmlns="http://www.w3.org/2000/svg" width="123" height="987">' +
105-
'<foreignObject x="0" y="0" width="12" height="99" style="-webkit-transform: scale\\(10\\); -webkit-transform-origin: 0 0; transform: scale\\(10\\); transform-origin: 0 0;".*>' +
105+
'<foreignObject x="0" y="0" width="12" height="99" style="-webkit-transform: scale\\(10\\); -webkit-transform-origin: 0 0; transform: scale\\(10\\); transform-origin: 0 0;.*">' +
106106
'<html xmlns="http://www.w3.org/1999/xhtml">' +
107107
'<head>' +
108108
'<title(/>|></title>)' +
@@ -177,7 +177,7 @@ describe("The rendering process", function () {
177177

178178
});
179179

180-
it("workaround for WebKit collapsing margins in Chrome & Safari", function () {
180+
it("should work around collapsing margins in Chrome & Safari", function () {
181181
// Bottom margin that would trigger a collapsing margin with the following SVG
182182
var topChild = document.createElement('div');
183183
topChild.style.marginBottom = "200px";

0 commit comments

Comments
 (0)