html2canvas/tests/qunit/unit/generate.js
2012-03-05 23:15:58 +00:00

178 lines
5.6 KiB
JavaScript

// declare vars (preventing JSHint messages)
/* this breaks the testing for IE<9
var test = test || function(){},
QUnit = QUnit || {},
_html2canvas = _html2canvas || {};
*/
//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: 0,
x1: 50,
y1: 0,
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: 0,
x1: 50,
y1: 0,
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",
x0: 0,
y0: 0,
x1: 0,
y1: 50,
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
}
]
}
];
test('Generate.parseGradient', propsToTest['Generate.parseGradient'].length * numDivs['Generate.parseGradient'], function() {
$('#backgroundGradients div').each(function(i, el) {
$.each(propsToTest['Generate.parseGradient'], function(s, prop) {
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: 50
});
QUnit.deepEqual(gradient, expected['Generate.parseGradient'][i], 'Parsed gradient; got: ' + JSON.stringify(gradient));
} 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');
}
});
});
});
});