fix CSS copying for browsers that don't support computedStyle.cssText

MichalBryxi · Apr 22, 2015 · 0555184 · 0555184
1 parent 2bdc0a9
commit 0555184
Show file tree

Hide file tree

Showing 6 changed files with 115 additions and 19 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1 @@
+dist/*.min.js -diff
diff --git a/demo/firefox/firefox.html b/demo/firefox/firefox.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+
+        #root {
+            height: 100px;
+            width: 100px;
+        }
+
+        #dom-content {
+            border: 1px solid black;
+            height: 100%;
+        }
+
+        .red {
+            background-color: red;
+        }
+
+        .green {
+            background-color: lightgreen;
+        }
+
+        .blue {
+            background-color: lightblue;
+        }
+
+        .red, .green, .blue {
+            height: 33.333333%;
+            width: 100%;
+        }
+
+        .image {
+            width: 100px;
+            height: 100px;
+        }
+    </style>
+    <script src="jquery.js"></script>
+    <script src="../../src/domvas.js"></script>
+</head>
+<body>
+<script>
+    exportToImage = function () {
+        var canvas = document.getElementById('canvas');
+        var context = canvas.getContext('2d');
+
+        domvas.toImage(document.getElementById('root'), function (image) {
+            context.drawImage(image, 0, 0);
+        });
+    };
+</script>
+<div id="root">
+    <div id="dom-content">
+        <div class="red">red</div>
+        <div class="green">green</div>
+        <div class="blue">blue</div>
+    </div>
+</div>
+<button onclick="exportToImage()">draw</button>
+<div class="image">
+    <canvas id="canvas" width="100" height="100"></canvas>
+</div>
+</body>
+</html>
diff --git a/demo/firefox/jquery.js b/demo/firefox/jquery.js
diff --git a/dist/dom-to-image.min.js b/dist/dom-to-image.min.js
diff --git a/src/domvas.js b/src/domvas.js
@@ -1,21 +1,21 @@
 (function (global) {
     "use strict";
 
-    var supportsCSSText = getComputedStyle(document.body).cssText !== "";
+    function copyCss(source, target) {
+        var sourceStyle = global.window.getComputedStyle(source);
 
-    function copyCSS(elem, origElem, log) {
-
-        var computedStyle = getComputedStyle(origElem);
-
-        if (supportsCSSText) {
-            elem.style.cssText = computedStyle.cssText;
-        } else {
-            // Really, Firefox?
-            for (var prop in computedStyle) {
-                if (isNaN(parseInt(prop, 10)) && typeof computedStyle[prop] !== 'function' && !(/^(cssText|length|parentRule)$/).test(prop)) {
-                    elem.style[prop] = computedStyle[prop];
-                }
-            }
+        if (sourceStyle.cssText) {
+            target.style.cssText = sourceStyle.cssText;
+            return;
+        }
+
+        for (var i = 0; i < sourceStyle.length; i++) {
+            var propertyName = sourceStyle[i];
+            target.style.setProperty(
+                propertyName,
+                sourceStyle.getPropertyValue(propertyName),
+                sourceStyle.getPropertyPriority(propertyName)
+            );
         }
     }
 
@@ -25,11 +25,11 @@
         var origChildren = origElem.querySelectorAll('*');
 
         // copy the current style to the clone
-        copyCSS(elem, origElem, 1);
+        copyCss(origElem, elem);
 
         // collect all nodes within the element, copy the current style to the clone
         Array.prototype.forEach.call(children, function (child, i) {
-            copyCSS(child, origChildren[i]);
+            copyCss(origChildren[i], child);
         });
 
         // strip margins from the outer element
@@ -70,7 +70,7 @@
                 // when loaded, fire onload callback with actual image node
                 img.onload = function () {
                     if (callback) {
-                        callback.call(this, this);
+                        callback.call(img, img);
                     }
                 };
             }