mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Fix unit tests
This commit is contained in:
Niklas von Hertzen
parent
d9d516d27e
commit
60587c72bf
18
tests/qunit/.jshintrc
Normal file
18
tests/qunit/.jshintrc
Normal 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"]
|
||||
}
|
||||
@ -11,15 +11,23 @@
|
||||
<!-- src files -->
|
||||
<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/Core.js"></script>
|
||||
<script type="text/javascript" src="../../src/Generate.js"></script>
|
||||
<script type="text/javascript" src="../../src/Parse.js"></script>
|
||||
<script type="text/javascript" src="../../src/Preload.js"></script>
|
||||
<script type="text/javascript" src="../../src/Queue.js"></script>
|
||||
<script type="text/javascript" src="../../src/Renderer.js"></script>
|
||||
<script type="text/javascript" src="../../src/Util.js"></script>
|
||||
<script type="text/javascript" src="../../src/renderers/Canvas.js"></script>
|
||||
<script type="text/javascript" src="../../src/log.js"></script>
|
||||
<script type="text/javascript" src="../../src/nodecontainer.js"></script>
|
||||
<script type="text/javascript" src="../../src/stackingcontext.js"></script>
|
||||
<script type="text/javascript" src="../../src/textcontainer.js"></script>
|
||||
<script type="text/javascript" src="../../src/support.js"></script>
|
||||
<script type="text/javascript" src="../../src/imagecontainer.js"></script>
|
||||
<script type="text/javascript" src="../../src/gradientcontainer.js"></script>
|
||||
<script type="text/javascript" src="../../src/lineargradientcontainer.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/generate.js"></script>
|
||||
|
||||
@ -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");
|
||||
$(function() {
|
||||
|
||||
var propsToTest = {},
|
||||
numDivs = {};
|
||||
|
||||
|
||||
|
||||
|
||||
propsToTest['border-width'] = ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
|
||||
numDivs['border-width'] = $('#borders div').length;
|
||||
/*
|
||||
expecting = [
|
||||
// #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) {
|
||||
numDivs['border-width'] = $('#borders div').length;
|
||||
test('border-width', propsToTest['border-width'].length * numDivs['border-width'], function() {
|
||||
$('#borders div').each(function(i, node) {
|
||||
$.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
|
||||
if (expect === "thin") {
|
||||
expect = "1px";
|
||||
@ -81,187 +17,211 @@ $(function() {
|
||||
} else if (expect === "thick") {
|
||||
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"];
|
||||
numDivs['background-position'] = $('#backgroundPosition div').length;
|
||||
|
||||
test('background-position', propsToTest['background-position'].length * numDivs['background-position'] * 2, function() {
|
||||
|
||||
$('#backgroundPosition div').each(function(i, el) {
|
||||
|
||||
test('background-position', propsToTest['background-position'].length * numDivs['background-position'] * 2, function() {
|
||||
$('#backgroundPosition div').each(function(i, node) {
|
||||
$.each(propsToTest['background-position'], function(s, prop) {
|
||||
var img = new Image();
|
||||
img.width = 50;
|
||||
img.height = 50;
|
||||
|
||||
var item = _html2canvas.Util.getCSS(el, prop),
|
||||
pos = _html2canvas.Util.BackgroundPosition(el, _html2canvas.Util.Bounds(el), img),
|
||||
split;
|
||||
|
||||
if ( window.getComputedStyle ) {
|
||||
split = $(el).css(prop).split(" ");
|
||||
} else {
|
||||
split = [$(el).css(prop+"X"),$(el).css(prop+"Y")];
|
||||
}
|
||||
|
||||
|
||||
var container = new NodeContainer(node, null);
|
||||
var item = container.css(prop),
|
||||
backgroundPosition = container.parseBackgroundPosition(NodeParser.prototype.parseBounds(container), img),
|
||||
split = (window.getComputedStyle) ? $(node).css(prop).split(" ") : [$(node).css(prop+"X"),$(node).css(prop+"Y")];
|
||||
|
||||
var testEl = $('<div />').css({
|
||||
'position': 'absolute',
|
||||
'left': split[0],
|
||||
'top': split[1]
|
||||
});
|
||||
|
||||
testEl.appendTo(el);
|
||||
|
||||
|
||||
|
||||
|
||||
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.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);
|
||||
testEl.remove();
|
||||
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
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) {
|
||||
var index = i+1;
|
||||
var value = _html2canvas.Util.getCSS(el, 'textShadow'),
|
||||
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');
|
||||
}
|
||||
}
|
||||
});
|
||||
// only testing blur once
|
||||
if (i === 1) {
|
||||
QUnit.equal(shadows[0].blur, '1', 'div #' + index + ' blur');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
test('background-image', function () {
|
||||
|
||||
test_parse_background_image(
|
||||
'url("te)st")',
|
||||
{ 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_parse_background_image(
|
||||
'url(te,st)',
|
||||
{ prefix: '', method: 'url', value: 'url(te,st)', args: ['te,st'] },
|
||||
'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'] },
|
||||
'url("te,st")',
|
||||
{
|
||||
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'
|
||||
);
|
||||
|
||||
test_parse_background_image(
|
||||
'url("test")',
|
||||
{ prefix: '', method: 'url', value: 'url("test")', args: ['test'] },
|
||||
'url("test")',
|
||||
{
|
||||
prefix: '',
|
||||
method: 'url',
|
||||
value: 'url("test")',
|
||||
args: ['test'],
|
||||
image: null
|
||||
},
|
||||
'quoted url'
|
||||
);
|
||||
|
||||
test_parse_background_image(
|
||||
'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)',
|
||||
{
|
||||
prefix: '', method: 'url',
|
||||
'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)',
|
||||
{
|
||||
prefix: '',
|
||||
method: 'url',
|
||||
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'
|
||||
);
|
||||
|
||||
test_parse_background_image(
|
||||
'linear-gradient(red,black)',
|
||||
{ prefix: '', method: 'linear-gradient', value: 'linear-gradient(red,black)', args: ['red','black'] },
|
||||
'linear-gradient(red,black)',
|
||||
{
|
||||
prefix: '',
|
||||
method: 'linear-gradient',
|
||||
value: 'linear-gradient(red,black)',
|
||||
args: ['red','black'],
|
||||
image: null
|
||||
},
|
||||
'linear-gradient'
|
||||
);
|
||||
|
||||
test_parse_background_image(
|
||||
'linear-gradient(top,rgb(255,0,0),rgb(0,0,0))',
|
||||
{
|
||||
prefix: '', method: 'linear-gradient',
|
||||
'linear-gradient(top,rgb(255,0,0),rgb(0,0,0))',
|
||||
{
|
||||
prefix: '',
|
||||
method: 'linear-gradient',
|
||||
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()'
|
||||
);
|
||||
|
||||
test_parse_background_image(
|
||||
'-webkit-linear-gradient(red,black)',
|
||||
{
|
||||
prefix: '-webkit-', method: 'linear-gradient',
|
||||
'-webkit-linear-gradient(red,black)',
|
||||
{
|
||||
prefix: '-webkit-',
|
||||
method: 'linear-gradient',
|
||||
value: '-webkit-linear-gradient(red,black)',
|
||||
args: ['red','black']
|
||||
},
|
||||
args: ['red','black'],
|
||||
image: null
|
||||
},
|
||||
'prefixed linear-gradient'
|
||||
);
|
||||
|
||||
test_parse_background_image(
|
||||
'linear-gradient(red,black), url(test), url("test"),\n none, ', [
|
||||
{ prefix: '', method: 'linear-gradient', value: 'linear-gradient(red,black)', args: ['red','black'] },
|
||||
{ prefix: '', method: 'url', value: 'url(test)', args: ['test'] },
|
||||
{ prefix: '', method: 'url', value: 'url("test")', args: ['test'] },
|
||||
{ prefix: '', method: 'none', value: 'none', args: [] }
|
||||
{ prefix: '', method: 'linear-gradient', value: 'linear-gradient(red,black)', args: ['red','black'], image: null },
|
||||
{ prefix: '', method: 'url', value: 'url(test)', args: ['test'], image: null },
|
||||
{ prefix: '', method: 'url', value: 'url("test")', args: ['test'], image: null },
|
||||
{ prefix: '', method: 'none', value: 'none', args: [], image: null }
|
||||
],
|
||||
'multiple backgrounds'
|
||||
);
|
||||
|
||||
});
|
||||
|
||||
function test_parse_background_image(value, expected, name) {
|
||||
deepEqual(
|
||||
_html2canvas.Util.parseBackgroundImage(value),
|
||||
Array.isArray(expected) ? expected : [expected],
|
||||
parseBackgrounds(value),
|
||||
Array.isArray(expected) ? expected : [expected],
|
||||
name
|
||||
);
|
||||
}
|
||||
|
||||
// TODO add backgroundPosition % tests
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
@ -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() {
|
||||
|
||||
var propsToTest = {},
|
||||
numDivs = {},
|
||||
expected = {};
|
||||
|
||||
propsToTest['Generate.parseGradient'] = ["backgroundImage"];
|
||||
numDivs['Generate.parseGradient'] = $('#backgroundGradients div').length;
|
||||
expected['Generate.parseGradient'] = [
|
||||
|
||||
propsToTest['parseBackgrounds Gradient'] = ["backgroundImage"];
|
||||
numDivs['parseBackgrounds Gradient'] = $('#backgroundGradients div').length;
|
||||
expected['parseBackgrounds Gradient'] = [
|
||||
{
|
||||
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
|
||||
}
|
||||
method: "linear-gradient",
|
||||
args: [
|
||||
"left",
|
||||
" rgb(255, 0, 0)",
|
||||
" rgb(255, 255, 0)",
|
||||
" rgb(0, 255, 0)"
|
||||
]
|
||||
},
|
||||
{
|
||||
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
|
||||
}
|
||||
method: 'linear-gradient',
|
||||
args: [
|
||||
"left",
|
||||
" rgb(206, 219, 233) 0%",
|
||||
" rgb(170, 197, 222) 17%",
|
||||
" rgb(97, 153, 199) 50%",
|
||||
" rgb(58, 132, 195) 51%",
|
||||
" rgb(65, 154, 214) 59%",
|
||||
" rgb(75, 184, 240) 71%",
|
||||
" rgb(58, 139, 194) 84%",
|
||||
" rgb(38, 85, 139) 100%"
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "linear",
|
||||
x0: 25,
|
||||
y0: 0,
|
||||
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
|
||||
}
|
||||
method: "gradient",
|
||||
args: [
|
||||
"linear",
|
||||
" 50% 0%",
|
||||
" 50% 100%",
|
||||
" from(rgb(240, 183, 161))",
|
||||
" color-stop(0.5, rgb(140, 51, 16))",
|
||||
" color-stop(0.51, rgb(117, 34, 1))",
|
||||
" to(rgb(191, 110, 78))"
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "ellipse",
|
||||
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
|
||||
}
|
||||
method: "radial-gradient",
|
||||
args: [
|
||||
"75% 19%",
|
||||
" ellipse closest-side",
|
||||
" rgb(171, 171, 171)",
|
||||
" rgb(0, 0, 255) 33%",
|
||||
" rgb(153, 31, 31) 100%"
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
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
|
||||
}
|
||||
method: "radial-gradient",
|
||||
args: [
|
||||
"75% 19%",
|
||||
" ellipse closest-corner",
|
||||
" rgb(171, 171, 171)",
|
||||
" rgb(0, 0, 255) 33%",
|
||||
" rgb(153, 31, 31) 100%"
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "ellipse",
|
||||
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
|
||||
}
|
||||
method: "radial-gradient",
|
||||
args: [
|
||||
"75% 19%",
|
||||
" ellipse farthest-side",
|
||||
" rgb(171, 171, 171)",
|
||||
" rgb(0, 0, 255) 33%",
|
||||
" rgb(153, 31, 31) 100%"
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
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
|
||||
}
|
||||
method: "radial-gradient",
|
||||
args: [
|
||||
"75% 19%",
|
||||
" ellipse farthest-corner",
|
||||
" rgb(171, 171, 171)",
|
||||
" rgb(0, 0, 255) 33%",
|
||||
" rgb(153, 31, 31) 100%"
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "ellipse",
|
||||
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
|
||||
}
|
||||
method: "radial-gradient",
|
||||
args: [
|
||||
"75% 19%",
|
||||
" ellipse contain",
|
||||
" rgb(171, 171, 171)",
|
||||
" rgb(0, 0, 255) 33%",
|
||||
" rgb(153, 31, 31) 100%"
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "circle",
|
||||
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
|
||||
}
|
||||
method: "radial-gradient",
|
||||
args: [
|
||||
"75% 19%",
|
||||
" ellipse cover",
|
||||
" rgb(171, 171, 171)",
|
||||
" rgb(0, 0, 255) 33%",
|
||||
" rgb(153, 31, 31) 100%"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
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"];
|
||||
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');
|
||||
}
|
||||
});
|
||||
test('parseBackgrounds Gradient', numDivs['parseBackgrounds Gradient'] * 2, function() {
|
||||
$('#backgroundGradients div').each(function(i, node) {
|
||||
var container = new NodeContainer(node, null);
|
||||
var value = container.css("backgroundImage");
|
||||
|
||||
if (/^(-webkit|-o|-moz|-ms|linear)-/.test(value)) {
|
||||
var parsedBackground = parseBackgrounds(value);
|
||||
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);
|
||||
} else {
|
||||
QUnit.ok(true, 'No CSS Background Gradient support');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user