Correctly calculate element size. cburgmer#78

cburgmer · cburgmer · commit 0cff60fa748f · 2016-07-03T20:07:08.000+08:00
diff --git a/src/browser.js b/src/browser.js
@@ -163,9 +163,18 @@ var browser = (function (util, proxies, ayepromise, sanedomparsererror, theWindo
         return documentClone.querySelector(tagName);
     };
 
+    var elementToFullHtmlDocument = function (element) {
+        var tagName = element.tagName.toLowerCase();
+        if (tagName === 'html' || tagName === 'body') {
+            return element.outerHTML;
+        }
+
+        // Simple hack: hide the body from sizing, otherwise browser would apply a 8px margin
+        return '<body style="margin: 0;">' + element.outerHTML + '</body>';
+    };
+
     module.calculateDocumentContentSize = function (element, options) {
-        var html = element.outerHTML,
-            defer = ayepromise.defer(),
+        var defer = ayepromise.defer(),
             zoom = options.zoom || 1,
             iframe;
 
@@ -192,7 +201,7 @@ var browser = (function (util, proxies, ayepromise, sanedomparsererror, theWindo
         // srcdoc doesn't work in PhantomJS yet
         iframe.contentDocument.open();
         iframe.contentDocument.write('<!DOCTYPE html>');
-        iframe.contentDocument.write(html);
+        iframe.contentDocument.write(elementToFullHtmlDocument(element));
         iframe.contentDocument.close();
 
         return defer.promise;
diff --git a/test/specs/BrowserSpec.js b/test/specs/BrowserSpec.js
@@ -351,12 +351,24 @@ describe("Browser functions", function () {
             });
         });
 
-        it("should calculate the correct size given any DOM element", function () {
+        it("should calculate the correct size given any DOM element", function (done) {
             setHtml('<div><style>div { width: 400px; height: 400px; }</style></div>');
 
             browser.calculateDocumentContentSize(doc.querySelector('div'), {width: 300, height: 200}).then(function (size) {
                 expect(size.width).toBe(400);
                 expect(size.height).toBe(400);
+
+                done();
+            });
+        });
+
+        it("should not have the body margin influence a DOM element sizing", function (done) {
+            setHtml('<div><style>span { display: inline-block; float: left; width: 200px; height: 200px; }</style><span></span><span></span></div>');
+            browser.calculateDocumentContentSize(doc.querySelector('div'), {width: 400, height: 200}).then(function (size) {
+                expect(size.width).toBe(400);
+                expect(size.height).toBe(200);
+
+                done();
             });
         });
 
