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

Fix unit tests

Browse Source
This commit is contained in:
Niklas von Hertzen 2014-02-15 00:30:28 +02:00
parent d9d516d27e
commit 60587c72bf
4 changed files with 265 additions and 488 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
tests/qunit/.jshintrc Normal file
View File

@ -0,0 +1,18 @@
{
"curly": true,
"eqeqeq": true,
"immed": true,
"latedef": false,
"newcap": true,
"noarg": true,
"sub": true,
"undef": true,
"boss": true,
"eqnull": true,
"browser": true,
"globals": {
"jQuery": true
},
"predef": ["deepEqual", "module", "test", "$", "QUnit", "NodeParser", "NodeContainer", "StackingContext", "TextContainer", "ImageLoader", "CanvasRenderer", "Renderer", "Support", "bind", "Promise",
"ImageContainer", "ProxyImageContainer", "DummyImageContainer", "Font", "FontMetrics", "GradientContainer", "LinearGradientContainer", "WebkitGradientContainer", "log", "smallImage", "parseBackgrounds"]
}

26
tests/qunit/index.html
View File

@ -11,15 +11,23 @@
<!-- src files --> <!-- src files -->
<script type="text/javascript" src="../assets/jquery-1.6.2.js"></script> <script type="text/javascript" src="../assets/jquery-1.6.2.js"></script>
<!-- 'Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'Util', 'renderers/Canvas' --> <script type="text/javascript" src="../../src/log.js"></script>
<script type="text/javascript" src="../../src/Core.js"></script> <script type="text/javascript" src="../../src/nodecontainer.js"></script>
<script type="text/javascript" src="../../src/Generate.js"></script> <script type="text/javascript" src="../../src/stackingcontext.js"></script>
<script type="text/javascript" src="../../src/Parse.js"></script> <script type="text/javascript" src="../../src/textcontainer.js"></script>
<script type="text/javascript" src="../../src/Preload.js"></script> <script type="text/javascript" src="../../src/support.js"></script>
<script type="text/javascript" src="../../src/Queue.js"></script> <script type="text/javascript" src="../../src/imagecontainer.js"></script>
<script type="text/javascript" src="../../src/Renderer.js"></script> <script type="text/javascript" src="../../src/gradientcontainer.js"></script>
<script type="text/javascript" src="../../src/Util.js"></script> <script type="text/javascript" src="../../src/lineargradientcontainer.js"></script>
<script type="text/javascript" src="../../src/renderers/Canvas.js"></script> <script type="text/javascript" src="../../src/webkitgradientcontainer.js"></script>
<script type="text/javascript" src="../../src/imageloader.js"></script>
<script type="text/javascript" src="../../src/nodeparser.js"></script>
<script type="text/javascript" src="../../src/font.js"></script>
<script type="text/javascript" src="../../src/fontmetrics.js"></script>
<script type="text/javascript" src="../../src/core.js"></script>
<script type="text/javascript" src="../../src/renderer.js"></script>
<script type="text/javascript" src="../../src/promise.js"></script>
<script type="text/javascript" src="../../src/renderers/canvas.js"></script>
<script src="unit/css.js"></script> <script src="unit/css.js"></script>
<script src="unit/generate.js"></script> <script src="unit/generate.js"></script>

330
tests/qunit/unit/css.js
View File

