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 canvas cropping with type: 'view'

Browse Source
This commit is contained in:
MoyuScript
2014-10-15 20:28:26 +03:00
parent 89193f390f
commit 08e532eb6b
22 changed files with 8332 additions and 2425 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
tests/mocha/.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"]
}

141
tests/mocha/cropping.html Normal file
View File

@ -0,0 +1,141 @@
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link rel="stylesheet" href="lib/mocha.css" />
<script src="../../dist/html2canvas.js"></script>
<script src="../assets/jquery-1.6.2.js"></script>
<script src="lib/expect.js"></script>
<script src="lib/mocha.js"></script>
</head>
<body>
<div id="mocha"></div>
<script>mocha.setup('bdd')</script>
<div style="background: green; width: 40px; height:40px;" id="block"></div>
<div style="visibility: hidden">
<iframe src="iframe1.htm" style="height: 350px; width: 450px; border: 0;" scrolling="no" id="frame1"></iframe>
<iframe src="iframe2.htm" style="height: 350px; width: 450px; border: 0;" scrolling="yes" id="frame2"></iframe>
</div>
<script>
describe("Cropping", function() {
it("window view with body", function(done) {
html2canvas(document.body, {type: 'view'}).then(function(canvas) {
expect(canvas.width).to.equal(window.innerWidth);
expect(canvas.height).to.equal(window.innerHeight);
done();
}).catch(function(error) {
done(error);
});
});
it("window view with documentElement", function(done) {
html2canvas(document.documentElement, {type: 'view'}).then(function(canvas) {
expect(canvas.width).to.equal(window.innerWidth);
expect(canvas.height).to.equal(window.innerHeight);
done();
}).catch(function(error) {
done(error);
});
});
it("iframe with body", function(done) {
html2canvas(document.querySelector("#frame1").contentWindow.document.body, {type: 'view'}).then(function(canvas) {
expect(canvas.width).to.equal(450);
expect(canvas.height).to.equal(350);
validCanvasPixels(canvas);
done();
}).catch(function(error) {
done(error);
});
});
it("iframe with document element", function(done) {
html2canvas(document.querySelector("#frame1").contentWindow.document.documentElement, {type: 'view'}).then(function(canvas) {
expect(canvas.width).to.equal(450);
expect(canvas.height).to.equal(350);
validCanvasPixels(canvas);
done();
}).catch(function(error) {
done(error);
});
});
it("with node", function(done) {
html2canvas(document.querySelector("#block")).then(function(canvas) {
expect(canvas.width).to.equal(40);
expect(canvas.height).to.equal(40);
validCanvasPixels(canvas);
done();
}).catch(function(error) {
done(error);
});
});
it("with node and size", function(done) {
html2canvas(document.querySelector("#block"), {width: 20, height: 20}).then(function(canvas) {
expect(canvas.width).to.equal(20);
expect(canvas.height).to.equal(20);
validCanvasPixels(canvas);
done();
}).catch(function(error) {
done(error);
});
});
document.querySelector("#frame2").addEventListener("load", function() {
document.querySelector("#frame2").contentWindow.scrollTo(0, 350);
describe("with scrolled content", function() {
it("iframe with body", function(done) {
html2canvas(document.querySelector("#frame2").contentWindow.document.body, {type: 'view'}).then(function(canvas) {
// phantomjs issue https://github.com/ariya/phantomjs/issues/10581
if (canvas.height !== 1200) {
expect(canvas.width).to.equal(450);
expect(canvas.height).to.equal(350);
validCanvasPixels(canvas);
}
done();
}).catch(function(error) {
done(error);
});
});
it("iframe with document element", function(done) {
html2canvas(document.querySelector("#frame2").contentWindow.document.documentElement, {type: 'view'}).then(function(canvas) {
// phantomjs issue https://github.com/ariya/phantomjs/issues/10581
if (canvas.height !== 1200) {
expect(canvas.width).to.equal(450);
expect(canvas.height).to.equal(350);
validCanvasPixels(canvas);
}
done();
}).catch(function(error) {
done(error);
});
});
});
}, false);
});
function validCanvasPixels(canvas) {
var ctx = canvas.getContext("2d");
var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
for (var i = 0, len = data.length; i < len; i+=4) {
if (data[i] !== 0 || data[i+1] !== 128 || data[i+2] !== 0 || data[i+3] !== 255) {
expect().fail("Invalid canvas data");
}
}
}
mocha.checkLeaks();
mocha.globals(['jQuery']);
if (window.mochaPhantomJS) {
mochaPhantomJS.run();
}
else {
mocha.run();
}
</script>
</body>
</html>

216
tests/mocha/css.js Normal file
View File

