Merge branch 'develop' of github.com:niklasvh/html2canvas into develop

Gruntfile.js

@@ -0,0 +1,98 @@
+/*global module:false*/
+module.exports = function(grunt) {
+
+  var meta = {
+    banner: '/*\n  <%= pkg.title || pkg.name %> <%= pkg.version %>' +
+      '<%= pkg.homepage ? " <" + pkg.homepage + ">" : "" %>' + '\n' +
+      '  Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>' +
+      '\n\n  Released under <%= _.pluck(pkg.licenses, "type").join(", ") %> License\n*/',
+    pre: '\n(function(window, document, undefined){\n\n',
+    post: '\n})(window,document);'
+  };
+
+  // Project configuration.
+  grunt.initConfig({
+
+    pkg: grunt.file.readJSON('package.json'),
+
+    qunit: {
+      files: ['tests/qunit/index.html']
+    },
+    concat: {
+      dist: {
+        src: [
+          'src/Core.js',
+          'src/Font.js',
+          'src/Generate.js',
+          'src/Queue.js',
+          'src/Parse.js',
+          'src/Preload.js',
+          'src/Renderer.js',
+          'src/Support.js',
+          'src/Util.js',
+          'src/renderers/Canvas.js'
+        ],
+        dest: 'build/<%= pkg.name %>.js'
+      },
+      options:{
+        banner: meta.banner + meta.pre,
+        footer: meta.post
+      }
+    },
+    uglify: {
+      dist: {
+        src: ['<%= concat.dist.dest %>'],
+        dest: 'build/<%= pkg.name %>.min.js'
+      },
+      options: {
+        banner: meta.banner
+      }
+    },
+    watch: {
+      files: '<%= lint.files %>',
+      tasks: 'jshint qunit'
+    },
+    jshint: {
+      all: ['<%= concat.dist.dest %>'],
+      options: {
+        curly: true,
+        eqeqeq: true,
+        immed: true,
+        latedef: true,
+        newcap: true,
+        noarg: true,
+        sub: true,
+        undef: true,
+        boss: true,
+        eqnull: true,
+        browser: true,
+        globals: {
+          jQuery: true
+        }
+      }
+    }
+  });
+
+  var selenium = require("./tests/selenium.js");
+  grunt.registerTask('webdriver', 'Browser render tests', function(arg1) {
+
+    var done = this.async();
+
+    if (arguments.length === 0) {
+      selenium.tests();
+    } else {
+      selenium[arg1].apply(null, arguments);
+    }
+  });
+
+  // Load tasks
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-qunit');
+
+  // Default task.
+  grunt.registerTask('build', ['concat', 'uglify']);
+  grunt.registerTask('default', ['jshint', 'concat', 'qunit', 'uglify', 'webdriver']);
+
+};

grunt.js

@@ -1,73 +0,0 @@
-/*global module:false*/
-module.exports = function(grunt) {
-
-  // Project configuration.
-  grunt.initConfig({
-    pkg: '<json:package.json>',
-    meta: {
-      banner: '/*\n  <%= pkg.title || pkg.name %> <%= pkg.version %>' +
-      '<%= pkg.homepage ? " <" + pkg.homepage + ">\n" : "" %>' +
-      '  Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>' +
-      '\n\n  Released under <%= _.pluck(pkg.licenses, "type").join(", ") %> License\n*/',
-      pre: '(function(window, document, undefined){',
-      post: '})(window,document);'
-    },
-    lint: {
-      files: ['build/<%= pkg.name %>.js']
-    },
-    qunit: {
-      files: ['tests/qunit/index.html']
-    },
-    concat: {
-      dist: {
-        src: ['<banner:meta.banner>', '<banner:meta.pre>','src/*.js', 'src/renderers/Canvas.js', '<banner:meta.post>'],
-        dest: 'build/<%= pkg.name %>.js'
-      }
-    },
-    min: {
-      dist: {
-        src: ['<banner:meta.banner>', '<config:concat.dist.dest>'],
-        dest: 'build/<%= pkg.name %>.min.js'
-      }
-    },
-    watch: {
-      files: '<config:lint.files>',
-      tasks: 'lint qunit'
-    },
-    jshint: {
-      options: {
-        curly: true,
-        eqeqeq: true,
-        immed: true,
-        latedef: true,
-        newcap: true,
-        noarg: true,
-        sub: true,
-        undef: true,
-        boss: true,
-        eqnull: true,
-        browser: true
-      },
-      globals: {
-        jQuery: true
-      }
-    },
-    uglify: {}
-  });
-
-  var selenium = require("./tests/selenium.js");
-  grunt.registerTask('webdriver', 'Browser render tests', function(arg1) {
-
-    var done = this.async();
-
-    if (arguments.length === 0) {
-      selenium.tests();
-    } else {
-      selenium[arg1].apply(null, arguments);
-    }
-  });
-
-  // Default task.
-  grunt.registerTask('default', 'concat lint qunit min webdriver');
-
-};

