2015-02-03 22:34:05 +03:00
|
|
|
var NodeContainer = html2canvas.NodeContainer;
|
|
|
|
|
2014-10-15 21:28:26 +04:00
|
|
|
describe('Borders', function() {
|
|
|
|
$('#borders div').each(function(i, node) {
|
|
|
|
it($(this).attr('style'), function() {
|
|
|
|
["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"].forEach(function(prop) {
|
|
|
|
var result = $(node).css(prop);
|
|
|
|
// older IE's don't necessarily return px even with jQuery
|
|
|
|
if (result === "thin") {
|
|
|
|
result = "1px";
|
|
|
|
} else if (result === "medium") {
|
|
|
|
result = "3px";
|
|
|
|
} else if (result === "thick") {
|
|
|
|
result = "5px";
|
|
|
|
}
|
|
|
|
var container = new NodeContainer(node, null);
|
|
|
|
expect(container.css(prop)).to.be(result);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('Padding', function() {
|
|
|
|
$('#padding div').each(function(i, node) {
|
|
|
|
it($(this).attr('style'), function() {
|
|
|
|
["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"].forEach(function(prop) {
|
|
|
|
var container = new NodeContainer(node, null);
|
|
|
|
var result = container.css(prop);
|
|
|
|
expect(result).to.contain("px");
|
|
|
|
expect(result, $(node).css(prop));
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('Background-position', function() {
|
|
|
|
$('#backgroundPosition div').each(function(i, node) {
|
|
|
|
it($(this).attr('style'), function() {
|
|
|
|
var prop = "backgroundPosition";
|
|
|
|
var img = new Image();
|
|
|
|
img.width = 50;
|
|
|
|
img.height = 50;
|
|
|
|
|
|
|
|
var container = new NodeContainer(node, null);
|
|
|
|
var item = container.css(prop),
|
2015-02-03 22:34:05 +03:00
|
|
|
backgroundPosition = container.parseBackgroundPosition(html2canvas.utils.getBounds(node), img),
|
2014-10-15 21:28:26 +04:00
|
|
|
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(node);
|
|
|
|
|
|
|
|
expect(backgroundPosition.left).to.equal(Math.floor(parseFloat(testEl.css('left'))));
|
|
|
|
expect(backgroundPosition.top).to.equal(Math.floor(parseFloat(testEl.css('top'))));
|
|
|
|
|
|
|
|
testEl.remove();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('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) {
|
|
|
|
expect(shadows.length).to.equal(0);
|
|
|
|
} else {
|
|
|
|
expect(shadows.length).to.equal(i >= 6 ? 2 : 1);
|
|
|
|
expect(shadows[0].offsetX).to.equal(i);
|
|
|
|
expect(shadows[0].offsetY).to.equal(i);
|
|
|
|
if (i < 2) {
|
2014-12-13 20:23:00 +03:00
|
|
|
expect(shadows[0].color.toString()).to.equal('rgba(0,0,0,0)');
|
2014-10-15 21:28:26 +04:00
|
|
|
} else if (i % 2 === 0) {
|
2014-12-13 20:23:00 +03:00
|
|
|
expect(shadows[0].color.toString()).to.equal('rgb(2,2,2)');
|
2014-10-15 21:28:26 +04:00
|
|
|
} else {
|
|
|
|
var opacity = '0.2';
|
2014-12-13 20:23:00 +03:00
|
|
|
expect(shadows[0].color.toString()).to.match(/rgba\(2,2,2,(0.2|0\.199219)\)/);
|
2014-10-15 21:28:26 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
// only testing blur once
|
|
|
|
if (i === 1) {
|
|
|
|
expect(shadows[0].blur).to.equal('1');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('Background-image', function() {
|
|
|
|
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("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'],
|
|
|
|
image: null
|
|
|
|
},
|
|
|
|
'quoted url'
|
|
|
|
);
|
|
|
|
|
|
|
|
test_parse_background_image(
|
|
|
|
'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'],
|
|
|
|
image: null
|
|
|
|
},
|
|
|
|
'data url'
|
|
|
|
);
|
|
|
|
|
|
|
|
test_parse_background_image(
|
|
|
|
'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',
|
|
|
|
value: 'linear-gradient(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',
|
|
|
|
value: '-webkit-linear-gradient(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'], 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) {
|
|
|
|
it(name, function() {
|
2015-02-03 22:34:05 +03:00
|
|
|
expect(html2canvas.utils.parseBackgrounds(value)).to.eql(Array.isArray(expected) ? expected : [expected]);
|
2014-10-15 21:28:26 +04:00
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|