mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

"center gradient BugFix"

Browse Source
This commit is contained in:
MoyuScript 2012-03-07 18:20:09 +00:00
parent 36a47e4a02
commit 2c41507d7c
3 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/Generate.js
View File

@ -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){

6
tests/qunit/index.html
View File

@ -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+ */

15
tests/qunit/unit/generate.js
View File

@ -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');
}