@ -1,78 +1,14 @@
// declare vars (preventing JSHint messages)
/* this breaks the testing for IE<9, haven't really looked into why
var test = test || function(){},
QUnit = QUnit || {},
_html2canvas = _html2canvas || {};
*/
module("CSS"); module("CSS");
$(function() { $(function() {
var propsToTest = {}, var propsToTest = {},
numDivs = {}; numDivs = {};
propsToTest['border-width'] = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"], propsToTest['border-width'] = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
numDivs['border-width'] = $('#borders div').length; numDivs['border-width'] = $('#borders div').length;
/* test('border-width', propsToTest['border-width'].length * numDivs['border-width'], function() {
expecting = [ $('#borders div').each(function(i, node) {
// #1
"1px",
"0px",
"1px",
"0px",
// #2
"16px",
"0px",
"16px",
"0px",
// #3
"1px",
"3px",
"5px",
"3px",
// #4
"3px",
"3px",
"3px",
"3px",
// #5
"80px",
"35px",
"480px",
"188px",
// #6
"3904px",
"3500px",
"2944px",
"2513px",
// #7
"18px",
"6px",
"80px",
"5px",
// #8
"1889px",
"666px",
"3904px",
"500px"
];
*/
test('border-width', propsToTest['border-width'].length * numDivs['border-width'], function() {
$('#borders div').each(function(i, el) {
$.each(propsToTest['border-width'], function(s, prop) { $.each(propsToTest['border-width'], function(s, prop) {
var expect = $(el).css(prop); var expect = $(node).css(prop);
// older IE's don't necessarily return px even with jQuery // older IE's don't necessarily return px even with jQuery
if (expect === "thin") { if (expect === "thin") {
expect = "1px"; expect = "1px";
@ -81,187 +17,211 @@ $(function() {
} else if (expect === "thick") { } else if (expect === "thick") {
expect = "5px"; expect = "5px";
} }
QUnit.equal( _html2canvas.Util.getCSS(el, prop), expect, "div #" + (i + 1) + " property " + prop + " equals " + expect ); var container = new NodeContainer(node, null);
QUnit.equal(container.css(prop), expect, "div #" + (i + 1) + " property " + prop + " equals " + expect );
}); });
});
});
propsToTest['padding width'] = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"];
numDivs['padding width'] = $('#padding div').length;
test('padding width', propsToTest['padding width'].length * numDivs['padding width'] * 2, function() {
$('#padding div').each(function(i, el) {
$.each(propsToTest['padding width'], function(s, prop) {
var isPx = _html2canvas.Util.getCSS(el, prop).indexOf("px");
QUnit.notEqual( isPx, -1, "div #" + (i + 1) + " property " + prop + " is in pixels" );
QUnit.equal( _html2canvas.Util.getCSS(el, prop), $(el).css(prop), "div #" + (i + 1) + " property " + prop + " equals " + $(el).css(prop) );
});
}); });
}); });
propsToTest['padding width'] = ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"];
numDivs['padding width'] = $('#padding div').length;
test('padding width', propsToTest['padding width'].length * numDivs['padding width'] * 2, function() {
$('#padding div').each(function(i, node) {
$.each(propsToTest['padding width'], function(s, prop) {
var container = new NodeContainer(node, null);
var isPx = container.css(prop).indexOf("px");
QUnit.notEqual(isPx, -1, "div #" + (i + 1) + " property " + prop + " is in pixels");
QUnit.equal(container.css(prop), $(node).css(prop), "div #" + (i + 1) + " property " + prop + " equals " + $(node).css(prop));
});
});
});
propsToTest['background-position'] = ["backgroundPosition"]; propsToTest['background-position'] = ["backgroundPosition"];
numDivs['background-position'] = $('#backgroundPosition div').length; numDivs['background-position'] = $('#backgroundPosition div').length;
test('background-position', propsToTest['background-position'].length * numDivs['background-position'] * 2, function() { test('background-position', propsToTest['background-position'].length * numDivs['background-position'] * 2, function() {
$('#backgroundPosition div').each(function(i, node) {
$('#backgroundPosition div').each(function(i, el) {
$.each(propsToTest['background-position'], function(s, prop) { $.each(propsToTest['background-position'], function(s, prop) {
var img = new Image(); var img = new Image();
img.width = 50; img.width = 50;
img.height = 50; img.height = 50;
var item = _html2canvas.Util.getCSS(el, prop), var container = new NodeContainer(node, null);
pos = _html2canvas.Util.BackgroundPosition(el, _html2canvas.Util.Bounds(el), img), var item = container.css(prop),
split; backgroundPosition = container.parseBackgroundPosition(NodeParser.prototype.parseBounds(container), img),
split = (window.getComputedStyle) ? $(node).css(prop).split(" ") : [$(node).css(prop+"X"),$(node).css(prop+"Y")];
if ( window.getComputedStyle ) {
split = $(el).css(prop).split(" ");
} else {
split = [$(el).css(prop+"X"),$(el).css(prop+"Y")];
}
var testEl = $('<div />').css({ var testEl = $('<div />').css({
'position': 'absolute', 'position': 'absolute',
'left': split[0], 'left': split[0],
'top': split[1] 'top': split[1]
}); });
testEl.appendTo(el); testEl.appendTo(node);
QUnit.equal(backgroundPosition.left, Math.round(parseFloat(testEl.css('left'))), "div #" + (i + 1) + " background-position-x equals " + backgroundPosition.left + " from " + item);
QUnit.equal(backgroundPosition.top, Math.round(parseFloat(testEl.css('top'))), "div #" + (i + 1) + " background-position-y equals " + backgroundPosition.top);
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, Math.round(parseFloat(testEl.css('top'), 10)), "div #" + (i + 1) + " background-position-y equals " + pos.top );
testEl.remove(); testEl.remove();
}); });
}); });
}); });
test('text-shadow', function() { test('text-shadow', function() {
$('#textShadows div').each(function(i, node) {
var index = i + 1;
var container = new NodeContainer(node, null);
var shadows = container.parseTextShadows();
if (i === 0) {
QUnit.equal(shadows.length, 0, 'div #' + index);
} else {
QUnit.equal(shadows.length, (i >= 6 ? 2 : 1), 'div #' + index);
QUnit.equal(shadows[0].offsetX, i, 'div #' + index + ' offsetX');
QUnit.equal(shadows[0].offsetY, i, 'div #' + index + ' offsetY');
if (i < 2) {
QUnit.equal(shadows[0].color, 'rgba(0, 0, 0, 0)', 'div #' + index + ' color');
} else if (i % 2 === 0) {
QUnit.equal(shadows[0].color, 'rgb(2, 2, 2)', 'div #' + index + ' color');
} else {
var opacity = '0.199219';
QUnit.equal(shadows[0].color, 'rgba(2, 2, 2, '+opacity+')', 'div #' + index + ' color');
}
$('#textShadows div').each(function(i, el) { // only testing blur once
var index = i+1; if (i === 1) {
var value = _html2canvas.Util.getCSS(el, 'textShadow'), QUnit.equal(shadows[0].blur, '1', 'div #' + index + ' blur');
shadows = _html2canvas.Util.parseTextShadows(value); }
if (i == 0) { }
QUnit.equal(shadows.length, 0, 'div #' + index); });
} else {
QUnit.equal(shadows.length, (i >= 6 ? 2 : 1), 'div #' + index);
QUnit.equal(shadows[0].offsetX, i, 'div #' + index + ' offsetX');
QUnit.equal(shadows[0].offsetY, i, 'div #' + index + ' offsetY');
if (i < 2) {
QUnit.equal(shadows[0].color, 'rgba(0, 0, 0, 0)', 'div #' + index + ' color');
} else if (i % 2 == 0) {
QUnit.equal(shadows[0].color, 'rgb(2, 2, 2)', 'div #' + index + ' color');
} else {
var opacity = '0.199219';
QUnit.equal(shadows[0].color, 'rgba(2, 2, 2, '+opacity+')', 'div #' + index + ' color');
}
// only testing blur once
if (i == 1) {
QUnit.equal(shadows[0].blur, '1', 'div #' + index + ' blur');
}
}
});
}); });
test('background-image', function () { test('background-image', function () {
test_parse_background_image( test_parse_background_image(
'url("te)st")', 'url("te)st")',
{ prefix: '', method: 'url', value: 'url("te)st")', args: ['te)st'] }, {
'test quoted' prefix: '',
); method: 'url',
value: 'url("te)st")',
test_parse_background_image( args: ['te)st'],
'url("te,st")', image: null
{ prefix: '', method: 'url', value: 'url("te,st")', args: ['te,st'] }, },
'test quoted'
);
test_parse_background_image(
'url(te,st)',
{ prefix: '', method: 'url', value: 'url(te,st)', args: ['te,st'] },
'test quoted' 'test quoted'
); );
test_parse_background_image( test_parse_background_image(
'url(test)', 'url("te,st")',
{ prefix: '', method: 'url', value: 'url(test)', args: ['test'] }, {
prefix: '',
method: 'url',
value: 'url("te,st")',
args: ['te,st'],
image: null
},
'test quoted'
);
test_parse_background_image(
'url(te,st)',
{
prefix: '',
method: 'url',
value: 'url(te,st)',
args: ['te,st'],
image: null
},
'test quoted'
);
test_parse_background_image(
'url(test)',
{
prefix: '',
method: 'url',
value: 'url(test)',
args: ['test'],
image: null
},
'basic url' 'basic url'
); );
test_parse_background_image( test_parse_background_image(
'url("test")', 'url("test")',
{ prefix: '', method: 'url', value: 'url("test")', args: ['test'] }, {
prefix: '',
method: 'url',
value: 'url("test")',
args: ['test'],
image: null
},
'quoted url' 'quoted url'
); );
test_parse_background_image( test_parse_background_image(
'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)', 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)',
{ {
prefix: '', method: 'url', prefix: '',
method: 'url',
value: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)', value: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)',
args: ['data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'] args: ['data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'],
}, image: null
},
'data url' 'data url'
); );
test_parse_background_image( test_parse_background_image(
'linear-gradient(red,black)', 'linear-gradient(red,black)',
{ prefix: '', method: 'linear-gradient', value: 'linear-gradient(red,black)', args: ['red','black'] }, {
prefix: '',
method: 'linear-gradient',
value: 'linear-gradient(red,black)',
args: ['red','black'],
image: null
},
'linear-gradient' 'linear-gradient'
); );
test_parse_background_image( test_parse_background_image(
'linear-gradient(top,rgb(255,0,0),rgb(0,0,0))', 'linear-gradient(top,rgb(255,0,0),rgb(0,0,0))',
{ {
prefix: '', method: 'linear-gradient', prefix: '',
method: 'linear-gradient',
value: 'linear-gradient(top,rgb(255,0,0),rgb(0,0,0))', value: 'linear-gradient(top,rgb(255,0,0),rgb(0,0,0))',
args: ['top', 'rgb(255,0,0)', 'rgb(0,0,0)'] args: ['top', 'rgb(255,0,0)', 'rgb(0,0,0)'],
}, image: null
},
'linear-gradient w/ rgb()' 'linear-gradient w/ rgb()'
); );
test_parse_background_image( test_parse_background_image(
'-webkit-linear-gradient(red,black)', '-webkit-linear-gradient(red,black)',
{ {
prefix: '-webkit-', method: 'linear-gradient', prefix: '-webkit-',
method: 'linear-gradient',
value: '-webkit-linear-gradient(red,black)', value: '-webkit-linear-gradient(red,black)',
args: ['red','black'] args: ['red','black'],
}, image: null
},
'prefixed linear-gradient' 'prefixed linear-gradient'
); );
test_parse_background_image( test_parse_background_image(
'linear-gradient(red,black), url(test), url("test"),\n none, ', [ 'linear-gradient(red,black), url(test), url("test"),\n none, ', [
{ prefix: '', method: 'linear-gradient', value: 'linear-gradient(red,black)', args: ['red','black'] }, { prefix: '', method: 'linear-gradient', value: 'linear-gradient(red,black)', args: ['red','black'], image: null },
{ prefix: '', method: 'url', value: 'url(test)', args: ['test'] }, { prefix: '', method: 'url', value: 'url(test)', args: ['test'], image: null },
{ prefix: '', method: 'url', value: 'url("test")', args: ['test'] }, { prefix: '', method: 'url', value: 'url("test")', args: ['test'], image: null },
{ prefix: '', method: 'none', value: 'none', args: [] } { prefix: '', method: 'none', value: 'none', args: [], image: null }
], ],
'multiple backgrounds' 'multiple backgrounds'
); );
}); });
function test_parse_background_image(value, expected, name) { function test_parse_background_image(value, expected, name) {
deepEqual( deepEqual(
_html2canvas.Util.parseBackgroundImage(value), parseBackgrounds(value),
Array.isArray(expected) ? expected : [expected], Array.isArray(expected) ? expected : [expected],
name name
); );
} }
// TODO add backgroundPosition % tests // TODO add backgroundPosition % tests
});
});

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

