mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Beging implementing reftests
This commit is contained in:
MoyuScript
@ -1 +1 @@
|
||||
document.querySelector("#block").className += "class";
|
||||
document.querySelector('#block').className += 'class';
|
||||
|
||||
@ -3,15 +3,20 @@ var NodeContainer = html2canvas.NodeContainer;
|
||||
describe('Borders', function() {
|
||||
$('#borders div').each(function(i, node) {
|
||||
it($(this).attr('style'), function() {
|
||||
["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"].forEach(function(prop) {
|
||||
[
|
||||
'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";
|
||||
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);
|
||||
@ -23,10 +28,10 @@ describe('Borders', function() {
|
||||
describe('Padding', function() {
|
||||
$('#padding div').each(function(i, node) {
|
||||
it($(this).attr('style'), function() {
|
||||
["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"].forEach(function(prop) {
|
||||
['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).to.contain('px');
|
||||
expect(result, $(node).css(prop));
|
||||
});
|
||||
});
|
||||
@ -36,20 +41,25 @@ describe('Padding', function() {
|
||||
describe('Background-position', function() {
|
||||
$('#backgroundPosition div').each(function(i, node) {
|
||||
it($(this).attr('style'), function() {
|
||||
var prop = "backgroundPosition";
|
||||
var img = new Image();
|
||||
var prop = 'backgroundPosition';
|
||||
var img = new Image();
|
||||
img.width = 50;
|
||||
img.height = 50;
|
||||
|
||||
var container = new NodeContainer(node, null);
|
||||
var item = container.css(prop),
|
||||
backgroundPosition = container.parseBackgroundPosition(html2canvas.utils.getBounds(node), img),
|
||||
split = (window.getComputedStyle) ? $(node).css(prop).split(" ") : [$(node).css(prop+"X"), $(node).css(prop+"Y")];
|
||||
backgroundPosition = container.parseBackgroundPosition(
|
||||
html2canvas.utils.getBounds(node),
|
||||
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]
|
||||
position: 'absolute',
|
||||
left: split[0],
|
||||
top: split[1]
|
||||
});
|
||||
|
||||
testEl.appendTo(node);
|
||||
@ -158,8 +168,11 @@ describe('Background-image', function() {
|
||||
{
|
||||
prefix: '',
|
||||
method: 'url',
|
||||
value: 'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)',
|
||||
args: ['data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'],
|
||||
value:
|
||||
'url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)',
|
||||
args: [
|
||||
'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
|
||||
],
|
||||
image: null
|
||||
},
|
||||
'data url'
|
||||
@ -171,7 +184,7 @@ describe('Background-image', function() {
|
||||
prefix: '',
|
||||
method: 'linear-gradient',
|
||||
value: 'linear-gradient(red,black)',
|
||||
args: ['red','black'],
|
||||
args: ['red', 'black'],
|
||||
image: null
|
||||
},
|
||||
'linear-gradient'
|
||||
@ -195,26 +208,34 @@ describe('Background-image', function() {
|
||||
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'], 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 }
|
||||
'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() {
|
||||
expect(html2canvas.utils.parseBackgrounds(value)).to.eql(Array.isArray(expected) ? expected : [expected]);
|
||||
expect(html2canvas.utils.parseBackgrounds(value)).to.eql(
|
||||
Array.isArray(expected) ? expected : [expected]
|
||||
);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@ -1,158 +1,145 @@
|
||||
describe("Gradients", function() {
|
||||
describe('Gradients', function() {
|
||||
var expected = [
|
||||
{
|
||||
method: "linear-gradient",
|
||||
args: [
|
||||
"left",
|
||||
" rgb(255, 0, 0)",
|
||||
" rgb(255, 255, 0)",
|
||||
" rgb(0, 255, 0)"
|
||||
]
|
||||
method: 'linear-gradient',
|
||||
args: ['left', ' rgb(255, 0, 0)', ' rgb(255, 255, 0)', ' rgb(0, 255, 0)']
|
||||
},
|
||||
{
|
||||
method: "linear-gradient",
|
||||
method: 'linear-gradient',
|
||||
args: ['left', ' red', ' rgb(255, 255, 0)', ' rgb(0, 255, 0)']
|
||||
},
|
||||
{
|
||||
method: 'linear-gradient',
|
||||
args: [
|
||||
"left",
|
||||
" red",
|
||||
" rgb(255, 255, 0)",
|
||||
" rgb(0, 255, 0)"
|
||||
'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%'
|
||||
]
|
||||
},
|
||||
{
|
||||
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%"
|
||||
'left',
|
||||
' rgb(206, 219, 233) 0%',
|
||||
' rgb(170, 197, 222) 17px',
|
||||
' rgb(97, 153, 199) 50%',
|
||||
' rgb(58, 132, 195) 51px',
|
||||
' rgb(65, 154, 214) 59%',
|
||||
' rgb(75, 184, 240) 71px',
|
||||
' rgb(58, 139, 194) 84%',
|
||||
' rgb(38, 85, 139) 100px'
|
||||
]
|
||||
},
|
||||
{
|
||||
method: 'linear-gradient',
|
||||
method: 'gradient',
|
||||
args: [
|
||||
"left",
|
||||
" rgb(206, 219, 233) 0%",
|
||||
" rgb(170, 197, 222) 17px",
|
||||
" rgb(97, 153, 199) 50%",
|
||||
" rgb(58, 132, 195) 51px",
|
||||
" rgb(65, 154, 214) 59%",
|
||||
" rgb(75, 184, 240) 71px",
|
||||
" rgb(58, 139, 194) 84%",
|
||||
" rgb(38, 85, 139) 100px"
|
||||
'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))'
|
||||
]
|
||||
},
|
||||
{
|
||||
method: "gradient",
|
||||
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))"
|
||||
]
|
||||
},
|
||||
{
|
||||
method: "gradient",
|
||||
args: [
|
||||
"linear",
|
||||
" 50% 0%",
|
||||
" 50% 100%",
|
||||
" from(rgb(255, 0, 0))",
|
||||
" color-stop(0.314159, green)",
|
||||
" color-stop(0.51, rgb(0, 0, 255))",
|
||||
'linear',
|
||||
' 50% 0%',
|
||||
' 50% 100%',
|
||||
' from(rgb(255, 0, 0))',
|
||||
' color-stop(0.314159, green)',
|
||||
' color-stop(0.51, rgb(0, 0, 255))',
|
||||
// temporary workaround for Blink/WebKit bug: crbug.com/453414
|
||||
//" to(rgba(0, 0, 0, 0.5))"
|
||||
" to(rgba(0, 0, 0, 0))"
|
||||
' to(rgba(0, 0, 0, 0))'
|
||||
]
|
||||
},
|
||||
{
|
||||
method: 'linear-gradient',
|
||||
args: ['0deg', ' rgb(221, 221, 221)', ' rgb(221, 221, 221) 50%', ' transparent 50%']
|
||||
},
|
||||
{
|
||||
method: 'radial-gradient',
|
||||
args: [
|
||||
"0deg",
|
||||
" rgb(221, 221, 221)",
|
||||
" rgb(221, 221, 221) 50%",
|
||||
" transparent 50%"
|
||||
'75% 19%',
|
||||
' ellipse closest-side',
|
||||
' rgb(171, 171, 171)',
|
||||
' rgb(0, 0, 255) 33%',
|
||||
' rgb(153, 31, 31) 100%'
|
||||
]
|
||||
},
|
||||
{
|
||||
method: "radial-gradient",
|
||||
method: 'radial-gradient',
|
||||
args: [
|
||||
"75% 19%",
|
||||
" ellipse closest-side",
|
||||
" rgb(171, 171, 171)",
|
||||
" rgb(0, 0, 255) 33%",
|
||||
" rgb(153, 31, 31) 100%"
|
||||
'75% 19%',
|
||||
' ellipse closest-corner',
|
||||
' rgb(171, 171, 171)',
|
||||
' rgb(0, 0, 255) 33%',
|
||||
' rgb(153, 31, 31) 100%'
|
||||
]
|
||||
},
|
||||
{
|
||||
method: "radial-gradient",
|
||||
method: 'radial-gradient',
|
||||
args: [
|
||||
"75% 19%",
|
||||
" ellipse closest-corner",
|
||||
" rgb(171, 171, 171)",
|
||||
" rgb(0, 0, 255) 33%",
|
||||
" rgb(153, 31, 31) 100%"
|
||||
'75% 19%',
|
||||
' ellipse farthest-side',
|
||||
' rgb(171, 171, 171)',
|
||||
' rgb(0, 0, 255) 33%',
|
||||
' rgb(153, 31, 31) 100%'
|
||||
]
|
||||
},
|
||||
{
|
||||
method: "radial-gradient",
|
||||
method: 'radial-gradient',
|
||||
args: [
|
||||
"75% 19%",
|
||||
" ellipse farthest-side",
|
||||
" rgb(171, 171, 171)",
|
||||
" rgb(0, 0, 255) 33%",
|
||||
" rgb(153, 31, 31) 100%"
|
||||
'75% 19%',
|
||||
' ellipse farthest-corner',
|
||||
' rgb(171, 171, 171)',
|
||||
' rgb(0, 0, 255) 33%',
|
||||
' rgb(153, 31, 31) 100%'
|
||||
]
|
||||
},
|
||||
{
|
||||
method: "radial-gradient",
|
||||
method: 'radial-gradient',
|
||||
args: [
|
||||
"75% 19%",
|
||||
" ellipse farthest-corner",
|
||||
" rgb(171, 171, 171)",
|
||||
" rgb(0, 0, 255) 33%",
|
||||
" rgb(153, 31, 31) 100%"
|
||||
'75% 19%',
|
||||
' ellipse contain',
|
||||
' rgb(171, 171, 171)',
|
||||
' rgb(0, 0, 255) 33%',
|
||||
' rgb(153, 31, 31) 100%'
|
||||
]
|
||||
},
|
||||
{
|
||||
method: "radial-gradient",
|
||||
method: 'radial-gradient',
|
||||
args: [
|
||||
"75% 19%",
|
||||
" ellipse contain",
|
||||
" rgb(171, 171, 171)",
|
||||
" rgb(0, 0, 255) 33%",
|
||||
" rgb(153, 31, 31) 100%"
|
||||
]
|
||||
},
|
||||
{
|
||||
method: "radial-gradient",
|
||||
args: [
|
||||
"75% 19%",
|
||||
" ellipse cover",
|
||||
" rgb(171, 171, 171)",
|
||||
" rgb(0, 0, 255) 33%",
|
||||
" rgb(153, 31, 31) 100%"
|
||||
'75% 19%',
|
||||
' ellipse cover',
|
||||
' rgb(171, 171, 171)',
|
||||
' rgb(0, 0, 255) 33%',
|
||||
' rgb(153, 31, 31) 100%'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
[].slice.call(document.querySelectorAll('#backgroundGradients div'), 0).forEach(function(node, i) {
|
||||
var container = new html2canvas.NodeContainer(node, null);
|
||||
var value = container.css("backgroundImage");
|
||||
it(value, function() {
|
||||
var parsedBackground = html2canvas.utils.parseBackgrounds(value);
|
||||
if (parsedBackground[0].args[0] === "0% 50%") {
|
||||
parsedBackground[0].args[0] = 'left';
|
||||
}
|
||||
expect(parsedBackground[0].args).to.eql(expected[i].args);
|
||||
expect(parsedBackground[0].method).to.eql(expected[i].method);
|
||||
[].slice
|
||||
.call(document.querySelectorAll('#backgroundGradients div'), 0)
|
||||
.forEach(function(node, i) {
|
||||
var container = new html2canvas.NodeContainer(node, null);
|
||||
var value = container.css('backgroundImage');
|
||||
it(value, function() {
|
||||
var parsedBackground = html2canvas.utils.parseBackgrounds(value);
|
||||
if (parsedBackground[0].args[0] === '0% 50%') {
|
||||
parsedBackground[0].args[0] = 'left';
|
||||
}
|
||||
expect(parsedBackground[0].args).to.eql(expected[i].args);
|
||||
expect(parsedBackground[0].method).to.eql(expected[i].method);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,73 +1,99 @@
|
||||
var wd = require('wd');
|
||||
var http = require("http");
|
||||
var https = require("https");
|
||||
var url = require("url");
|
||||
var path = require("path");
|
||||
var http = require('http');
|
||||
var https = require('https');
|
||||
var url = require('url');
|
||||
var path = require('path');
|
||||
var Promise = require('bluebird');
|
||||
var _ = require('lodash');
|
||||
var humanizeDuration = require("humanize-duration");
|
||||
var humanizeDuration = require('humanize-duration');
|
||||
var utils = require('../utils');
|
||||
var colors = utils.colors;
|
||||
var port = 8080;
|
||||
|
||||
function runTestWithRetries(browser, test, retries) {
|
||||
retries = retries || 0;
|
||||
return runTest(browser, test)
|
||||
.timeout(30000)
|
||||
.catch(Promise.TimeoutError, function() {
|
||||
if (retries < 3) {
|
||||
console.log(colors.violet, "Retry", (retries + 1), test);
|
||||
return runTestWithRetries(browser, test, retries + 1);
|
||||
} else {
|
||||
throw new Error("Couldn't run test after 3 retries");
|
||||
}
|
||||
});
|
||||
return runTest(browser, test).timeout(30000).catch(Promise.TimeoutError, function() {
|
||||
if (retries < 3) {
|
||||
console.log(colors.violet, 'Retry', retries + 1, test);
|
||||
return runTestWithRetries(browser, test, retries + 1);
|
||||
} else {
|
||||
throw new Error("Couldn't run test after 3 retries");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getResults(browser) {
|
||||
return function() {
|
||||
return Promise.props({
|
||||
dataUrl: browser.waitForElementByCss("body[data-complete='true']", 90000).then(function() {
|
||||
return browser.elementsByCssSelector('.test.fail');
|
||||
}).then(function(nodes) {
|
||||
return Array.isArray(nodes) ? Promise.map(nodes, function(node) {
|
||||
return browser.text(node).then(function(error) {
|
||||
return Promise.reject(error);
|
||||
});
|
||||
}) : Promise.resolve([]);
|
||||
})
|
||||
dataUrl: browser
|
||||
.waitForElementByCss("body[data-complete='true']", 90000)
|
||||
.then(function() {
|
||||
return browser.elementsByCssSelector('.test.fail');
|
||||
})
|
||||
.then(function(nodes) {
|
||||
return Array.isArray(nodes)
|
||||
? Promise.map(nodes, function(node) {
|
||||
return browser.text(node).then(function(error) {
|
||||
return Promise.reject(error);
|
||||
});
|
||||
})
|
||||
: Promise.resolve([]);
|
||||
})
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function runTest(browser, test) {
|
||||
return Promise.resolve(browser
|
||||
.then(utils.loadTestPage(browser, test, port))
|
||||
.then(getResults(browser))
|
||||
return Promise.resolve(
|
||||
browser.then(utils.loadTestPage(browser, test, port)).then(getResults(browser))
|
||||
).cancellable();
|
||||
}
|
||||
|
||||
exports.tests = function(browsers, singleTest) {
|
||||
var path = "tests/mocha";
|
||||
return (singleTest ? Promise.resolve([singleTest]) : utils.getTests(path)).then(function(tests) {
|
||||
return Promise.map(browsers, function(settings) {
|
||||
var name = [settings.browserName, settings.version, settings.platform].join("-");
|
||||
var count = 0;
|
||||
var browser = utils.initBrowser(settings);
|
||||
return Promise.using(browser, function() {
|
||||
return Promise.map(tests, function(test, index, total) {
|
||||
console.log(colors.green, "STARTING", "(" + (++count) + "/" + total + ")", name, test, colors.clear);
|
||||
var start = Date.now();
|
||||
return runTestWithRetries(browser, test).then(function() {
|
||||
console.log(colors.green, "COMPLETE", humanizeDuration(Date.now() - start), "(" + count + "/" + total + ")", name, colors.clear);
|
||||
});
|
||||
}, {concurrency: 1})
|
||||
.settle()
|
||||
.catch(function(error) {
|
||||
console.error(colors.red, "ERROR", name, error);
|
||||
throw error;
|
||||
});
|
||||
});
|
||||
}, {concurrency: 3});
|
||||
var path = 'tests/mocha';
|
||||
return (singleTest ? Promise.resolve([singleTest]) : utils.getTests(path)).then(function(
|
||||
tests
|
||||
) {
|
||||
return Promise.map(
|
||||
browsers,
|
||||
function(settings) {
|
||||
var name = [settings.browserName, settings.version, settings.platform].join('-');
|
||||
var count = 0;
|
||||
var browser = utils.initBrowser(settings);
|
||||
return Promise.using(browser, function() {
|
||||
return Promise.map(
|
||||
tests,
|
||||
function(test, index, total) {
|
||||
console.log(
|
||||
colors.green,
|
||||
'STARTING',
|
||||
'(' + ++count + '/' + total + ')',
|
||||
name,
|
||||
test,
|
||||
colors.clear
|
||||
);
|
||||
var start = Date.now();
|
||||
return runTestWithRetries(browser, test).then(function() {
|
||||
console.log(
|
||||
colors.green,
|
||||
'COMPLETE',
|
||||
humanizeDuration(Date.now() - start),
|
||||
'(' + count + '/' + total + ')',
|
||||
name,
|
||||
colors.clear
|
||||
);
|
||||
});
|
||||
},
|
||||
{concurrency: 1}
|
||||
)
|
||||
.settle()
|
||||
.catch(function(error) {
|
||||
console.error(colors.red, 'ERROR', name, error);
|
||||
throw error;
|
||||
});
|
||||
});
|
||||
},
|
||||
{concurrency: 3}
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user