Moved pseudoelement rendering to parse.js

src/Parse.js

@@ -7,7 +7,14 @@ _html2canvas.Parse = function (images, options) {
   support = _html2canvas.Util.Support(options, doc),
   ignoreElementsRegExp = new RegExp("(" + options.ignoreElements + ")"),
   body = doc.body,
-  getCSS = _html2canvas.Util.getCSS;
+  getCSS = _html2canvas.Util.getCSS,
+  pseudoHide = "___html2canvas___pseudoelement",
+  hidePseudoElements = doc.createElement('style');
+
+  hidePseudoElements.innerHTML = '.' + pseudoHide + '-before:before { content: "" !important; display: none !important; }' +
+  '.' + pseudoHide + '-after:after { content: "" !important; display: none !important; }';
+
+  body.appendChild(hidePseudoElements);
 
   images = images || {};
 
@@ -750,6 +757,64 @@ _html2canvas.Parse = function (images, options) {
     numDraws+=1;
   }
 
+  function getPseudoElement(el, which) {
+    var elStyle = window.getComputedStyle(el, which);
+    if(!elStyle || !elStyle.content || elStyle.content === "none" || elStyle.content === "-moz-alt-content") {
+      return;
+    }
+    var content = elStyle.content + '',
+    first = content.substr( 0, 1 );
+    //strips quotes
+    if(first === content.substr( content.length - 1 ) && first.match(/'|"/)) {
+      content = content.substr( 1, content.length - 2 );
+    }
+
+    var isImage = content.substr( 0, 3 ) === 'url',
+    elps = document.createElement( isImage ? 'img' : 'span' );
+
+    elps.className = pseudoHide + "-before " + pseudoHide + "-after";
+
+    Object.keys(elStyle).filter(indexedProperty).forEach(function(prop) {
+      elps.style[prop] = elStyle[prop];
+    });
+
+    if(isImage) {
+      elps.src = _html2canvas.Util.parseBackgroundImage(content)[0].args[0];
+    } else {
+      elps.innerHTML = content;
+    }
+    return elps;
+  }
+
+  function indexedProperty(property) {
+    return (isNaN(window.parseInt(property, 10)));
+  }
+
+  function injectPseudoElements(el, stack) {
+    var before = getPseudoElement(el, ':before'),
+    after = getPseudoElement(el, ':after');
+    if(!before && !after) {
+      return;
+    }
+
+    if(before) {
+      el.className += " " + pseudoHide + "-before";
+      el.parentNode.insertBefore(before, el);
+      parseElement(before, stack, true);
+      el.parentNode.removeChild(before);
+      el.className = el.className.replace(pseudoHide + "-before", "").trim();
+    }
+
+    if (after) {
+      el.className += " " + pseudoHide + "-after";
+      el.appendChild(after);
+      parseElement(after, stack, true);
+      el.removeChild(after);
+      el.className = el.className.replace(pseudoHide + "-after", "").trim();
+    }
+
+  }
+
   function renderBackgroundRepeat(ctx, image, backgroundPosition, bounds) {
     var offsetX = Math.round(bounds.left + backgroundPosition.left),
     offsetY = Math.round(bounds.top + backgroundPosition.top);
@@ -787,7 +852,9 @@ _html2canvas.Parse = function (images, options) {
   function renderBackgroundRepeating(el, bounds, ctx, image, imageIndex) {
     var backgroundSize = _html2canvas.Util.BackgroundSize(el, bounds, image, imageIndex),
     backgroundPosition = _html2canvas.Util.BackgroundPosition(el, bounds, image, imageIndex, backgroundSize),
-    backgroundRepeat = getCSS(el, "backgroundRepeat").split(",").map(function(value) { return value.trim(); });
+    backgroundRepeat = getCSS(el, "backgroundRepeat").split(",").map(function(value) {
+      return value.trim();
+    });
 
     image = resizeImage(image, backgroundSize);
 
@@ -810,7 +877,12 @@ _html2canvas.Parse = function (images, options) {
         break;
 
       default:
-        renderBackgroundRepeat(ctx, image, backgroundPosition, { top: bounds.top, left: bounds.left, width: image.width, height: image.height });
+        renderBackgroundRepeat(ctx, image, backgroundPosition, {
+          top: bounds.top,
+          left: bounds.left,
+          width: image.width,
+          height: image.height
+        });
         break;
     }
   }
@@ -899,7 +971,7 @@ _html2canvas.Parse = function (images, options) {
     return backgroundBounds;
   }
 
-  function renderElement(element, parentStack){
+  function renderElement(element, parentStack, pseudoElement){
     var bounds = _html2canvas.Util.Bounds(element),
     image,
     bgcolor = (ignoreElementsRegExp.test(element.nodeName)) ? "#efefef" : getCSS(element, "backgroundColor"),
@@ -925,6 +997,10 @@ _html2canvas.Parse = function (images, options) {
       renderBorders(ctx, border.args, border.color);
     });
 
+    if (!pseudoElement) {
+      injectPseudoElements(element, stack);
+    }
+
     switch(element.nodeName){
       case "IMG":
         if ((image = loadImage(element.getAttribute('src')))) {
@@ -965,14 +1041,14 @@ _html2canvas.Parse = function (images, options) {
     return (getCSS(element, 'display') !== "none" && getCSS(element, 'visibility') !== "hidden" && !element.hasAttribute("data-html2canvas-ignore"));
   }
 
-  function parseElement (el, stack) {
+  function parseElement (el, stack, pseudoElement) {
 
     if (isElementVisible(el)) {
-      stack = renderElement(el, stack) || stack;
+      stack = renderElement(el, stack, pseudoElement) || stack;
       if (!ignoreElementsRegExp.test(el.nodeName)) {
         _html2canvas.Util.Children(el).forEach(function(node) {
           if (node.nodeType === 1) {
-            parseElement(node, stack);
+            parseElement(node, stack, pseudoElement);
           } else if (node.nodeType === 3) {
             renderText(el, node, stack);
           }
@@ -1059,7 +1135,7 @@ _html2canvas.Parse = function (images, options) {
     });
 
     stack.backgroundColor = getCSS(document.documentElement, "backgroundColor");
-
+    body.removeChild(hidePseudoElements);
     return stack;
   }
 

src/Preload.js

@@ -89,42 +89,27 @@ _html2canvas.Preload = function( options ) {
 
   }
 
-  function getImages (el) {
+  function loadPseudoElement(element, type) {
-    el.__html2canvas__id = uid++;
+    var style = window.getComputedStyle(element, type),
+    content = style.content;
+    if (content.substr(0, 3) === 'url') {
+      methods.loadImage(_html2canvas.Util.parseBackgroundImage(content)[0].args[0]);
+    }
+    loadBackgroundImages(style.backgroundImage, element);
+  }
 
-    var contents = _html2canvas.Util.Children(el),
+  function loadPseudoElementImages(element) {
-    i,
+    loadPseudoElement(element, ":before");
-    background_image,
+    loadPseudoElement(element, ":after");
-    background_images,
+  }
+
+  function loadBackgroundImages(background_image, el) {
+    var background_images,
     src,
     img,
-    bounds,
+    bounds;
-    elNodeType = false;
-
-    // Firefox fails with permission denied on pages with iframes
-    try {
-      var contentsLen = contents.length;
-      for (i = 0;  i < contentsLen; i+=1 ){
-        getImages(contents[i]);
-      }
-    }
-    catch( e ) {}
-
-    try {
-      elNodeType = el.nodeType;
-    } catch (ex) {
-      elNodeType = false;
-      h2clog("html2canvas: failed to access some element's nodeType - Exception: " + ex.message);
-    }
-
-    if (elNodeType === 1 || elNodeType === undefined){
-
     // opera throws exception on external-content.html
-      try {
+
-        background_image = _html2canvas.Util.getCSS(el, 'backgroundImage');
-      } catch(e) {
-        h2clog("html2canvas: failed to get background-image - Exception: " + e.message);
-      }
     background_images = _html2canvas.Util.parseBackgroundImage(background_image);
     for(var imageIndex = background_images.length; imageIndex-- > 0;) {
       background_image = background_images[imageIndex];
@@ -158,6 +143,37 @@ _html2canvas.Preload = function( options ) {
       }
     }
   }
+
+  function getImages (el) {
+    var contents = _html2canvas.Util.Children(el),
+    i,
+    elNodeType = false;
+
+    // Firefox fails with permission denied on pages with iframes
+    try {
+      var contentsLen = contents.length;
+      for (i = 0;  i < contentsLen; i+=1 ){
+        getImages(contents[i]);
+      }
+    }
+    catch( e ) {}
+
+    try {
+      elNodeType = el.nodeType;
+    } catch (ex) {
+      elNodeType = false;
+      h2clog("html2canvas: failed to access some element's nodeType - Exception: " + ex.message);
+    }
+
+    if (elNodeType === 1 || elNodeType === undefined) {
+      loadPseudoElementImages(el);
+      try {
+        loadBackgroundImages(_html2canvas.Util.getCSS(el, 'backgroundImage'), el);
+      } catch(e) {
+        h2clog("html2canvas: failed to get background-image - Exception: " + e.message);
+      }
+      loadBackgroundImages(el);
+    }
   }
 
   function setImageLoadHandlers(img, imageObj) {
@@ -211,94 +227,6 @@ _html2canvas.Preload = function( options ) {
          */
   }
 
-  var uid = 0, injectStyle;
-  function injectPseudoElements(el) {
-    if(!_html2canvas.Util.isElementVisible(el)) {
-      return;
-    }
-
-    var before = getPseudoElement(el, ':before'),
-    after = getPseudoElement(el, ':after');
-    if(!before && !after) {
-      return;
-    }
-    if(!el.id) {
-      el.id = '__html2canvas__' + (uid++);
-    }
-    if(!injectStyle) {
-      injectStyle = document.createElement('style');
-    }
-
-    if(before) {
-      el.__html2canvas_before = before;
-      injectStyle.innerHTML += '#' + el.id + ':before { content: "" !important; display: none !important; }\n';
-      if(el.childNodes.length > 0) {
-        el.insertBefore(before, el.childNodes[0]);
-      } else {
-        el.appendChild(before);
-      }
-    }
-
-    if (after) {
-      el.__html2canvas_after = after;
-      injectStyle.innerHTML += '#' + el.id + ':after { content: "" !important; display: none !important; }\n';
-      el.appendChild(after);
-    }
-  }
-
-  function removePseudoElements(el) {
-    var before = el.__html2canvas_before,
-    after = el.__html2canvas_after;
-    if(before) {
-      el.__html2canvas_before = undefined;
-      el.removeChild(before);
-    }
-    if(after) {
-      el.__html2canvas_after = undefined;
-      el.removeChild(after);
-    }
-  }
-
-  function cleanupPseudoElements(){
-    if(!injectStyle) {
-      return;
-    }
-    injectStyle.parentNode.removeChild(injectStyle);
-    injectStyle = undefined;
-
-    [].slice.apply(element.all || element.getElementsByTagName('*'))
-      .forEach(removePseudoElements);
-  }
-
-  function indexedProperty(property) {
-    return (!isNaN(window.parseInt(property, 10)));
-  }
-
-  function getPseudoElement(el, which) {
-    var elStyle = window.getComputedStyle(el, which);
-    if(!elStyle || !elStyle.content || elStyle.content === "none" || elStyle.content === "-moz-alt-content") { return; }
-    var content = elStyle.content + '',
-    first = content.substr( 0, 1 );
-    //strips quotes
-    if(first === content.substr( content.length - 1 ) && first.match(/'|"/)) {
-      content = content.substr( 1, content.length - 2 );
-    }
-
-    var isImage = content.substr( 0, 3 ) === 'url',
-    elps = document.createElement( isImage ? 'img' : 'span' );
-
-    elps.className = '__html2canvas__' + which.substr(1);
-    Object.keys(elStyle).filter(indexedProperty).forEach(function(prop) {
-      elps.style[prop] = elStyle[prop];
-    });
-    if(isImage) {
-      elps.src = _html2canvas.Util.parseBackgroundImage(content)[0].args[0];
-    } else {
-      elps.innerHTML = content;
-    }
-    return elps;
-  }
-
   methods = {
     loadImage: function( src ) {
       var img, imageObj;
@@ -392,15 +320,12 @@ _html2canvas.Preload = function( options ) {
           start();
         }
       }
-
-      cleanupPseudoElements();
     },
 
     renderingDone: function() {
       if (timeoutTimer) {
         window.clearTimeout(timeoutTimer);
       }
-      cleanupPseudoElements();
     }
   };
 
@@ -408,13 +333,6 @@ _html2canvas.Preload = function( options ) {
     timeoutTimer = window.setTimeout(methods.cleanupDOM, options.timeout);
   }
 
-  [].slice.apply(element.all || element.getElementsByTagName('*'))
-      .forEach(injectPseudoElements);
-  if(injectStyle) {
-    element.appendChild(injectStyle);
-  }
-
-
   h2clog('html2canvas: Preload starts: finding background-images');
   images.firstRun = true;
 

src/Util.js

@@ -8,7 +8,7 @@ window.html2canvas = function(elements, opts) {
     background: "#fff",
 
     // preload options
-    proxy: "",
+    proxy: null,
     timeout: 0,    // no timeout
     useCORS: false, // try to load images as CORS (where available), before falling back to proxy
     allowTaint: false, // whether to allow images to taint the canvas, won't need proxy if set to true

tests/readme.md

@@ -2,7 +2,7 @@
 <tr><td>background/clip.html</td><td>100%</td><td>100%</td><td>99.89%</td></tr>
 <tr><td>background/encoded.html</td><td>100%</td><td>100%</td><td>100%</td></tr>
 <tr><td>background/linear-gradient.html</td><td>89.87%</td><td>90.73%</td><td>100%</td></tr>
-<tr><td>background/multi.html</td><td>96.6%</td><td>96.45%</td><td>96.85%</td></tr>
+<tr><td>background/multi.html</td><td>100%</td><td>100%</td><td>99.93%</td></tr>
 <tr><td>background/position.html</td><td>100%</td><td>100%</td><td>99.87%</td></tr>
 <tr><td>background/radial-gradient.html</td><td>73.23%</td><td>70.32%</td><td>94.02%</td></tr>
 <tr><td>background/repeat.html</td><td>100%</td><td>100%</td><td>99.92%</td></tr>
@@ -22,11 +22,13 @@
 <tr><td>list/lower-alpha.html</td><td>99.65%</td><td>99.73%</td><td>35.89%</td></tr>
 <tr><td>list/upper-roman.html</td><td>99.45%</td><td>99.61%</td><td>35.94%</td></tr>
 <tr><td>overflow.html</td><td>96.85%</td><td>97.49%</td><td>96.5%</td></tr>
+<tr><td>pseudoelements.html</td><td>97.36%</td><td>97.94%</td><td>99.37%</td></tr>
+<tr><td>text/chinese.html</td><td>99.75%</td><td>99.74%</td><td>65.76%</td></tr>
 <tr><td>text/linethrough.html</td><td>97.14%</td><td>94.12%</td><td>47.08%</td></tr>
 <tr><td>text/text.html</td><td>95.71%</td><td>94.67%</td><td>85.01%</td></tr>
 <tr><td>text/underline-lineheight.html</td><td>97.06%</td><td>92.35%</td><td>53%</td></tr>
 <tr><td>text/underline.html</td><td>97.65%</td><td>93.5%</td><td>47.02%</td></tr>
-<tr><td>visibility.html</td><td>99.19%</td><td>98.81%</td><td>99.39%</td></tr>
+<tr><td>visibility.html</td><td>99.19%</td><td>98.92%</td><td>99.39%</td></tr>
 <tr><td>zindex/z-index1.html</td><td>96.99%</td><td>99.27%</td><td>99.44%</td></tr>
 <tr><td>zindex/z-index2.html</td><td>95.85%</td><td>98.06%</td><td>97.72%</td></tr>
 <tr><td>zindex/z-index3.html</td><td>98.6%</td><td>98.29%</td><td>98.56%</td></tr>