package.json

@@ -6,11 +6,21 @@
   "author": {
     "name":"Niklas von Hertzen (@niklasvh)"
   },
+  "engines": {
+    "node": ">=0.8.0"
+  },
   "dependencies": {
     "base64-arraybuffer": ">= 0.1.0",
     "png-js": ">= 0.1.1",
     "webdriver.js": ">= 0.1.0"
   },
+  "devDependencies":{
+    "grunt": ">=0.4.0",
+    "grunt-contrib-concat": "*",
+    "grunt-contrib-uglify": "*",
+    "grunt-contrib-jshint": "*",
+    "grunt-contrib-qunit": "*"
+  },
   "homepage": "http://html2canvas.hertzen.com",
   "licenses": [{
     "type": "MIT"

readme.md

@@ -50,8 +50,7 @@ Run the full build process (including lint, qunit and webdriver tests):
 
 Skip lint and tests and simply build from source:
 
-    $ grunt concat
+    $ grunt build
-    $ grunt min
 
 ### Running tests ###
 

src/Parse.js

@@ -775,7 +775,12 @@ _html2canvas.Parse = function (images, options) {
     elps.className = pseudoHide + "-before " + pseudoHide + "-after";
 
     Object.keys(elStyle).filter(indexedProperty).forEach(function(prop) {
-      elps.style[prop] = elStyle[prop];
+      // Prevent assigning of read only CSS Rules, ex. length, parentRule
+      try {
+        elps.style[prop] = elStyle[prop];
+      } catch (e) {
+        h2clog(['Tried to assign readonly property ', prop, 'Error:', e]);
+      }
     });
 
     if(isImage) {

tests/readme.md

@@ -1,35 +1,35 @@
-<table><thead><tr><td></td><th>chrome<br />23.0.1271.97</th><th>firefox<br />12.0</th><th>iexplorer<br />9</th></tr></thead><tbody>
+<table><thead><tr><td></td><th>chrome<br />23.0.1271.97</th><th>firefox<br />12.0</th><th>iexplorer<br />9</th><th>chrome<br />25.0.1364.172<br />Mac 10.7.4</th><th>firefox<br />19.0.2<br />Mac 10.7.4</th><th>safari<br />6.0<br />Mac 10.7.4</th></tr></thead><tbody>
-<tr><td>background/clip.html</td><td>100%</td><td>100%</td><td>99.89%</td></tr>
+<tr><td>background/clip.html</td><td>100%</td><td>100%</td><td>99.89%</td><td>100%</td><td>100%</td><td>100%</td></tr>
-<tr><td>background/encoded.html</td><td>100%</td><td>100%</td><td>100%</td></tr>
+<tr><td>background/encoded.html</td><td>100%</td><td>100%</td><td>100%</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/linear-gradient.html</td><td>89.87%</td><td>90.73%</td><td>100%</td><td>95.35%</td><td>91.33%</td><td>91.69%</td></tr>
-<tr><td>background/multi.html</td><td>100%</td><td>100%</td><td>99.93%</td></tr>
+<tr><td>background/multi.html</td><td>100%</td><td>100%</td><td>99.93%</td><td>100%</td><td>100%</td><td>100%</td></tr>
-<tr><td>background/position.html</td><td>100%</td><td>100%</td><td>99.87%</td></tr>
+<tr><td>background/position.html</td><td>100%</td><td>100%</td><td>99.87%</td><td>100%</td><td>100%</td><td>100%</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/radial-gradient.html</td><td>73.23%</td><td>70.32%</td><td>94.02%</td><td>87.65%</td><td>57.99%</td><td>79.95%</td></tr>
-<tr><td>background/repeat.html</td><td>100%</td><td>100%</td><td>99.92%</td></tr>
+<tr><td>background/repeat.html</td><td>100%</td><td>100%</td><td>99.92%</td><td>100%</td><td>100%</td><td>100%</td></tr>
-<tr><td>border/dashed.html</td><td>96.45%</td><td>98.38%</td><td>97.7%</td></tr>
+<tr><td>border/dashed.html</td><td>96.45%</td><td>98.38%</td><td>97.7%</td><td>98.36%</td><td>98.47%</td><td>97.43%</td></tr>
-<tr><td>border/dotted.html</td><td>97.41%</td><td>96.46%</td><td>95.93%</td></tr>
+<tr><td>border/dotted.html</td><td>97.41%</td><td>96.46%</td><td>95.93%</td><td>98.81%</td><td>96.31%</td><td>98.13%</td></tr>
-<tr><td>border/double.html</td><td>97.96%</td><td>97.87%</td><td>97.95%</td></tr>
+<tr><td>border/double.html</td><td>97.96%</td><td>97.87%</td><td>97.95%</td><td>99.06%</td><td>97.99%</td><td>98.53%</td></tr>
-<tr><td>border/radius.html</td><td>99.74%</td><td>99.77%</td><td>99.75%</td></tr>
+<tr><td>border/radius.html</td><td>99.74%</td><td>99.77%</td><td>99.75%</td><td>99.88%</td><td>99.81%</td><td>99.75%</td></tr>
-<tr><td>border/solid.html</td><td>99.97%</td><td>99.97%</td><td>99.98%</td></tr>
+<tr><td>border/solid.html</td><td>99.97%</td><td>99.97%</td><td>99.98%</td><td>99.99%</td><td>99.97%</td><td>99.98%</td></tr>
-<tr><td>forms.html</td><td>95.96%</td><td>94.55%</td><td>95.01%</td></tr>
+<tr><td>forms.html</td><td>95.96%</td><td>94.55%</td><td>95.01%</td><td>98.57%</td><td>94.2%</td><td>97.69%</td></tr>
-<tr><td>images/canvas.html</td><td>99.86%</td><td>100%</td><td>100%</td></tr>
+<tr><td>images/canvas.html</td><td>99.86%</td><td>100%</td><td>100%</td><td>99.93%</td><td>100%</td><td>99.87%</td></tr>
-<tr><td>images/cross-origin.html</td><td>97.99%</td><td>97.58%</td><td>99.35%</td></tr>
+<tr><td>images/cross-origin.html</td><td>97.99%</td><td>97.58%</td><td>99.35%</td><td>99.7%</td><td>98.41%</td><td>99.89%</td></tr>
-<tr><td>images/empty.html</td><td>99.86%</td><td>99.87%</td><td>99.85%</td></tr>
+<tr><td>images/empty.html</td><td>99.86%</td><td>99.87%</td><td>99.85%</td><td>99.91%</td><td>99.81%</td><td>99.86%</td></tr>
-<tr><td>images/images.html</td><td>83.72%</td><td>96.93%</td><td>55.09%</td></tr>
+<tr><td>images/images.html</td><td>83.72%</td><td>96.93%</td><td>55.09%</td><td>92.45%</td><td>95.81%</td><td>87.06%</td></tr>
-<tr><td>images/svg.html</td><td>99.92%</td><td>96.79%</td><td>99.93%</td></tr>
+<tr><td>images/svg.html</td><td>99.92%</td><td>96.79%</td><td>99.93%</td><td>99.95%</td><td>96.51%</td><td>99.92%</td></tr>
-<tr><td>list/decimal-leading-zero.html</td><td>99.63%</td><td>99.72%</td><td>35.88%</td></tr>
+<tr><td>list/decimal-leading-zero.html</td><td>99.63%</td><td>99.72%</td><td>35.88%</td><td>99.7%</td><td>99.99%</td><td>15.05%</td></tr>
-<tr><td>list/decimal.html</td><td>99.64%</td><td>99.73%</td><td>35.89%</td></tr>
+<tr><td>list/decimal.html</td><td>99.64%</td><td>99.73%</td><td>35.89%</td><td>99.71%</td><td>99.99%</td><td>15.06%</td></tr>
-<tr><td>list/lower-alpha.html</td><td>99.65%</td><td>99.73%</td><td>35.89%</td></tr>
+<tr><td>list/lower-alpha.html</td><td>99.65%</td><td>99.73%</td><td>35.89%</td><td>99.72%</td><td>99.98%</td><td>15.06%</td></tr>
-<tr><td>list/upper-roman.html</td><td>99.45%</td><td>99.61%</td><td>35.94%</td></tr>
+<tr><td>list/upper-roman.html</td><td>99.45%</td><td>99.61%</td><td>35.94%</td><td>99.59%</td><td>99.99%</td><td>13.97%</td></tr>
-<tr><td>overflow.html</td><td>96.85%</td><td>97.49%</td><td>96.5%</td></tr>
+<tr><td>overflow.html</td><td>96.85%</td><td>97.49%</td><td>96.5%</td><td>98.15%</td><td>97.96%</td><td>99.42%</td></tr>
-<tr><td>pseudoelements.html</td><td>97.36%</td><td>97.94%</td><td>99.37%</td></tr>
+<tr><td>pseudoelements.html</td><td>97.36%</td><td>97.94%</td><td>99.37%</td><td>98.73%</td><td>97.81%</td><td>98.29%</td></tr>
-<tr><td>text/chinese.html</td><td>99.75%</td><td>99.74%</td><td>65.76%</td></tr>
+<tr><td>text/chinese.html</td><td>99.75%</td><td>99.74%</td><td>65.76%</td><td>93.93%</td><td>96%</td><td>46.75%</td></tr>
-<tr><td>text/linethrough.html</td><td>97.14%</td><td>94.12%</td><td>47.08%</td></tr>
+<tr><td>text/linethrough.html</td><td>97.14%</td><td>94.12%</td><td>47.08%</td><td>98.99%</td><td>90.28%</td><td>31.02%</td></tr>
-<tr><td>text/text.html</td><td>95.71%</td><td>94.67%</td><td>85.01%</td></tr>
+<tr><td>text/text.html</td><td>95.71%</td><td>94.67%</td><td>85.01%</td><td>96.83%</td><td>95.6%</td><td>94.63%</td></tr>b
-<tr><td>text/underline-lineheight.html</td><td>97.06%</td><td>92.35%</td><td>53%</td></tr>
+<tr><td>text/underline-lineheight.html</td><td>97.06%</td><td>92.35%</td><td>53%</td><td>99.15%</td><td>93.69%</td><td>40.76%</td></tr>
-<tr><td>text/underline.html</td><td>97.65%</td><td>93.5%</td><td>47.02%</td></tr>
+<tr><td>text/underline.html</td><td>97.65%</td><td>93.5%</td><td>47.02%</td><td>99.35%</td><td>89.85%</td><td>31.07%</td></tr>
-<tr><td>visibility.html</td><td>99.19%</td><td>98.92%</td><td>99.39%</td></tr>
+<tr><td>visibility.html</td><td>99.19%</td><td>98.92%</td><td>99.39%</td><td>99.69%</td><td>99.32%</td><td>99.74%</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-index1.html</td><td>96.99%</td><td>99.27%</td><td>99.44%</td><td>98.62%</td><td>98.48%</td><td>98%</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-index2.html</td><td>95.85%</td><td>98.06%</td><td>97.72%</td><td>97.79%</td><td>96.69%</td><td>96.72%</td></tr>
-<tr><td>zindex/z-index3.html</td><td>98.6%</td><td>98.29%</td><td>98.56%</td></tr>
+<tr><td>zindex/z-index3.html</td><td>98.6%</td><td>98.29%</td><td>98.56%</td><td>99.35%</td><td>96.49%</td><td>97.92%</td></tr>
-</tbody></table>
+</tbody></table>

tests/selenium.js

@@ -99,7 +99,7 @@
               }
               done(100 - (Math.round((diff/h2cPixels.length) * 10000) / 100));
             });
-          })
+          });
         });
       });
     });
