Fix pseudoelement rendering for Firefox

build/html2canvas.js

@@ -628,7 +628,7 @@ NodeParser.prototype.createPseudoHideStyles = function(document) {
 
 NodeParser.prototype.getPseudoElements = function(container) {
     var nodes = [[container]];
-    if (container instanceof NodeContainer) {
+    if (container.node.nodeType === Node.ELEMENT_NODE) {
         var before = this.getPseudoElement(container, ":before");
         var after = this.getPseudoElement(container, ":after");
 
@@ -649,6 +649,12 @@ NodeParser.prototype.getPseudoElements = function(container) {
     return flatten(nodes);
 };
 
+function toCamelCase(str) {
+    return str.replace(/(\-[a-z])/g, function(match){
+        return match.toUpperCase().replace('-','');
+    });
+}
+
 NodeParser.prototype.getPseudoElement = function(container, type) {
     var style = container.computedStyle(type);
     if(!style || !style.content || style.content === "none" || style.content === "-moz-alt-content" || style.display === "none") {
@@ -659,14 +665,12 @@ NodeParser.prototype.getPseudoElement = function(container, type) {
     var isImage = content.substr(0, 3) === 'url';
     var pseudoNode = document.createElement(isImage ? 'img' : 'html2canvaspseudoelement');
     var pseudoContainer = new NodeContainer(pseudoNode, container);
-    Object.keys(style).filter(indexedProperty).forEach(function(property) {
+
-        // Prevent assigning of read only CSS Rules, ex. length, parentRule
+
-        try {
+    for (var i = style.length-1; i >= 0; i--) {
-            pseudoNode.style[property] = style[property];
+        var property = toCamelCase(style.item(i));
-        } catch (e) {
+        pseudoNode.style[property] = style[property];
-            log('Tried to assign readonly property ', property, 'Error:', e);
+    }
-        }
-    });
 
     pseudoNode.className = this.pseudoHideClass;
 
@@ -1211,10 +1215,6 @@ function stripQuotes(content) {
     return (first === content.substr(content.length - 1) && first.match(/'|"/)) ? content.substr(1, content.length - 2) : content;
 }
 
-function indexedProperty(property) {
-    return (isNaN(parseInt(property, 10)));
-}
-
 /*
  Copyright (c) 2013 Yehuda Katz, Tom Dale, and contributors
 

src/nodeparser.js

@@ -34,7 +34,7 @@ NodeParser.prototype.createPseudoHideStyles = function(document) {
 
 NodeParser.prototype.getPseudoElements = function(container) {
     var nodes = [[container]];
-    if (container instanceof NodeContainer) {
+    if (container.node.nodeType === Node.ELEMENT_NODE) {
         var before = this.getPseudoElement(container, ":before");
         var after = this.getPseudoElement(container, ":after");
 
@@ -55,6 +55,12 @@ NodeParser.prototype.getPseudoElements = function(container) {
     return flatten(nodes);
 };
 
+function toCamelCase(str) {
+    return str.replace(/(\-[a-z])/g, function(match){
+        return match.toUpperCase().replace('-','');
+    });
+}
+
 NodeParser.prototype.getPseudoElement = function(container, type) {
     var style = container.computedStyle(type);
     if(!style || !style.content || style.content === "none" || style.content === "-moz-alt-content" || style.display === "none") {
@@ -65,14 +71,12 @@ NodeParser.prototype.getPseudoElement = function(container, type) {
     var isImage = content.substr(0, 3) === 'url';
     var pseudoNode = document.createElement(isImage ? 'img' : 'html2canvaspseudoelement');
     var pseudoContainer = new NodeContainer(pseudoNode, container);
-    Object.keys(style).filter(indexedProperty).forEach(function(property) {
+
-        // Prevent assigning of read only CSS Rules, ex. length, parentRule
+
-        try {
+    for (var i = style.length-1; i >= 0; i--) {
-            pseudoNode.style[property] = style[property];
+        var property = toCamelCase(style.item(i));
-        } catch (e) {
+        pseudoNode.style[property] = style[property];
-            log('Tried to assign readonly property ', property, 'Error:', e);
+    }
-        }
-    });
 
     pseudoNode.className = this.pseudoHideClass;
 
@@ -616,7 +620,3 @@ function stripQuotes(content) {
     var first = content.substr(0, 1);
     return (first === content.substr(content.length - 1) && first.match(/'|"/)) ? content.substr(1, content.length - 2) : content;
 }
-
-function indexedProperty(property) {
-    return (isNaN(parseInt(property, 10)));
-}