removed jQuery.css dependancy and few general CSS bug fixes

.gitignore

@@ -6,9 +6,6 @@
 /tests/flashcanvas.html
 /lib/
 /build/
-index.html
 image.jpg
-screenshots.html
-screenshots_local.html
 /.project
 /.settings/

src/Core.js

@@ -4,7 +4,7 @@
   http://www.twitter.com/niklasvh
 
   Released under MIT License
-*/
+ */
 "use strict";
 
 var _html2canvas = {},
@@ -55,72 +55,98 @@ _html2canvas.Util.Bounds = function getBounds (el) {
     
         return bounds;
             
-    }  /*else{
+    }       
-           
-           
-            p = $(el).offset();       
-          
-            return {               
-                left: p.left + getCSS(el,"borderLeftWidth", true),
-                top: p.top + getCSS(el,"borderTopWidth", true),
-                width:$(el).innerWidth(),
-                height:$(el).innerHeight()                
-            };
-            
-
-        }     */      
 };
 
 _html2canvas.Util.getCSS = function (el, attribute) {
-    // return jQuery(el).css(attribute);
+    // return $(el).css(attribute);
-    /*
-    var val,
-    left,
-    rsLeft = el.runtimeStyle && el.runtimeStyle[ attribute ],
-    style = el.style;
     
-    if ( el.currentStyle ) {
+    var val;
-        val = el.currentStyle[ attribute ];
-    } else if (window.getComputedStyle) {
-        val = document.defaultView.getComputedStyle(el, null)[ attribute ];
-    }
-    */
-    // Check if we are not dealing with pixels, (Opera has issues with this)
-    // Ported from jQuery css.js
-    // From the awesome hack by Dean Edwards
-    // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
     
-    // If we're not dealing with a regular pixel number
+    function toPX( attribute, val ) {
-    // but a number that has a weird ending, we need to convert it to pixels
+        var rsLeft = el.runtimeStyle && el.runtimeStyle[ attribute ],
+        left,
+        style = el.style;
                 
-    // if ( !/^-?\d+(?:px)?$/i.test( val ) && /^-?\d/.test( val ) ) {
+        // Check if we are not dealing with pixels, (Opera has issues with this)
-    /*
+        // Ported from jQuery css.js
-        // Remember the original values
+        // From the awesome hack by Dean Edwards
-        left = style.left;
+        // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
+
+        // If we're not dealing with a regular pixel number
+        // but a number that has a weird ending, we need to convert it to pixels   
+        if ( !/^-?\d+(?:px)?$/i.test( val ) && /^-?\d/.test( val ) ) {
+
+            // Remember the original values
+            left = style.left;
+
+            // Put in the new values to get a computed value out
+            if ( rsLeft ) {
+                el.runtimeStyle.left = el.currentStyle.left;
+            }
+            style.left = attribute === "fontSize" ? "1em" : (val || 0);
+            val = style.pixelLeft + "px";
+
+            // Revert the changed values
+            style.left = left;
+            if ( rsLeft ) {
+                el.runtimeStyle.left = rsLeft;
+            }
 
-        // Put in the new values to get a computed value out
-        if ( rsLeft ) {
-            el.runtimeStyle.left = el.currentStyle.left;
         }
-        style.left = attribute === "fontSize" ? "1em" : (val || 0);
+        return val;
-        val = style.pixelLeft + "px";
+    }
     
-        // Revert the changed values
-        style.left = left;
-        if ( rsLeft ) {
-            el.runtimeStyle.left = rsLeft;
-        }*/
-    // val = $(el).css(attribute);
-    // }
     
-    /*
+    if ( window.getComputedStyle ) {
-    var val = $(el).css(attribute);
+        val = document.defaultView.getComputedStyle(el, null)[ attribute ];
         
-    if (val === "medium") {
+        if ( attribute === "backgroundPosition" ) {
-        val = 3;
-    }*/
             
-    return $(el).css(attribute);
+            val = (val.split(",")[0] || "0 0").split(" ");
+           
+            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
+            val[ 1 ] = ( val[1].indexOf( "%" ) === -1 ) ? toPX(  attribute + "Y", val[ 1 ] ) : val[ 1 ];
+        } 
+        
+    } else if ( el.currentStyle ) {
+        // IE 9>       
+        if (attribute === "backgroundPosition") {
+            // Older IE uses -x and -y 
+            val = [ toPX(  attribute + "X", el.currentStyle[ attribute + "X" ]  ), toPX(  attribute + "Y", el.currentStyle[ attribute + "X" ]  ) ];
+            
+        } else {
+
+            val = toPX(  attribute, el.currentStyle[ attribute ]  );
+            
+            if (/^(border)/i.test( attribute ) && /^(medium|thin|thick)$/i.test( val )) {
+                switch (val) {
+                    case "thin":
+                        val = "1px";
+                        break;
+                    case "medium":
+                        val = "0px"; // this is wrong, it should be 3px but IE uses medium for no border as well.. TODO find a work around
+                        break;
+                    case "thick":
+                        val = "5px";
+                        break;
+                }
+            }    
+        }
+
+
+
+    }
+
+
+
+    
+    return val;
+    
+
+    
+//return $(el).css(attribute);
     
   
 };