@@ -247,26 +247,57 @@
   };
 
   exports.markdown = function() {
-    var data = {}, html = "<table><thead><tr><td></td>",
+    var data = {},
-    browsers = ["chrome", "firefox", "iexplorer"];
+        html = "<table><thead><tr><td></td>",
+        md = " | ",
+        browsers = ["chrome", "firefox", "iexplorer", "safari"],
+        activeBrowsers = [];
 
+    // Create row for browsers
     browsers.forEach(function(browser) {
-      data[browser] = JSON.parse(fs.readFileSync("tests/results/" + browser + ".json"));
-      html += "<th>" + browser + "<br />" + data[browser].version + "</th>";
-    });
-    html += "</tr></thead><tbody>\n";
 
-    Object.keys(data[browsers[0]].tests).forEach(function(testFile) {
+       if (fs.existsSync("tests/results/" + browser + ".json")) {
+
+        var fileContents = fs.readFileSync("tests/results/" + browser + ".json");
+        data[browser] = JSON.parse(fileContents);
+
+        activeBrowsers.push(browser);
+            
+        html += "<th>" + browser + "<br />" + data[browser].version + "</th>";
+        md += browser + data[browser].version + " | ";
+      } else {
+        console.log("Browser report not found. ", browser + ".json");
+      }
+
+    });
+
+    html += "</tr></thead><tbody>\n";
+    md += "\n ----";
+    for (var i = activeBrowsers.length - 1; i >= 0; i--) {
+      md += "|---- ";
+    }
+    md += "\n";
+
+    Object.keys(data[activeBrowsers[0]].tests).forEach(function(testFile) {
+
       html += "<tr><td>" + testFile.substring(12) + "</td>";
-      browsers.forEach(function(browser) {
+      md += testFile.substring(12);
-        html += "<td>" + Math.round(data[browser].tests[testFile] * 100) / 100 + "%</td>";
+      activeBrowsers.forEach(function(activeBrowsers) {
+        html += "<td>" + Math.round(data[activeBrowsers].tests[testFile] * 100) / 100 + "%</td>";
+        md += " | " + Math.round(data[activeBrowsers].tests[testFile] * 100) / 100 + "%";
       });
-      html += "</tr>\n"
+      html += "</tr>\n";
+      md += "\n";
     });
 
     html += "</tbody></table>";
 
-    fs.writeFileSync("tests/readme.md", html);
+    // if (isMarkdown){
+    //   fs.writeFileSync("tests/readme.md", md);
+    // } else {
+      fs.writeFileSync("tests/readme.md", html);
+    // }
+    
   };
 
 })();