@ -1,329 +1,120 @@
// 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() { $(function() {
var propsToTest = {}, var propsToTest = {},
numDivs = {}, numDivs = {},
expected = {}; expected = {};
propsToTest['Generate.parseGradient'] = ["backgroundImage"]; propsToTest['parseBackgrounds Gradient'] = ["backgroundImage"];
numDivs['Generate.parseGradient'] = $('#backgroundGradients div').length; numDivs['parseBackgrounds Gradient'] = $('#backgroundGradients div').length;
expected['Generate.parseGradient'] = [ expected['parseBackgrounds Gradient'] = [
{ {
type: 'linear', method: "linear-gradient",
x0: 0, args: [
y0: 35, "left",
x1: 50, " rgb(255, 0, 0)",
y1: 35, " rgb(255, 255, 0)",
colorStops: [ " rgb(0, 255, 0)"
{
color: "rgb(255, 0, 0)",
stop: 0
},
{
color: "rgb(255, 255, 0)",
stop: 0.5
},
{
color: "rgb(0, 255, 0)",
stop: 1
}
] ]
}, },
{ {
type: 'linear', method: 'linear-gradient',
x0: 0, args: [
y0: 35, "left",
x1: 50, " rgb(206, 219, 233) 0%",
y1: 35, " rgb(170, 197, 222) 17%",
colorStops: [ " rgb(97, 153, 199) 50%",
{ " rgb(58, 132, 195) 51%",
color: "rgb(206, 219, 233)", " rgb(65, 154, 214) 59%",
stop: 0 " rgb(75, 184, 240) 71%",
}, " rgb(58, 139, 194) 84%",
{ " rgb(38, 85, 139) 100%"
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", method: "gradient",
x0: 25, args: [
y0: 0, "linear",
x1: 25, " 50% 0%",
y1: 70, " 50% 100%",
colorStops: [ " from(rgb(240, 183, 161))",
{ " color-stop(0.5, rgb(140, 51, 16))",
color: "rgb(240, 183, 161)", " color-stop(0.51, rgb(117, 34, 1))",
stop: 0 " to(rgb(191, 110, 78))"
},
{
color: "rgb(140, 51, 16)",
stop: 0.5
},
{
color: "rgb(117, 34, 1)",
stop: 0.51
},
{
color: "rgb(191, 110, 78)",
stop: 1
}
] ]
}, },
{ {
type: "ellipse", method: "radial-gradient",
x0: 0, args: [
y0: 0, "75% 19%",
x1: 50, " ellipse closest-side",
y1: 70, " rgb(171, 171, 171)",
cx: 37.5, " rgb(0, 0, 255) 33%",
cy: 13.3, " rgb(153, 31, 31) 100%"
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", method: "radial-gradient",
x0: 0, args: [
y0: 0, "75% 19%",
x1: 50, " ellipse closest-corner",
y1: 70, " rgb(171, 171, 171)",
cx: 37.5, " rgb(0, 0, 255) 33%",
cy: 13.3, " rgb(153, 31, 31) 100%"
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", method: "radial-gradient",
x0: 0, args: [
y0: 0, "75% 19%",
x1: 50, " ellipse farthest-side",
y1: 70, " rgb(171, 171, 171)",
cx: 37.5, " rgb(0, 0, 255) 33%",
cy: 13.3, " rgb(153, 31, 31) 100%"
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", method: "radial-gradient",
x0: 0, args: [
y0: 0, "75% 19%",
x1: 50, " ellipse farthest-corner",
y1: 70, " rgb(171, 171, 171)",
cx: 37.5, " rgb(0, 0, 255) 33%",
cy: 13.3, " rgb(153, 31, 31) 100%"
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", method: "radial-gradient",
x0: 0, args: [
y0: 0, "75% 19%",
x1: 50, " ellipse contain",
y1: 70, " rgb(171, 171, 171)",
cx: 37.5, " rgb(0, 0, 255) 33%",
cy: 13.3, " rgb(153, 31, 31) 100%"
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", method: "radial-gradient",
x0: 0, args: [
y0: 0, "75% 19%",
x1: 50, " ellipse cover",
y1: 70, " rgb(171, 171, 171)",
cx: 37.5, " rgb(0, 0, 255) 33%",
cy: 13.3, " rgb(153, 31, 31) 100%"
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) {
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
});
//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"]; test('parseBackgrounds Gradient', numDivs['parseBackgrounds Gradient'] * 2, function() {
numDivs['Generate.Gradient'] = $('#backgroundGradients div').length; $('#backgroundGradients div').each(function(i, node) {
var container = new NodeContainer(node, null);
test('Generate.Gradient', propsToTest['Generate.Gradient'].length * numDivs['Generate.Gradient'], function() { var value = container.css("backgroundImage");
$('#backgroundGradients div').each(function(i, el) { if (/^(-webkit|-o|-moz|-ms|linear)-/.test(value)) {
$.each(propsToTest['Generate.Gradient'], function(s, prop) { var parsedBackground = parseBackgrounds(value);
var src, img, canvas, ctx, id, data, len, red, green, blue, overallColor = 0; QUnit.deepEqual(parsedBackground[0].args, expected['parseBackgrounds Gradient'][i].args, 'Parsed gradient with CSS: ' + value);
QUnit.deepEqual(parsedBackground[0].method, expected['parseBackgrounds Gradient'][i].method, 'Parsed gradient with CSS: ' + value);
src = _html2canvas.Util.getCSS(el, prop); } else {
QUnit.ok(true, 'No CSS Background Gradient support');
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');
}
});
}); });
}); });
}); });