Added automated testing with selenium

src/Parse.js

@@ -1,4 +1,4 @@
-_html2canvas.Parse = function ( images, options ) {
+_html2canvas.Parse = function (images, options) {
   window.scroll(0,0);
 
   var support = {
@@ -96,16 +96,16 @@ _html2canvas.Parse = function ( images, options ) {
   }
 
   var getCSS = _html2canvas.Util.getCSS;
+
   function getCSSInt(element, attribute) {
     var val = parseInt(getCSS(element, attribute), 10);
     return (isNaN(val)) ? 0 : val; // borders in old IE are throwing 'medium' for demo.html
   }
 
-  // Drawing a rectangle
   function renderRect (ctx, x, y, w, h, bgcolor) {
     if (bgcolor !== "transparent"){
       ctx.setVariable("fillStyle", bgcolor);
-      ctx.fillRect (x, y, w, h);
+      ctx.fillRect(x, y, w, h);
       numDraws+=1;
     }
   }
@@ -144,6 +144,7 @@ _html2canvas.Parse = function ( images, options ) {
     var container = doc.createElement('div'),
     img = doc.createElement('img'),
     span = doc.createElement('span'),
+    sampleText = 'Hidden Text',
     baseline,
     middle,
     metricsObj;
@@ -170,13 +171,13 @@ _html2canvas.Parse = function ( images, options ) {
     span.style.margin = 0;
     span.style.padding = 0;
 
-    span.appendChild(doc.createTextNode('Hidden Text'));
+    span.appendChild(doc.createTextNode(sampleText));
     container.appendChild(span);
     container.appendChild(img);
     baseline = (img.offsetTop - span.offsetTop) + 1;
 
     container.removeChild(span);
-    container.appendChild(doc.createTextNode('Hidden Text'));
+    container.appendChild(doc.createTextNode(sampleText));
 
     container.style.lineHeight = "normal";
     img.style.verticalAlign = "super";
@@ -222,6 +223,7 @@ _html2canvas.Parse = function ( images, options ) {
     ctx.setVariable("fillStyle", color);
     ctx.setVariable("font", [font_style, font_variant, bold, size, family].join(" "));
     ctx.setVariable("textAlign", (align) ? "right" : "left");
+
     if (text_decoration !== "none"){
       return fontMetrics(family, size);
     }
@@ -327,8 +329,9 @@ _html2canvas.Parse = function ( images, options ) {
 
         }
 
-
+        if (textValue !== null) {
           drawText(textValue, bounds.left, bounds.bottom, ctx);
+        }
         renderTextDecoration(text_decoration, bounds, metrics, color);
 
         textOffset += renderList[c].length;
@@ -341,21 +344,21 @@ _html2canvas.Parse = function ( images, options ) {
 
   function listPosition (element, val) {
     var boundElement = doc.createElement( "boundelement" ),
-    type,
+    originalType,
     bounds;
 
     boundElement.style.display = "inline";
 
-    type = element.style.listStyleType;
+    originalType = element.style.listStyleType;
     element.style.listStyleType = "none";
 
-    boundElement.appendChild( doc.createTextNode( val ) );
+    boundElement.appendChild(doc.createTextNode(val));
 
     element.insertBefore(boundElement, element.firstChild);
 
-    bounds = _html2canvas.Util.Bounds( boundElement );
+    bounds = _html2canvas.Util.Bounds(boundElement);
-    element.removeChild( boundElement );
+    element.removeChild(boundElement);
-    element.style.listStyleType = type;
+    element.style.listStyleType = originalType;
     return bounds;
   }
 
@@ -406,9 +409,7 @@ _html2canvas.Parse = function ( images, options ) {
   }
 
   function renderListItem(element, stack, elBounds) {
-    var position = getCSS(element, "listStylePosition"),
+    var x,
-    x,
-    y,
     text,
     type = getCSS(element, "listStyleType"),
     listBounds;
@@ -418,16 +419,14 @@ _html2canvas.Parse = function ( images, options ) {
       listBounds = listPosition(element, text);
       setTextVariables(ctx, element, "none", getCSS(element, "color"));
 
-      if (position === "inside") {
+      if (getCSS(element, "listStylePosition") === "inside") {
         ctx.setVariable("textAlign", "left");
         x = elBounds.left;
       } else {
         return;
       }
 
-      y = listBounds.bottom;
+      drawText(text, x, listBounds.bottom, ctx);
-
-      drawText(text, x, y, ctx);
     }
   }
 
@@ -731,15 +730,13 @@ _html2canvas.Parse = function ( images, options ) {
     height,
     add;
 
-    //   if (typeof background_image !== "undefined" && /^(1|none)$/.test(background_image) === false && /^(-webkit|-moz|linear-gradient|-o-)/.test(background_image)===false){
-
     if ( !/data:image\/.*;base64,/i.test(background_image) && !/^(-webkit|-moz|linear-gradient|-o-)/.test(background_image) ) {
       background_image = background_image.split(",")[0];
     }
 
-    if ( typeof background_image !== "undefined" && /^(1|none)$/.test( background_image ) === false ) {
+    if ( typeof background_image !== "undefined" && /^(1|none)$/.test(background_image) === false ) {
-      background_image = _html2canvas.Util.backgroundImage( background_image );
+      background_image = _html2canvas.Util.backgroundImage(background_image);
-      image = loadImage( background_image );
+      image = loadImage(background_image);
 
 
       bgp = _html2canvas.Util.BackgroundPosition(el, bounds, image);
@@ -748,11 +745,11 @@ _html2canvas.Parse = function ( images, options ) {
       if ( image ){
         switch ( background_repeat ) {
           case "repeat-x":
-            renderBackgroundRepeatX( ctx, image, bgp, bounds.left, bounds.top, bounds.width, bounds.height );
+            renderBackgroundRepeatX(ctx, image, bgp, bounds.left, bounds.top, bounds.width, bounds.height);
             break;
 
           case "repeat-y":
-            renderBackgroundRepeatY( ctx, image, bgp, bounds.left, bounds.top, bounds.width, bounds.height );
+            renderBackgroundRepeatY(ctx, image, bgp, bounds.left, bounds.top, bounds.width, bounds.height);
             break;
 
           case "no-repeat":
@@ -890,18 +887,16 @@ _html2canvas.Parse = function ( images, options ) {
 
     ctx.setVariable("globalAlpha", stack.opacity);
 
-    // draw element borders
+
     borders = renderBorders(el, ctx, bounds, false);
     stack.borders = borders;
 
 
-    // let's modify clip area for child elements, so borders dont get overwritten
 
     if (ignoreElementsRegExp.test(el.nodeName) && options.iframeDefault !== "transparent"){
       bgcolor = (options.iframeDefault === "default") ? "#efefef" : options.iframeDefault;
     }
 
-    // draw base element bgcolor
 
     bgbounds = {
       left: x + borders[3].width,

src/plugins/jquery.plugin.html2canvas.js

@@ -20,19 +20,23 @@
       if (options && options.profile && window.console && window.console.profileEnd) {
         console.profileEnd();
       }
-            $canvas.css({
+      $canvas.addClass("html2canvas")
+      .css({
         position: 'absolute',
         left: 0,
         top: 0
       }).appendTo(document.body);
-            $canvas.siblings().toggle();
 
+      if (window.location.search !== "?selenium") {
+        $canvas.siblings().toggle();
         $(window).click(function(){
           $canvas.toggle().siblings().toggle();
           throwMessage("Canvas Render " + ($canvas.is(':visible') ? "visible" : "hidden"));
         });
         throwMessage('Screenshot created in '+ ((finishTime.getTime()-timer)) + " ms<br />",4000);
-
+      } else {
+        $canvas.css('display', 'none');
+      }
       // test if canvas is read-able
       try {
         $canvas[0].toDataURL();

src/renderers/Canvas.js

@@ -94,7 +94,7 @@ _html2canvas.Renderer.Canvas = function( options ) {
       canvas.height = canvas.style.height = (!usingFlashcanvas) ? options.height || zStack.ctx.height : Math.min(flashMaxSize, (options.height || zStack.ctx.height) );
 
       fstyle = ctx.fillStyle;
-      ctx.fillStyle = zStack.backgroundColor;
+      ctx.fillStyle = (zStack.backgroundColor === "transparent") ? "#fff" : zStack.backgroundColor;
       ctx.fillRect(0, 0, canvas.width, canvas.height);
       ctx.fillStyle = fstyle;
 

tests/background.html

@@ -1,8 +1,3 @@
-<!--
-* @author Niklas von Hertzen <niklas at hertzen.com>
-* @created 15.7.2011 
-* @website http://hertzen.com
--->
 <!DOCTYPE html>
 <html>
     <head>

tests/borders.html

@@ -1,8 +1,3 @@
-<!--
-* @author Niklas von Hertzen <niklas at hertzen.com>
-* @created 15.7.2011 
-* @website http://hertzen.com
--->
 <!DOCTYPE html>
 <html>
     <head>

tests/selenium.js

@@ -0,0 +1,94 @@
+var webdriver = require("webdriver.js").webdriver,
+http = require("http"),
+url = require("url"),
+path = require("path"),
+base64_arraybuffer = require('base64-arraybuffer'),
+PNG = require('png-js'),
+fs = require("fs"),
+port = 5555;
+
+var server = http.createServer(function(request, response) {
+  var uri = url.parse(request.url).pathname,
+  filename = path.join(process.cwd(), "../" + uri);
+
+  fs.exists(filename, function(exists) {
+    if(!exists) {
+      response.writeHead(404, {
+        "Content-Type": "text/plain"
+      });
+      response.write("404 Not Found\n");
+      response.end();
+      return;
+    }
+
+    if (fs.statSync(filename).isDirectory()) filename += '/index.html';
+
+    fs.readFile(filename, "binary", function(err, file) {
+      if(err) {
+        response.writeHead(500, {
+          "Content-Type": "text/plain"
+        });
+        response.write(err + "\n");
+        response.end();
+        return;
+      }
+
+      response.writeHead(200);
+      response.write(file, "binary");
+      response.end();
+    });
+  });
+
+}).listen(port);
+
+
+function getPixelArray(base64, func) {
+  var arraybuffer = base64_arraybuffer.decode(base64);
+  (new PNG(arraybuffer)).decode(func);
+}
+
+var browser = new webdriver({
+  logging:false
+});
+
+
+function testPage(url, done) {
+  browser.url("http://localhost:" + port + "/tests/" + url + "?selenium")
+  .$(".html2canvas", 5000, function(){
+    this.execute(function(){
+      var canvas = $('.html2canvas')[0];
+      return canvas.toDataURL("image/png").substring(22);
+    },[], function(dataurl) {
+      getPixelArray(dataurl, function(h2cPixels) {
+        browser.screenshot(function(base64){
+          getPixelArray(base64, function(screenPixels) {
+            var len = h2cPixels.length, index = 0, diff = 0;
+            for (; index < len; index++) {
+              if (screenPixels[index] - h2cPixels[index] !== 0) {
+                diff++;
+              }
+            }
+            done(100 - (Math.round((diff/h2cPixels.length) * 10000) / 100));
+          });
+        })
+      });
+    });
+  });
+}
+
+(function(pages) {
+
+  (function processPage(page) {
+    testPage(page, function(result) {
+      if (pages.length > 0) {
+        processPage(pages.shift());
+      } else {
+        browser.close(function(){
+          server.close();
+        });
+      }
+      console.log(page, result);
+    });
+  })(pages.shift());
+
+})(["overflow.html", "forms.html", "lists.html"]);