Calculate content size for arbitrary root element. cburgmer#78

cburgmer · cburgmer · commit b97347c7a1a4 · 2016-07-03T18:42:01.000+08:00
diff --git a/src/browser.js b/src/browser.js
@@ -99,21 +99,28 @@ var browser = (function (util, proxies, ayepromise, sanedomparsererror, theWindo
         };
     };
 
-    var calculateContentSize = function (doc, selector, requestedWidth, requestedHeight, zoom) {
-            // clientWidth/clientHeight needed for PhantomJS
-        var actualViewportWidth = Math.max(doc.documentElement.scrollWidth, doc.body.clientWidth),
-            actualViewportHeight = Math.max(doc.documentElement.scrollHeight, doc.body.scrollHeight, doc.body.clientHeight),
+    var selectElementOrDescendant = function (element, selector) {
+        var descendant = element.querySelector(selector);
+        if (descendant) {
+            return descendant;
+        } else if (element.ownerDocument.querySelector(selector) === element) {
+            return element;
+        }
+
+        throw {
+            message: "Clipping selector not found"
+        };
+    };
+
+    var calculateContentSize = function (rootElement, selector, requestedWidth, requestedHeight, zoom) {
+        // clientWidth/clientHeight needed for PhantomJS
+        var actualViewportWidth = Math.max(rootElement.scrollWidth, rootElement.clientWidth),
+            actualViewportHeight = Math.max(rootElement.scrollHeight, rootElement.clientHeight),
             top, left, originalWidth, originalHeight, rootFontSize,
             element, rect, contentSize;
 
         if (selector) {
-            element = doc.querySelector(selector);
-
-            if (!element) {
-                throw {
-                    message: "Clipping selector not found"
-                };
-            }
+            element = selectElementOrDescendant(rootElement, selector);
 
             rect = element.getBoundingClientRect();
 
@@ -136,7 +143,7 @@ var browser = (function (util, proxies, ayepromise, sanedomparsererror, theWindo
             requestedHeight,
             zoom);
 
-        rootFontSize = theWindow.getComputedStyle(doc.documentElement).fontSize;
+        rootFontSize = theWindow.getComputedStyle(rootElement.ownerDocument.documentElement).fontSize;
 
         return {
             left: left,
@@ -150,6 +157,12 @@ var browser = (function (util, proxies, ayepromise, sanedomparsererror, theWindo
         };
     };
 
+    var findCorrelatingElement = function (element, documentClone) {
+        var tagName = element.tagName;
+        // Stupid but simple method: find first match. Should work for a single HTML element, and any other element given as root
+        return documentClone.querySelector(tagName);
+    };
+
     module.calculateDocumentContentSize = function (element, options) {
         var html = element.outerHTML,
             defer = ayepromise.defer(),
@@ -166,7 +179,7 @@ var browser = (function (util, proxies, ayepromise, sanedomparsererror, theWindo
                 size;
 
             try {
-                size = calculateContentSize(doc, options.clip, options.width, options.height, zoom);
+                size = calculateContentSize(findCorrelatingElement(element, doc), options.clip, options.width, options.height, zoom);
 
                 defer.resolve(size);
             } catch (e) {
diff --git a/test/specs/BrowserSpec.js b/test/specs/BrowserSpec.js
@@ -351,6 +351,15 @@ describe("Browser functions", function () {
             });
         });
 
+        it("should calculate the correct size given any DOM element", function () {
+            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);
+            });
+        });
+
         it("should remove the iframe when done calculating", function (done) {
             setElementWithSize({});
 
