diff --git a/src/Generate.js b/src/Generate.js index 41827e0..48b7fd9 100644 --- a/src/Generate.js +++ b/src/Generate.js @@ -42,10 +42,10 @@ _html2canvas.Generate.parseGradient = function(css, bounds) { gradient = { type: 'linear', - x0: 0, - y0: 0, - x1: 0, - y1: 0, + x0: null, + y0: null, + x1: null, + y1: null, colorStops: [] }; @@ -56,23 +56,33 @@ _html2canvas.Generate.parseGradient = function(css, bounds) { for(i = 0; i < m2Len; i+=1){ switch(m2[i]) { case 'top': + gradient.y0 = 0; gradient.y1 = bounds.height; break; case 'right': gradient.x0 = bounds.width; + gradient.x1 = 0; break; case 'bottom': gradient.y0 = bounds.height; + gradient.y1 = 0; break; case 'left': + gradient.x0 = 0; gradient.x1 = bounds.width; break; } } } + if(gradient.x0 === null && gradient.x1 === null){ // center + gradient.x0 = gradient.x1 = bounds.width / 2; + } + if(gradient.y0 === null && gradient.y1 === null){ // center + gradient.y0 = gradient.y1 = bounds.height / 2; + } // get colors and stops m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}(?:%|px))?)+/g); @@ -165,12 +175,6 @@ _html2canvas.Generate.parseGradient = function(css, bounds) { gradient.y1 = bounds.height - gradient.y0; } - if(gradient.x0 === gradient.x1) // center - gradient.x0 = gradient.x1 = 0; - - if(gradient.y0 === gradient.y1) // center - gradient.y0 = gradient.y1 = 0; - // get colors and stops m2 = m1[3].match(/((?:rgb|rgba)\(\d{1,3},\s\d{1,3},\s\d{1,3}(?:,\s[0-9\.]+)?\)(?:\s\d{1,3}%)?)+/g); if(m2){ diff --git a/tests/qunit/index.html b/tests/qunit/index.html index 57604e5..14c08a4 100644 --- a/tests/qunit/index.html +++ b/tests/qunit/index.html @@ -95,7 +95,7 @@ /* FF 3.6+ */ background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00); /* Chrome,Safari4+ */ - background: -webkit-gradient(linear, left top, right top, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00)); + background: -webkit-gradient(linear, left center, right center, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00)); /* Chrome 10+, Safari 5.1+ */ background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00); /* Opera 11.10+ */ @@ -111,7 +111,7 @@ /* FF 3.6+ */ background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); /* Chrome, Safari 4+ */ - background: -webkit-gradient(linear, left top, right top, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b)); + background: -webkit-gradient(linear, left center, right center, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b)); /* Chrome 10+, Safari 5.1+ */ background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%); /* Opera 11.10+ */ @@ -127,7 +127,7 @@ /* FF 3.6+ */ background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%); /* Chrome, Safari 4+ */ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f0b7a1), color-stop(50%, #8c3310), color-stop(51%, #752201), color-stop(100%, #bf6e4e)); + background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #f0b7a1), color-stop(50%, #8c3310), color-stop(51%, #752201), color-stop(100%, #bf6e4e)); /* Opera 11.10+ */ background: -o-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%); /* IE 10+ */ diff --git a/tests/qunit/unit/generate.js b/tests/qunit/unit/generate.js index 4a2f846..eb358ed 100644 --- a/tests/qunit/unit/generate.js +++ b/tests/qunit/unit/generate.js @@ -19,9 +19,9 @@ $(function() { { type: 'linear', x0: 0, - y0: 0, + y0: 25, x1: 50, - y1: 0, + y1: 25, colorStops: [ { color: "rgb(255, 0, 0)", @@ -40,9 +40,9 @@ $(function() { { type: 'linear', x0: 0, - y0: 0, + y0: 25, x1: 50, - y1: 0, + y1: 25, colorStops: [ { color: "rgb(206, 219, 233)", @@ -80,9 +80,9 @@ $(function() { }, { type: "linear", - x0: 0, + x0: 25, y0: 0, - x1: 0, + x1: 25, y1: 50, colorStops: [ { @@ -120,7 +120,8 @@ $(function() { height: 50 }); - QUnit.deepEqual(gradient, expected['Generate.parseGradient'][i], 'Parsed gradient; got: ' + JSON.stringify(gradient)); + //QUnit.deepEqual(gradient, expected['Generate.parseGradient'][i], 'Parsed gradient; got: ' + JSON.stringify(gradient)); + QUnit.deepEqual(gradient, expected['Generate.parseGradient'][i], 'Parsed gradient with CSS: ' + src); } else { QUnit.ok(true, 'No CSS Background Gradient support'); }