html2canvas/tests/qunit/unit/generate.js

329 lines
9.3 KiB
JavaScript
Raw Normal View History

// declare vars (preventing JSHint messages)
2012-03-05 00:18:03 +04:00
/* this breaks the testing for IE<9
var test = test || function(){},
QUnit = QUnit || {},
_html2canvas = _html2canvas || {};
2012-03-05 00:18:03 +04:00
*/
2012-03-05 00:18:03 +04:00
//module("Generate"); // <- overwrites predefined CSS-module ?
$(function() {
var propsToTest = {},
numDivs = {},
expected = {};
propsToTest['Generate.parseGradient'] = ["backgroundImage"];
numDivs['Generate.parseGradient'] = $('#backgroundGradients div').length;
expected['Generate.parseGradient'] = [
{
type: 'linear',
x0: 0,
y0: 35,
x1: 50,
y1: 35,
colorStops: [
{
color: "rgb(255, 0, 0)",
stop: 0
},
{
color: "rgb(255, 255, 0)",
stop: 0.5
},
{
color: "rgb(0, 255, 0)",
stop: 1
}
]
},
{
type: 'linear',
x0: 0,
y0: 35,
x1: 50,
y1: 35,
colorStops: [
{
color: "rgb(206, 219, 233)",
stop: 0
},
{
color: "rgb(170, 197, 222)",
stop: 0.17
},
{
color: "rgb(97, 153, 199)",
stop: 0.5
},
{
color: "rgb(58, 132, 195)",
stop: 0.51
},
{
color: "rgb(65, 154, 214)",
stop: 0.59
},
{
color: "rgb(75, 184, 240)",
stop: 0.71
},
{
color: "rgb(58, 139, 194)",
stop: 0.84
},
{
color: "rgb(38, 85, 139)",
stop: 1
}
]
},
{
type: "linear",
2012-03-07 22:20:09 +04:00
x0: 25,
y0: 0,
2012-03-07 22:20:09 +04:00
x1: 25,
y1: 70,
colorStops: [
{
color: "rgb(240, 183, 161)",
stop: 0
},
{
color: "rgb(140, 51, 16)",
stop: 0.5
},
{
color: "rgb(117, 34, 1)",
stop: 0.51
},
{
color: "rgb(191, 110, 78)",
stop: 1
}
]
2012-03-10 02:37:45 +04:00
},
{
type: "ellipse",
2012-03-10 02:37:45 +04:00
x0: 0,
y0: 0,
x1: 50,
y1: 70,
cx: 37.5,
cy: 13.3,
rx: 12.5,
ry: 13.3,
colorStops: [
{
color: "rgb(171, 171, 171)",
stop: 0
},
{
color: "rgb(0, 0, 255)",
stop: 0.33
},
{
color: "rgb(153, 31, 31)",
stop: 1
}
]
},
{
type: "circle",
2012-03-10 02:37:45 +04:00
x0: 0,
y0: 0,
x1: 50,
y1: 70,
cx: 37.5,
cy: 13.3,
rx: 18.25212316416915,
ry: 18.25212316416915,
colorStops: [
{
color: "rgb(171, 171, 171)",
stop: 0
},
{
color: "rgb(0, 0, 255)",
stop: 0.33
},
{
color: "rgb(153, 31, 31)",
stop: 1
}
]
},
{
type: "ellipse",
2012-03-10 02:37:45 +04:00
x0: 0,
y0: 0,
x1: 50,
y1: 70,
cx: 37.5,
cy: 13.3,
rx: 37.5,
ry: 56.7,
colorStops: [
{
color: "rgb(171, 171, 171)",
stop: 0
},
{
color: "rgb(0, 0, 255)",
stop: 0.33
},
{
color: "rgb(153, 31, 31)",
stop: 1
}
]
},
{
type: "circle",
2012-03-10 02:37:45 +04:00
x0: 0,
y0: 0,
x1: 50,
y1: 70,
cx: 37.5,
cy: 13.3,
rx: 67.97896733549283,
ry: 67.97896733549283,
colorStops: [
{
color: "rgb(171, 171, 171)",
stop: 0
},
{
color: "rgb(0, 0, 255)",
stop: 0.33
},
{
color: "rgb(153, 31, 31)",
stop: 1
}
]
},
{
type: "ellipse",
2012-03-10 02:37:45 +04:00
x0: 0,
y0: 0,
x1: 50,
y1: 70,
cx: 37.5,
cy: 13.3,
rx: 12.5,
ry: 13.3,
colorStops: [
{
color: "rgb(171, 171, 171)",
stop: 0
},
{
color: "rgb(0, 0, 255)",
stop: 0.33
},
{
color: "rgb(153, 31, 31)",
stop: 1
}
]
},
{
type: "circle",
2012-03-10 02:37:45 +04:00
x0: 0,
y0: 0,
x1: 50,
y1: 70,
cx: 37.5,
cy: 13.3,
rx: 67.97896733549283,
ry: 67.97896733549283,
colorStops: [
{
color: "rgb(171, 171, 171)",
stop: 0
},
{
color: "rgb(0, 0, 255)",
stop: 0.33
},
{
color: "rgb(153, 31, 31)",
stop: 1
}
]
}
];
test('Generate.parseGradient', propsToTest['Generate.parseGradient'].length * numDivs['Generate.parseGradient'], function() {
$('#backgroundGradients div').each(function(i, el) {
$.each(propsToTest['Generate.parseGradient'], function(s, prop) {
2012-03-06 03:15:58 +04:00
var src, gradient;
src = _html2canvas.Util.getCSS(el, prop);
if (/^(-webkit|-o|-moz|-ms|linear)-/.test(src)) {
gradient = _html2canvas.Generate.parseGradient(src, {
width: 50,
height: 70
});
2012-03-07 22:20:09 +04:00
//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');
}
});
});
});
propsToTest['Generate.Gradient'] = ["backgroundImage"];
numDivs['Generate.Gradient'] = $('#backgroundGradients div').length;
test('Generate.Gradient', propsToTest['Generate.Gradient'].length * numDivs['Generate.Gradient'], function() {
$('#backgroundGradients div').each(function(i, el) {
$.each(propsToTest['Generate.Gradient'], function(s, prop) {
var src, img, canvas, ctx, id, data, len, red, green, blue, overallColor = 0;
src = _html2canvas.Util.getCSS(el, prop);
if (/^(-webkit|-o|-moz|-ms|linear)-/.test(src)) {
img = _html2canvas.Generate.Gradient(src, {
width: 50,
height: 50
});
canvas = document.createElement('canvas');
canvas.width = 50;
canvas.height = 50;
ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
id = ctx.getImageData(0, 0, 50, 50);
data = id.data;
len = data.length;
//console.log(img);
for (var i = 0; i < len; i += 4) {
red = data[i]; // red
green = data[i + 1]; // green
blue = data[i + 2]; // blue
// i+3 is alpha (the fourth element)
overallColor += (red + green + blue) / 3;
}
overallColor /= (len / 4);
QUnit.notEqual(overallColor, 255, 'Background Gradient drawn with CSS: ' + src);
} else {
QUnit.ok(true, 'No CSS Background Gradient support');
}
});
});
});
});