@ -0,0 +1,216 @@
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),
backgroundPosition = container.parseBackgroundPosition(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]
});
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) {
expect(shadows[0].color).to.match(/rgba?\(0, 0, 0(, 0)?\)/);
} else if (i % 2 === 0) {
expect(shadows[0].color).to.equal('rgb(2, 2, 2)');
} else {
var opacity = '0.2';
expect(shadows[0].color).to.match(/rgba\(2, 2, 2, (0.2|0\.199219)\)/);
}
// 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() {
expect(parseBackgrounds(value)).to.eql(Array.isArray(expected) ? expected : [expected]);
});
}
});

109
tests/mocha/gradients.js Normal file
View File

@ -0,0 +1,109 @@
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(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: "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: "radial-gradient",
args: [
"75% 19%",
" ellipse closest-side",
" rgb(171, 171, 171)",
" rgb(0, 0, 255) 33%",
" rgb(153, 31, 31) 100%"
]
},
{
method: "radial-gradient",
args: [
"75% 19%",
" ellipse closest-corner",
" rgb(171, 171, 171)",
" rgb(0, 0, 255) 33%",
" rgb(153, 31, 31) 100%"
]
},
{
method: "radial-gradient",
args: [
"75% 19%",
" ellipse farthest-side",
" rgb(171, 171, 171)",
" rgb(0, 0, 255) 33%",
" rgb(153, 31, 31) 100%"
]
},
{
method: "radial-gradient",
args: [
"75% 19%",
" ellipse farthest-corner",
" rgb(171, 171, 171)",
" rgb(0, 0, 255) 33%",
" rgb(153, 31, 31) 100%"
]
},
{
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%"
]
}
];
$('#backgroundGradients div').each(function(i, node) {
var container = new NodeContainer(node, null);
var value = container.css("backgroundImage");
it(value, function() {
var parsedBackground = parseBackgrounds(value);
expect(parsedBackground[0].args).to.eql(expected[i].args);
expect(parsedBackground[0].method).to.eql(expected[i].method);
});
});
});

23
tests/mocha/iframe1.htm Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
html, body {
background: green;
margin: 0;
padding: 0;
}
.invalid {
margin-top: 350px;
height: 500px;
background: red;
display: block;
}
</style>
</head>
<body>
&nbsp;<div class="invalid">&nbsp;</div>
</body>
</html>

23
tests/mocha/iframe2.htm Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
html, body {
background: red;
margin: 0;
padding: 0;
}
.valid {
margin-top: 350px;
height: 350px;
background: green;
display: block;
margin-bottom: 500px;
}
</style>
</head>
<body><div class="valid">&nbsp;</div></body>
</html>

195
tests/mocha/index.html Normal file
View File

