background-size fixes

generated gradients need a unique key (the same value can generate a
different image based on background-size); fix so that a single value
specified for background-size yields a scaled height as the second
parameter

src/Core.js

@@ -204,7 +204,16 @@ _html2canvas.Util.getCSS = function (el, attribute, index) {
 
       } else {
         val[ 0 ] = ( val[ 0 ].indexOf( "%" ) === -1 ) ? toPX(  attribute + "X", val[ 0 ] ) : val[ 0 ];
-        val[ 1 ] = ( val[ 1 ] === undefined ) ? val[ 0 ] : val[ 1 ]; // IE 9 doesn't return double digit always
+        if(val[ 1 ] === undefined) {
+          if(attribute === 'backgroundSize') { 
+            val[ 1 ] = 'auto'; 
+            return val;
+          }
+          else {
+            // IE 9 doesn't return double digit always
+            val[ 1 ] = val[ 0 ];
+          }
+        }
         val[ 1 ] = ( val[ 1 ].indexOf( "%" ) === -1 ) ? toPX(  attribute + "Y", val[ 1 ] ) : val[ 1 ];
       }
     } else if ( /border(Top|Bottom)(Left|Right)Radius/.test( attribute) ) {
@@ -292,10 +301,10 @@ function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroun
 
     } else {
       if(prop === 'backgroundSize') {
-        if(bgposition[0] === 'auto') { left = image.width; }
+        if(bgposition[0] === 'auto') { 
-        if(bgposition[1] === 'auto') { topPos = image.height; }
+          left = image.width; 
 
-        if(left === undefined) {
+        } else {
           if(bgposition[0].match(/contain|cover/)) {
             var resized = _html2canvas.Util.resizeBounds( image.width, image.height, bounds.width, bounds.height, bgposition[0] );
             left = resized.width;
@@ -310,17 +319,18 @@ function backgroundBoundsFactory( prop, el, bounds, image, imageIndex, backgroun
       }
     }
 
-    if(topPos === undefined) {
+    
-      if (bgposition[1].toString().indexOf("%") !== -1){
+    if(bgposition[1] === 'auto') { 
-        percentage = (parseFloat(bgposition[1])/100);
+      topPos = left / image.width * image.height; 
-        topPos =  bounds.height * percentage;
+    } else if (bgposition[1].toString().indexOf("%") !== -1){
-        if(prop !== 'backgroundSize') {
+      percentage = (parseFloat(bgposition[1])/100);
-          topPos -= (backgroundSize || image).height * percentage;
+      topPos =  bounds.height * percentage;
-        }
+      if(prop !== 'backgroundSize') {
-
+        topPos -= (backgroundSize || image).height * percentage;
-      } else {
-        topPos = parseInt(bgposition[1],10);
       }
+
+    } else {
+      topPos = parseInt(bgposition[1],10);
     }
 
     return [left, topPos];

src/Parse.js

@@ -666,12 +666,16 @@ _html2canvas.Parse = function (images, options) {
 
     for(var imageIndex = backgroundImages.length; imageIndex-- > 0;) {
       backgroundImage = backgroundImages[imageIndex];
-      
+     
       if (!backgroundImage.args || backgroundImage.args.length === 0) {
         continue;
       }
 
-      image = loadImage(backgroundImage.method === 'url' ? backgroundImage.args[0] : backgroundImage.value);
+      var key = backgroundImage.method === 'url' ?
+        backgroundImage.args[0] :
+        backgroundImage.value + '/' + element.__html2canvas__id + '/' + imageIndex;
+
+      image = loadImage(key);
 
       // TODO add support for background-origin
       if (image) {

src/Preload.js

@@ -90,6 +90,7 @@ _html2canvas.Preload = function( options ) {
   }
 
   function getImages (el) {
+    el.__html2canvas__id = uid++;
 
     var contents = _html2canvas.Util.Children(el),
     i,
@@ -97,6 +98,7 @@ _html2canvas.Preload = function( options ) {
     background_images,
     src,
     img,
+    bounds,
     elNodeType = false;
 
     // Firefox fails with permission denied on pages with iframes
@@ -125,7 +127,9 @@ _html2canvas.Preload = function( options ) {
       }
 
       background_images = _html2canvas.Util.parseBackgroundImage(background_image);
-      while(!!(background_image = background_images.shift())) {
+      for(var imageIndex = background_images.length; imageIndex-- > 0;) {
+        background_image = background_images[imageIndex];
+
         if(!background_image || 
             !background_image.method || 
             !background_image.args || 
@@ -138,17 +142,21 @@ _html2canvas.Preload = function( options ) {
           methods.loadImage(src);
 
         } else if( background_image.method.match( /\-gradient$/ ) ) {
-          img = _html2canvas.Generate.Gradient( background_image.value, _html2canvas.Util.Bounds( el ) );
+          if(bounds === undefined) {
+            bounds = _html2canvas.Util.Bounds( el );
+          }
+
+          var key = background_image.value + '/' + el.__html2canvas__id + '/' + imageIndex;
+          img = _html2canvas.Generate.Gradient( background_image.value,  bounds);
 
           if ( img !== undefined ){
-            images[background_image.value] = {
+            images[ key ] = {
               img: img,
               succeeded: true
             };
             images.numTotal++;
             images.numLoaded++;
             start();
-
           }
         }
       }
@@ -216,7 +224,7 @@ _html2canvas.Preload = function( options ) {
       return;
     }
     if(!el.id) { 
-      el.id = '__html2cavas__' + (uid++);
+      el.id = '__html2canvas__' + (uid++);
     }
     if(!injectStyle) {
       injectStyle = document.createElement('style');
@@ -382,7 +390,7 @@ _html2canvas.Preload = function( options ) {
           .forEach(removePseudoElements);
       }
     },
-    
+
     renderingDone: function() {
       if (timeoutTimer) {
         window.clearTimeout(timeoutTimer);