@@ -129,17 +155,7 @@ _html2canvas.Util.getCSS = function (el, attribute) {
 _html2canvas.Util.BackgroundPosition = function ( el, bounds, image ) {
     // TODO add support for multi image backgrounds
     
-    var bgposition = (function( bgp ){   
+    var bgposition =  _html2canvas.Util.getCSS( el, "backgroundPosition" ) ,
-            
-        if (bgp !== undefined) {
-            return (bgp.split(",")[0] || "0 0").split(" ");
-        } else {
-            // Older IE uses -x and -y 
-            return [ _html2canvas.Util.getCSS( el, "backgroundPositionX" ), _html2canvas.Util.getCSS( el, "backgroundPositionY" ) ];
-        }
-            
-            
-    })( _html2canvas.Util.getCSS( el, "backgroundPosition" ) ),
     topPos,
     left,
     percentage,

src/Generate.js

@@ -4,7 +4,7 @@
   http://www.twitter.com/niklasvh
 
   Released under MIT License
-*/
+ */
 
 _html2canvas.Generate = {};
 

src/Preload.js

@@ -46,12 +46,12 @@ _html2canvas.Preload = function( options ) {
     function start(){
         h2clog("html2canvas: start: images: " + images.numLoaded + " / " + images.numTotal + " (failed: " + images.numFailed + ")");
         if (!images.firstRun && images.numLoaded >= images.numTotal){
+            h2clog("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
             
             if (typeof options.complete === "function"){
                 options.complete(images);
             }
         
-            h2clog("Finished loading images: # " + images.numTotal + " (failed: " + images.numFailed + ")");
         }
     }
             
@@ -179,6 +179,7 @@ _html2canvas.Preload = function( options ) {
                 // CORS succeeded
                 window.clearTimeout( imageObj.timer );
             }
+            
             images.numLoaded++;
             imageObj.succeeded = true;
             start();
@@ -208,6 +209,16 @@ _html2canvas.Preload = function( options ) {
             start();
             
         };
+        
+        // TODO Opera has no load/error event for SVG images
+        
+        // Opera ninja onload's cached images
+        window.setTimeout(function(){
+            if ( img.width !== 0 && imageObj.succeeded === undefined ) {
+                img.onload();
+            }        
+        }, 100); // needs a reflow for base64 encoded images? interestingly timeout of 0 doesn't work but 1 does.
+
     }
     
 

tests/qunit/index.html

@@ -34,11 +34,16 @@
                 width:50px;
                 height:50px;
             }
+
+            #paddingPercentage div {
+                width:50px;
+                height:50px;
+            }
         </style>
     </head>
     <body>
         <div id="qunit"></div>
-        <div id="qunit-fixture" style="display:none;">
+        <div id="qunit-fixture" style="visibility:none; height:1px; overflow:scroll;">
             <div id="borders">
                 <div style="border-width: 1px 0;"></div>
                 <div style="border-width: 1em 0;"></div>
@@ -55,13 +60,17 @@
                 <div style="padding: 1px 0;"></div>
                 <div style="padding: 1em 0;"></div>
                 <div style="padding: thin medium thick;"></div>
-                <div style="padding: 5% 6px 12%;"></div> 
                 <div style="padding: 5em 5ex 5in 5cm;"></div>
                 <div style="padding: 500em 500ex 500in 500cm;"></div>
                 <div style="padding: 5mm 5pt 5pc 5px;"></div> 
                 <div style="padding: 500mm 500pt 500pc 500px;"></div> 
+                <div style="padding: 1px 5%;"></div>
+                <div style="padding: 15% 0 3%;"></div>
             </div>
 
+
+
+
             <div id="backgroundPosition">
                 <div style="background-position: 1px 0;"></div>
                 <div style="background-position: 1em 0;"></div>

tests/qunit/unit/css.js

@@ -1,9 +1,3 @@
-/* 
-* @author Niklas von Hertzen <niklas at hertzen.com>
-* @created 3.3.2012 
-* @website http://hertzen.com
- */
-
 module("CSS");
 $(function() {  
    
@@ -76,7 +70,7 @@ $(function() {
                 } else if (expect === "thick") {
                     expect = "5px";
                 }
-                QUnit.equal( _html2canvas.Util.getCSS(el, prop), expect, "div #" + (i + 1) + " property " + prop + " equals " + $(el).css(prop) ); 
+                QUnit.equal( _html2canvas.Util.getCSS(el, prop), expect, "div #" + (i + 1) + " property " + prop + " equals " + expect ); 
             });
             
         });