@ -0,0 +1,195 @@
<html>
<head>
<meta charset="utf-8">
<title>Mocha Tests</title>
<link rel="stylesheet" href="lib/mocha.css" />
<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/renderer.js"></script>
<script type="text/javascript" src="../../src/promise.js"></script>
<script type="text/javascript" src="../../src/renderers/canvas.js"></script>
<script src="../assets/jquery-1.6.2.js"></script>
<script src="lib/expect.js"></script>
<script src="lib/mocha.js"></script>
</head>
<body>
<div id="mocha"></div>
<script>mocha.setup('bdd')</script>
<div style="visibility: hidden">
<div id="borders">Yep, here's some more.
<div style="border-width: 1px 0;">Div 1</div>
<div style="border-width: 1em 0;">Div 2</div>
<div style="border-width: thin medium thick;">Some more divs</div>
<div style="border-width: 5% 6px 12%;"></div> <!-- percentages aren't valid -->
<div style="border-width: 5em 5ex 5in 5cm;"></div>
<div style="border-width: 500em 500ex 500in 500cm;"></div>
<div style="border-width: 5mm 5pt 5pc 5px;"></div>
<div style="border-width: auto inherit;"></div>
<div style="border-width: 500mm 500pt 500pc 500px;"></div>
</div>
<div id="padding">
<div style="padding: 1px 0;"></div>
<div style="padding: 1em 0;"></div>
<div style="padding: thin medium thick;"></div>
<div style="padding: 5em 5ex 5in 5cm;"></div>
<div style="padding: 500em 500ex 500in 500cm;"></div>
<div style="padding: 5mm 5pt 5pc 5px;"></div>
<div style="padding: 500mm 500pt 500pc 500px;"></div>
<div style="padding: 1px 5%;"></div>
<div style="padding: 15% 0 3%;"></div>
</div>
<div id="textShadows">
<div style=""></div>
<div style="text-shadow: 1px 1px 1px"></div>
<div style="text-shadow: 2px 2px rgb(2, 2, 2)"></div>
<div style="text-shadow: 3px 3px rgba(2, 2, 2, .2)"></div>
<div style="text-shadow: rgb(2, 2, 2) 4px 4px"></div>
<div style="text-shadow: rgba(2, 2, 2, .2) 5px 5px"></div>
<div style="text-shadow: rgb(2, 2, 2) 6px 6px, #222222 2px 2px"></div>
<div style="text-shadow: 7px 7px rgba(2, 2, 2, .2), #222222 2px 2px"></div>
</div>
<div id="backgroundPosition">
<div style="background-position: 1px 0;"></div>
<div style="background-position: 1em 0;"></div>
<div style="background-position: thin medium;"></div>
<div style="background-position: 5em 5ex;"></div>
<div style="background-position: 5in 5cm;"></div>
<div style="background-position: 500in 500cm;"></div>
<div style="background-position: 500em 500ex;"></div>
<div style="background-position: 5pc 5px;"></div>
<div style="background-position: 500pc 500px;"></div>
<div style="background-position: 5mm 5pt;"></div>
<div style="background-position: 500mm 500pt;"></div>
</div>
<div id="backgroundPositionPercentage">
<div style="background-position: 5% 6px;"></div>
<div style="background-position: center center;"></div>
<div style="background-position: left bottom;"></div>
</div>
<style>
.linearGradientSimple {
/* FF 3.6+ */
background: -moz-linear-gradient(left, #ff0000, #ffff00, #00ff00);
/* Chrome,Safari4+ */
background: -webkit-gradient(linear, left center, right center, color-stop(#ff0000), color-stop(#ffff00), color-stop(#00ff00));
/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(left, #ff0000, #ffff00, #00ff00);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #ff0000, #ffff00, #00ff00);
/* IE 10+ */
background: -ms-linear-gradient(left, #ff0000, #ffff00, #00ff00);
/* W3C */
background: linear-gradient(left, #ff0000, #ffff00, #00ff00);
}
.linearGradientWithStops {
/* FF 3.6+ */
background: -moz-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
/* Chrome, Safari 4+ */
background: -webkit-gradient(linear, left center, right center, color-stop(0%, #cedbe9), color-stop(17%, #aac5de), color-stop(50%, #6199c7), color-stop(51%, #3a84c3), color-stop(59%, #419ad6), color-stop(71%, #4bb8f0), color-stop(84%, #3a8bc2), color-stop(100%, #26558b));
/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
/* Opera 11.10+ */
background: -o-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
/* IE 10+ */
background: -ms-linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
/* W3C */
background: linear-gradient(left, #cedbe9 0%, #aac5de 17%, #6199c7 50%, #3a84c3 51%, #419ad6 59%, #4bb8f0 71%, #3a8bc2 84%, #26558b 100%);
}
.linearGradient3 {
/* FF 3.6+ */
background: -moz-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
/* Chrome, Safari 4+ */
background: -webkit-gradient(linear, center top, center bottom, color-stop(0%, #f0b7a1), color-stop(50%, #8c3310), color-stop(51%, #752201), color-stop(100%, #bf6e4e));
/* Opera 11.10+ */
background: -o-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
/* IE 10+ */
background: -ms-linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
/* W3C */
background: linear-gradient(top, #f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%);
}
.radialGradient {
background: -moz-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(75% 19%, ellipse closest-side, #ababab, #0000ff 33%,#991f1f 100%);
}
.radialGradient2 {
background: -moz-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(75% 19%, ellipse closest-corner, #ababab, #0000ff 33%,#991f1f 100%);
}
.radialGradient3 {
background: -moz-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(75% 19%, ellipse farthest-side, #ababab, #0000ff 33%,#991f1f 100%)
}
.radialGradient4 {
background: -moz-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(75% 19%, ellipse farthest-corner, #ababab, #0000ff 33%,#991f1f 100%);
}
.radialGradient5 {
background: -moz-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(75% 19%, ellipse contain, #ababab, #0000ff 33%,#991f1f 100%);
}
.radialGradient6 {
background: -moz-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -webkit-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -o-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
background: -ms-radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
background: radial-gradient(75% 19%, ellipse cover, #ababab, #0000ff 33%,#991f1f 100%);
}
</style>
<div id="backgroundGradients">
<div class="linearGradientSimple"></div>
<div class="linearGradientWithStops"></div>
<div class="linearGradient3"></div>
<div class="radialGradient"></div>
<div class="radialGradient2"></div>
<div class="radialGradient3"></div>
<div class="radialGradient4"></div>
<div class="radialGradient5"></div>
<div class="radialGradient6"></div>
</div>
</div>
<script src="css.js"></script>
<script src="gradients.js"></script>
<script>
mocha.checkLeaks();
mocha.globals(['jQuery']);
if (window.mochaPhantomJS) {
mochaPhantomJS.run();
}
else {
mocha.run();
}
</script>
</body>
</html>

1284
tests/mocha/lib/expect.js Normal file
View File

File diff suppressed because it is too large Load Diff

270
tests/mocha/lib/mocha.css Normal file
View File

@ -0,0 +1,270 @@
@charset "utf-8";
body {
margin:0;
}
#mocha {
font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 60px 50px;
}
#mocha ul,
#mocha li {
margin: 0;
padding: 0;
}
#mocha ul {
list-style: none;
}
#mocha h1,
#mocha h2 {
margin: 0;
}
#mocha h1 {
margin-top: 15px;
font-size: 1em;
font-weight: 200;
}
#mocha h1 a {
text-decoration: none;
color: inherit;
}
#mocha h1 a:hover {
text-decoration: underline;
}
#mocha .suite .suite h1 {
margin-top: 0;
font-size: .8em;
}
#mocha .hidden {
display: none;
}
#mocha h2 {
font-size: 12px;
font-weight: normal;
cursor: pointer;
}
#mocha .suite {
margin-left: 15px;
}
#mocha .test {
margin-left: 15px;
overflow: hidden;
}
#mocha .test.pending:hover h2::after {
content: '(pending)';
font-family: arial, sans-serif;
}
#mocha .test.pass.medium .duration {
background: #c09853;
}
#mocha .test.pass.slow .duration {
background: #b94a48;
}
#mocha .test.pass::before {
content: '✓';
font-size: 12px;
display: block;
float: left;
margin-right: 5px;
color: #00d6b2;
}
#mocha .test.pass .duration {
font-size: 9px;
margin-left: 5px;
padding: 2px 5px;
color: #fff;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#mocha .test.pass.fast .duration {
display: none;
}
#mocha .test.pending {
color: #0b97c4;
}
#mocha .test.pending::before {
content: '◦';
color: #0b97c4;
}
#mocha .test.fail {
color: #c00;
}
#mocha .test.fail pre {
color: black;
}
#mocha .test.fail::before {
content: '✖';
font-size: 12px;
display: block;
float: left;
margin-right: 5px;
color: #c00;
}
#mocha .test pre.error {
color: #c00;
max-height: 300px;
overflow: auto;
}
/**
* (1): approximate for browsers not supporting calc
* (2): 42 = 2*15 + 2*10 + 2*1 (padding + margin + border)
* ^^ seriously
*/
#mocha .test pre {
display: block;
float: left;
clear: left;
font: 12px/1.5 monaco, monospace;
margin: 5px;
padding: 15px;
border: 1px solid #eee;
max-width: 85%; /*(1)*/
max-width: calc(100% - 42px); /*(2)*/
word-wrap: break-word;
border-bottom-color: #ddd;
-webkit-border-radius: 3px;
-webkit-box-shadow: 0 1px 3px #eee;
-moz-border-radius: 3px;
-moz-box-shadow: 0 1px 3px #eee;
border-radius: 3px;
}
#mocha .test h2 {
position: relative;
}
#mocha .test a.replay {
position: absolute;
top: 3px;
right: 0;
text-decoration: none;
vertical-align: middle;
display: block;
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
background: #eee;
font-size: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: opacity 200ms;
-moz-transition: opacity 200ms;
transition: opacity 200ms;
opacity: 0.3;
color: #888;
}
#mocha .test:hover a.replay {
opacity: 1;
}
#mocha-report.pass .test.fail {
display: none;
}
#mocha-report.fail .test.pass {
display: none;
}
#mocha-report.pending .test.pass,
#mocha-report.pending .test.fail {
display: none;
}
#mocha-report.pending .test.pass.pending {
display: block;
}
#mocha-error {
color: #c00;
font-size: 1.5em;
font-weight: 100;
letter-spacing: 1px;
}
#mocha-stats {
position: fixed;
top: 15px;
right: 10px;
font-size: 12px;
margin: 0;
color: #888;
z-index: 1;
}
#mocha-stats .progress {
float: right;
padding-top: 0;
}
#mocha-stats em {
color: black;
}
#mocha-stats a {
text-decoration: none;
color: inherit;
}
#mocha-stats a:hover {
border-bottom: 1px solid #eee;
}
#mocha-stats li {
display: inline-block;
margin: 0 5px;
list-style: none;
padding-top: 11px;
}
#mocha-stats canvas {
width: 40px;
height: 40px;
}
#mocha code .comment { color: #ddd; }
#mocha code .init { color: #2f6fad; }
#mocha code .string { color: #5890ad; }
#mocha code .keyword { color: #8a6343; }
#mocha code .number { color: #2f6fad; }
@media screen and (max-device-width: 480px) {
#mocha {
margin: 60px 0px;
}
#mocha #stats {
position: absolute;
}
}

6095
tests/mocha/lib/mocha.js Normal file
View File

File diff suppressed because it is too large Load Diff