@@ -99,6 +93,8 @@ $(function() {
     
         
 
+    
+        
     var propsToTest3 = ["backgroundPosition"],
     numDivs3 = $('#backgroundPosition div').length;
     
@@ -109,11 +105,17 @@ $(function() {
                 var img =  new Image();
                 img.width = 50;
                 img.height = 50;
+                
                 var item = _html2canvas.Util.getCSS(el, prop),
-                pos = _html2canvas.Util.BackgroundPosition(el, _html2canvas.Util.Bounds(el), img);
+                pos = _html2canvas.Util.BackgroundPosition(el, _html2canvas.Util.Bounds(el), img),
+                split;
                 
+                if ( window.getComputedStyle ) {
+                    split = $(el).css(prop).split(" ");
+                } else {
+                    split = [$(el).css(prop+"X"),$(el).css(prop+"Y")]
+                }
                 
-                var split = $(el).css(prop).split(" ");
                 var testEl = $('<div />').css({
                     'position': 'absolute',
                     'left': split[0],
@@ -125,8 +127,8 @@ $(function() {
                 
                 
                 
-                QUnit.equal( pos.left, parseFloat(testEl.css('left'), 10), "div #" + (i + 1) + " background-position-x equals " + pos.left + " from " + item ); 
+                QUnit.equal( pos.left, Math.round(parseFloat(testEl.css('left'), 10)), "div #" + (i + 1) + " background-position-x equals " + pos.left + " from " + item ); 
-                QUnit.equal( pos.top, parseFloat(testEl.css('top'), 10), "div #" + (i + 1) + " background-position-y equals " + pos.top ); 
+                QUnit.equal( pos.top, Math.round(parseFloat(testEl.css('top'), 10)), "div #" + (i + 1) + " background-position-y equals " + pos.top ); 
                 
                 testEl.remove();
                 

tests/test.js

@@ -5,7 +5,7 @@
 
   Released under MIT License
 */
-var h2cSelector = document.body, h2cOptions;
+var h2cSelector, h2cOptions;
 (function(document, window) {
     var scrStart = '<script type="text/javascript" src="', scrEnd = '"></script>';
     document.write(scrStart + '../external/jquery-1.6.2.js' + scrEnd);
@@ -17,7 +17,9 @@ var h2cSelector = document.body, h2cOptions;
         if (window.setUp) {
             window.setUp();
         }
+        h2cSelector = [document.body];
         setTimeout(function() {
+            
             $(h2cSelector).html2canvas($.extend({
                 flashcanvas: "../external/flashcanvas.min.js",
                 logging: true,