mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Merge remote-tracking branch 'niklasvh/develop' into develop
Conflicts: src/Core.js src/Parse.js src/Util.js
This commit is contained in:
Andy Edinborough
@ -3,7 +3,7 @@
|
||||
*/
|
||||
(function( $ ){
|
||||
$.fn.html2canvas = function(options) {
|
||||
if (options && options.profile && window.console && window.console.profile) {
|
||||
if (options && options.profile && window.console && window.console.profile && window.location.search !== "?selenium2") {
|
||||
console.profile();
|
||||
}
|
||||
var date = new Date(),
|
||||
|
||||
@ -1,109 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>border tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<link href="#" type="text/css" rel="stylesheet">
|
||||
<script type="text/javascript" src="test.js"></script>
|
||||
<style type="text/css">
|
||||
|
||||
div { font: 12px Arial; }
|
||||
|
||||
span.bold { font-weight: bold; }
|
||||
|
||||
#div2 { z-index: 2; }
|
||||
#div3 { z-index: 1; }
|
||||
#div4 { z-index: 10; }
|
||||
|
||||
#div1,#div3 {
|
||||
height: 80px;
|
||||
position: relative;
|
||||
border: 23px double #669966;
|
||||
background-color: #ccffcc;
|
||||
padding-left: 5px;
|
||||
border-left-color:yellow;
|
||||
border-right-color: blueviolet;
|
||||
}
|
||||
|
||||
#div2 {
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 201px;
|
||||
top: 20px;
|
||||
left: 170px;
|
||||
border: 20px solid #990000;
|
||||
background-color: #ffdddd;
|
||||
text-align: center;
|
||||
border-radius: 50px/160px;
|
||||
border-left-color: violet;
|
||||
border-top-width:0px;
|
||||
}
|
||||
|
||||
#div4 {
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 70px;
|
||||
top: 65px;
|
||||
left: 50px;
|
||||
border: 15px dashed #000099;
|
||||
background-color: #ddddff;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#div5{
|
||||
border: 15px dashed #669966;
|
||||
background-color: #ccffcc;
|
||||
padding-left: 5px;
|
||||
position:relative;
|
||||
margin-bottom:-15px;
|
||||
height:50px;
|
||||
margin-top:10px;
|
||||
|
||||
}
|
||||
|
||||
#div6{
|
||||
border: 1px dashed #000099;
|
||||
background-color: #ddddff;
|
||||
text-align: left;
|
||||
padding-left: 10px;
|
||||
|
||||
}
|
||||
|
||||
</style></head>
|
||||
|
||||
<body>
|
||||
|
||||
<br />
|
||||
|
||||
<div id="div1">
|
||||
<br /><span class="bold">DIV #1</span>
|
||||
<br />position: relative;
|
||||
<div id="div2">
|
||||
<br /><span class="bold">DIV #2</span>
|
||||
<br />position: absolute;
|
||||
<br />z-index: 2;
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
|
||||
<div id="div3" style="background-image:url(image.jpg)">
|
||||
<br /><span class="bold">DIV #3</span>
|
||||
<br />position: relative;
|
||||
<br />z-index: 1;
|
||||
<div id="div4">
|
||||
<br /><span class="bold">DIV #4</span>
|
||||
<br />position: absolute;
|
||||
<br />z-index: 10;
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="div5"><br />DIV #5<br />position:relative;<br /></div>
|
||||
|
||||
<div id ="div6"><br />DIV #6<br />position:static;<br /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -41,8 +41,8 @@
|
||||
<body>
|
||||
|
||||
<div class="medium">
|
||||
<div style="background:url(../../assets/image.jpg) center center;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) repeat-x center center;"></div>
|
||||
<div style='background:url("../../assets/image.jpg") center center;'></div>
|
||||
<div style="background:url('../../assets/image.jpg') repeat-x center center;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) repeat-y center center;"></div>
|
||||
<div style="background:url(../../assets/image.jpg) no-repeat center center;"></div>
|
||||
</div>
|
||||
|
||||
47
tests/cases/border/dashed.html
Normal file
47
tests/cases/border/dashed.html
Normal file
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Borders tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
background:#6F428C;
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
border-width: 1px;
|
||||
border-color: #00b5e2;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
border-width: 3px;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
border-width: 50px;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #3a84c3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1"> </div>
|
||||
<div class="box2"> </div>
|
||||
<div class="box3"> </div>
|
||||
<div class="box4"> </div>
|
||||
</body>
|
||||
</html>
|
||||
47
tests/cases/border/dotted.html
Normal file
47
tests/cases/border/dotted.html
Normal file
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Borders tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
background:#6F428C;
|
||||
border-style: dotted;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
border-width: 1px;
|
||||
border-color: #00b5e2;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
border-width: 3px;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
border-width: 50px;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #3a84c3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1"> </div>
|
||||
<div class="box2"> </div>
|
||||
<div class="box3"> </div>
|
||||
<div class="box4"> </div>
|
||||
</body>
|
||||
</html>
|
||||
47
tests/cases/border/double.html
Normal file
47
tests/cases/border/double.html
Normal file
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Borders tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
background:#6F428C;
|
||||
border-style:double;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
border-width: 1px;
|
||||
border-color: #00b5e2;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
border-width: 3px;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
border-width: 50px;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #3a84c3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1"> </div>
|
||||
<div class="box2"> </div>
|
||||
<div class="box3"> </div>
|
||||
<div class="box4"> </div>
|
||||
</body>
|
||||
</html>
|
||||
47
tests/cases/border/solid.html
Normal file
47
tests/cases/border/solid.html
Normal file
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Borders tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style type="text/css">
|
||||
div {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
background:#6F428C;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
border-width: 1px;
|
||||
border-color: #00b5e2;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
border-width: 3px;
|
||||
border-color: red;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
border-width: 10px;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
border-width: 50px;
|
||||
border-color: green;
|
||||
}
|
||||
|
||||
html {
|
||||
background: #3a84c3;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box1"> </div>
|
||||
<div class="box2"> </div>
|
||||
<div class="box3"> </div>
|
||||
<div class="box4"> </div>
|
||||
</body>
|
||||
</html>
|
||||
@ -97,7 +97,7 @@
|
||||
<h2><h2> text-transform</h2>
|
||||
<ul>
|
||||
<li style="text-transform:none;">text-transform:none;</li>
|
||||
<li style="text-transform:capitalize;">text-transform:capitalize; (including foreign characters such as Öaäå)</li>
|
||||
<li style="text-transform:capitalize;">text-transform: capitalize; (including foreign characters such as Öaäå)</li>
|
||||
<li style="text-transform:uppercase;">text-transform:uppercase;</li>
|
||||
<li style="text-transform:lowercase;">text-transform:lowercase;</li>
|
||||
</ul>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
|
||||
<!-- src files -->
|
||||
<script type="text/javascript" src="../../external/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/Core.js"></script>
|
||||
@ -53,9 +53,9 @@
|
||||
<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 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">
|
||||
@ -64,8 +64,8 @@
|
||||
<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: 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>
|
||||
@ -78,16 +78,16 @@
|
||||
<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 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="background-position: 5% 6px;"></div>
|
||||
<div style="background-position: center center;"></div>
|
||||
<div style="background-position: left bottom;"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@ -138,7 +138,7 @@
|
||||
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%);
|
||||
@ -193,16 +193,16 @@
|
||||
<script>
|
||||
var pages = ["background","borders","external-content","forms","images","lists","origin","overflow","proxy","text-linethrough"],
|
||||
fixtures = $("#fixture-iframes");
|
||||
|
||||
|
||||
|
||||
$.each(pages, function(i, page){
|
||||
|
||||
|
||||
var iframe = $('<iframe />').attr('src',"../" + page + ".html");
|
||||
|
||||
|
||||
iframe.insertAfter( fixtures );
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<iframe src="../borders.html" id="borders"></iframe> -->
|
||||
|
||||
31
tests/readme.md
Normal file
31
tests/readme.md
Normal file
@ -0,0 +1,31 @@
|
||||
<table><thead><tr><td></td><th>chrome<br />23.0.1271.97</th><th>firefox<br />12.0</th><th>iexplorer<br />9</th></tr></thead><tbody>
|
||||
<tr><td>background/encoded.html</td><td>100%</td><td>100%</td><td>100%</td></tr>
|
||||
<tr><td>background/linear-gradient.html</td><td>82.27%</td><td>85.64%</td><td>100%</td></tr>
|
||||
<tr><td>background/multi.html</td><td>96.6%</td><td>96.45%</td><td>96.89%</td></tr>
|
||||
<tr><td>background/position.html</td><td>97.03%</td><td>96.97%</td><td>97.03%</td></tr>
|
||||
<tr><td>background/radial-gradient.html</td><td>57.9%</td><td>54.87%</td><td>94.02%</td></tr>
|
||||
<tr><td>background/repeat.html</td><td>100%</td><td>100%</td><td>100%</td></tr>
|
||||
<tr><td>border/dashed.html</td><td>96.45%</td><td>98.38%</td><td>97.7%</td></tr>
|
||||
<tr><td>border/dotted.html</td><td>97.41%</td><td>96.46%</td><td>95.93%</td></tr>
|
||||
<tr><td>border/double.html</td><td>97.96%</td><td>97.87%</td><td>97.95%</td></tr>
|
||||
<tr><td>border/solid.html</td><td>99.97%</td><td>99.97%</td><td>99.98%</td></tr>
|
||||
<tr><td>forms.html</td><td>95.96%</td><td>94.55%</td><td>95.02%</td></tr>
|
||||
<tr><td>images/canvas.html</td><td>99.86%</td><td>100%</td><td>100%</td></tr>
|
||||
<tr><td>images/cross-origin.html</td><td>97.99%</td><td>97.58%</td><td>99.35%</td></tr>
|
||||
<tr><td>images/empty.html</td><td>99.86%</td><td>99.87%</td><td>99.85%</td></tr>
|
||||
<tr><td>images/images.html</td><td>83.72%</td><td>96.93%</td><td>55.09%</td></tr>
|
||||
<tr><td>images/svg.html</td><td>99.92%</td><td>96.79%</td><td>99.93%</td></tr>
|
||||
<tr><td>list/decimal-leading-zero.html</td><td>99.63%</td><td>99.72%</td><td>35.04%</td></tr>
|
||||
<tr><td>list/decimal.html</td><td>99.64%</td><td>99.73%</td><td>35.06%</td></tr>
|
||||
<tr><td>list/lower-alpha.html</td><td>99.65%</td><td>99.73%</td><td>35.05%</td></tr>
|
||||
<tr><td>list/upper-roman.html</td><td>99.45%</td><td>99.61%</td><td>35.11%</td></tr>
|
||||
<tr><td>overflow.html</td><td>96.85%</td><td>97.49%</td><td>96.51%</td></tr>
|
||||
<tr><td>text/linethrough.html</td><td>97.14%</td><td>94.12%</td><td>45.74%</td></tr>
|
||||
<tr><td>text/text.html</td><td>95.71%</td><td>94.67%</td><td>79.85%</td></tr>
|
||||
<tr><td>text/underline-lineheight.html</td><td>97.06%</td><td>92.35%</td><td>51.38%</td></tr>
|
||||
<tr><td>text/underline.html</td><td>97.65%</td><td>93.5%</td><td>45.69%</td></tr>
|
||||
<tr><td>visibility.html</td><td>99.19%</td><td>98.92%</td><td>99.39%</td></tr>
|
||||
<tr><td>zindex/z-index1.html</td><td>97.09%</td><td>99.38%</td><td>99.54%</td></tr>
|
||||
<tr><td>zindex/z-index2.html</td><td>95.94%</td><td>98.16%</td><td>97.81%</td></tr>
|
||||
<tr><td>zindex/z-index3.html</td><td>98.98%</td><td>98.55%</td><td>98.68%</td></tr>
|
||||
</tbody></table>
|
||||
2
tests/results/.gitignore
vendored
Normal file
2
tests/results/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
*
|
||||
!.gitignore
|
||||
@ -1,154 +1,272 @@
|
||||
var webdriver = require("webdriver.js").webdriver,
|
||||
http = require("http"),
|
||||
url = require("url"),
|
||||
path = require("path"),
|
||||
base64_arraybuffer = require('base64-arraybuffer'),
|
||||
PNG = require('png-js'),
|
||||
fs = require("fs");
|
||||
(function(){
|
||||
"use strict;"
|
||||
var webdriver = require("webdriver.js").webdriver,
|
||||
http = require("http"),
|
||||
url = require("url"),
|
||||
path = require("path"),
|
||||
base64_arraybuffer = require('base64-arraybuffer'),
|
||||
PNG = require('png-js'),
|
||||
fs = require("fs");
|
||||
|
||||
function createServer(port) {
|
||||
return http.createServer(function(request, response) {
|
||||
var uri = url.parse(request.url).pathname,
|
||||
filename = path.join(process.cwd(), uri);
|
||||
|
||||
function createServer(port) {
|
||||
return http.createServer(function(request, response) {
|
||||
var uri = url.parse(request.url).pathname,
|
||||
filename = path.join(process.cwd(), "../" + uri);
|
||||
|
||||
fs.exists(filename, function(exists) {
|
||||
if(!exists) {
|
||||
response.writeHead(404, {
|
||||
"Content-Type": "text/plain"
|
||||
});
|
||||
response.write("404 Not Found\n");
|
||||
response.end();
|
||||
return;
|
||||
}
|
||||
|
||||
if (fs.statSync(filename).isDirectory()) filename += '/index.html';
|
||||
|
||||
fs.readFile(filename, "binary", function(err, file) {
|
||||
if(err) {
|
||||
response.writeHead(500, {
|
||||
fs.exists(filename, function(exists) {
|
||||
if(!exists) {
|
||||
response.writeHead(404, {
|
||||
"Content-Type": "text/plain"
|
||||
});
|
||||
response.write(err + "\n");
|
||||
response.write("404 Not Found\n");
|
||||
response.end();
|
||||
return;
|
||||
}
|
||||
|
||||
response.writeHead(200);
|
||||
response.write(file, "binary");
|
||||
response.end();
|
||||
if (fs.statSync(filename).isDirectory()) filename += '/index.html';
|
||||
|
||||
fs.readFile(filename, "binary", function(err, file) {
|
||||
if(err) {
|
||||
response.writeHead(500, {
|
||||
"Content-Type": "text/plain"
|
||||
});
|
||||
response.write(err + "\n");
|
||||
response.end();
|
||||
return;
|
||||
}
|
||||
|
||||
response.writeHead(200);
|
||||
response.write(file, "binary");
|
||||
response.end();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
}).listen(port);
|
||||
}
|
||||
}).listen(port);
|
||||
}
|
||||
|
||||
function walkDir(dir, done) {
|
||||
var results = [];
|
||||
fs.readdir(dir, function(err, list) {
|
||||
if (err) return done(err);
|
||||
var i = 0;
|
||||
(function next() {
|
||||
var file = list[i++];
|
||||
if (!file) return done(null, results);
|
||||
file = dir + '/' + file;
|
||||
fs.stat(file, function(err, stat) {
|
||||
if (stat && stat.isDirectory()) {
|
||||
walkDir(file, function(err, res) {
|
||||
results = results.concat(res);
|
||||
function walkDir(dir, done) {
|
||||
var results = [];
|
||||
fs.readdir(dir, function(err, list) {
|
||||
if (err) return done(err);
|
||||
var i = 0;
|
||||
(function next() {
|
||||
var file = list[i++];
|
||||
if (!file) return done(null, results);
|
||||
file = dir + '/' + file;
|
||||
fs.stat(file, function(err, stat) {
|
||||
if (stat && stat.isDirectory()) {
|
||||
walkDir(file, function(err, res) {
|
||||
results = results.concat(res);
|
||||
next();
|
||||
});
|
||||
} else {
|
||||
results.push(file);
|
||||
next();
|
||||
});
|
||||
} else {
|
||||
results.push(file);
|
||||
next();
|
||||
}
|
||||
});
|
||||
})();
|
||||
});
|
||||
};
|
||||
|
||||
function getPixelArray(base64, func) {
|
||||
var arraybuffer = base64_arraybuffer.decode(base64);
|
||||
(new PNG(arraybuffer)).decode(func);
|
||||
}
|
||||
|
||||
|
||||
function testPage(browser, url, done) {
|
||||
|
||||
browser.url(url)
|
||||
.$(".html2canvas", 5000, function(){
|
||||
this.execute(function(){
|
||||
var canvas = $('.html2canvas')[0];
|
||||
return canvas.toDataURL("image/png").substring(22);
|
||||
},[], function(dataurl) {
|
||||
getPixelArray(dataurl, function(h2cPixels) {
|
||||
browser.screenshot(function(base64){
|
||||
getPixelArray(base64, function(screenPixels) {
|
||||
var len = h2cPixels.length, index = 0, diff = 0;
|
||||
for (; index < len; index++) {
|
||||
if (screenPixels[index] - h2cPixels[index] !== 0) {
|
||||
diff++;
|
||||
}
|
||||
}
|
||||
done(100 - (Math.round((diff/h2cPixels.length) * 10000) / 100));
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function runBrowsers(pages){
|
||||
|
||||
var port = 5555,
|
||||
stats = {},
|
||||
browsers = ["chrome", "firefox", "internet explorer"],
|
||||
browsersDone = 0,
|
||||
server = createServer(port),
|
||||
numPages = pages.length;
|
||||
|
||||
var browserDone = function() {
|
||||
if (++browsersDone >= browsers.length) {
|
||||
server.close();
|
||||
console.log(stats);
|
||||
}
|
||||
};
|
||||
|
||||
browsers.forEach(function(browserName){
|
||||
var browser = new webdriver({
|
||||
browser: browserName
|
||||
}),
|
||||
browserType;
|
||||
function getPixelArray(base64, func) {
|
||||
var arraybuffer = base64_arraybuffer.decode(base64);
|
||||
(new PNG(arraybuffer)).decode(func);
|
||||
}
|
||||
|
||||
browser.status(function(browserInfo){
|
||||
browserType = [browserName, browser.version, browserInfo.os.name.replace(/\s+/g, "-").toLowerCase()].join("-");
|
||||
var date = new Date(),
|
||||
obj = {
|
||||
tests: {},
|
||||
date: date.toISOString()
|
||||
function getBaselineFiles() {
|
||||
return fs.readdirSync("tests/results/").filter(function(name) {
|
||||
return /\.baseline$/.test(name);
|
||||
}).map(function(item) {
|
||||
return "tests/results/" + item;
|
||||
});
|
||||
}
|
||||
|
||||
function testPage(browser, url, done) {
|
||||
browser.url(url)
|
||||
.$(".html2canvas", 5000, function(){
|
||||
this.execute(function(){
|
||||
var canvas = $('.html2canvas')[0];
|
||||
return canvas.toDataURL("image/png").substring(22);
|
||||
},[], function(dataurl) {
|
||||
getPixelArray(dataurl, function(h2cPixels) {
|
||||
browser.screenshot(function(base64){
|
||||
getPixelArray(base64, function(screenPixels) {
|
||||
var len = h2cPixels.length, index = 0, diff = 0;
|
||||
for (; index < len; index++) {
|
||||
if (screenPixels[index] - h2cPixels[index] !== 0) {
|
||||
diff++;
|
||||
}
|
||||
}
|
||||
done(100 - (Math.round((diff/h2cPixels.length) * 10000) / 100));
|
||||
});
|
||||
})
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var writeResultFile = function(filename, json, append) {
|
||||
fs.writeFile(filename + (append || ""), json);
|
||||
};
|
||||
|
||||
var openResultFile = function(stats, browser) {
|
||||
var tests = stats[browser].tests,
|
||||
filename = "tests/results/" + browser + ".json",
|
||||
write = writeResultFile.bind(null, filename, JSON.stringify(stats[browser]));
|
||||
|
||||
fs.exists(filename, function(exists) {
|
||||
if(exists) {
|
||||
fs.readFile(filename, "binary", parseResultFile.bind(null, tests, browser, write));
|
||||
} else {
|
||||
write();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var setColor = function(color, text) {
|
||||
return [color, " * ", ((isNaN(text.amount)) ? "NEW" : text.amount + "%"), " ", text.test].join("");
|
||||
};
|
||||
|
||||
var parseResultFile = function(tests, browser, createResultFile, err, file) {
|
||||
if (err) throw err;
|
||||
var data = JSON.parse(file),
|
||||
improved = [],
|
||||
regressed = [],
|
||||
newItems = [],
|
||||
colors = {
|
||||
red: "\x1b[1;31m",
|
||||
blue: "\x1b[1;36m",
|
||||
violet: "\x1b[0;35m",
|
||||
green: "\x1b[0;32m"
|
||||
};
|
||||
|
||||
Object.keys(tests).forEach(function(test){
|
||||
var testResult = tests[test],
|
||||
dataResult = data.tests[test],
|
||||
dataObject = {
|
||||
amount: (Math.abs(testResult - dataResult) < 0.02) ? 0 : testResult - dataResult,
|
||||
test: test
|
||||
};
|
||||
stats[browserType] = obj;
|
||||
stats[browserName] = obj;
|
||||
processPage(0);
|
||||
|
||||
if (dataObject.amount > 0) {
|
||||
improved.push(dataObject);
|
||||
} else if (dataObject.amount < 0) {
|
||||
regressed.push(dataObject);
|
||||
} else if (dataResult === undefined) {
|
||||
newItems.push(dataObject);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
function processPage(index) {
|
||||
var page = pages[index++];
|
||||
testPage(browser, "http://localhost:" + port + "/tests/" + page + "?selenium", function(result) {
|
||||
if (numPages > index) {
|
||||
processPage(index);
|
||||
} else {
|
||||
browser.close(browserDone);
|
||||
}
|
||||
stats[browserType].tests[page] = result;
|
||||
if (newItems.length > 0 || improved.length > 0 || regressed.length > 0) {
|
||||
if (regressed.length === 0) {
|
||||
createResultFile(".baseline");
|
||||
}
|
||||
|
||||
console.log(colors.violet, "********************");
|
||||
console.log((regressed.length > 0) ? colors.red : colors.green, browser);
|
||||
|
||||
improved.map(setColor.bind(null, colors.green))
|
||||
.concat(regressed.map(setColor.bind(null, colors.red)))
|
||||
.concat(newItems.map(setColor.bind(null, colors.blue)))
|
||||
.forEach(function(item) {
|
||||
console.log(item);
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
walkDir("cases", function(err, results) {
|
||||
if (err) throw err;
|
||||
runBrowsers(results);
|
||||
});
|
||||
function handleResults(stats) {
|
||||
Object.keys(stats).forEach(openResultFile.bind(null, stats));
|
||||
}
|
||||
|
||||
function runBrowsers(pages){
|
||||
|
||||
var port = 5555,
|
||||
stats = {},
|
||||
browsers = ["chrome", "firefox", "internet explorer"],
|
||||
browsersDone = 0,
|
||||
server = createServer(port),
|
||||
numPages = pages.length;
|
||||
|
||||
var browserDone = function() {
|
||||
if (++browsersDone >= browsers.length) {
|
||||
server.close();
|
||||
handleResults(stats);
|
||||
}
|
||||
};
|
||||
|
||||
browsers.forEach(function(browserName){
|
||||
var browser = new webdriver({
|
||||
browser: browserName
|
||||
}),
|
||||
browserType;
|
||||
browserName = browserName.replace("internet explorer", "iexplorer");
|
||||
browser.status(function(browserInfo){
|
||||
browserType = [browserName, browser.version, browserInfo.os.name.replace(/\s+/g, "-").toLowerCase()].join("-");
|
||||
var date = new Date(),
|
||||
obj = {
|
||||
tests: {},
|
||||
date: date.toISOString(),
|
||||
version: browser.version
|
||||
};
|
||||
stats[browserType] = obj;
|
||||
stats[browserName] = obj;
|
||||
processPage(0);
|
||||
});
|
||||
|
||||
function processPage(index) {
|
||||
var page = pages[index++];
|
||||
testPage(browser, "http://localhost:" + port + "/" + page + "?selenium", function(result) {
|
||||
if (numPages > index) {
|
||||
processPage(index);
|
||||
} else {
|
||||
browser.close(browserDone);
|
||||
}
|
||||
stats[browserType].tests[page] = result;
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
exports.tests = function() {
|
||||
getBaselineFiles().forEach(fs.unlinkSync.bind(fs));
|
||||
walkDir("tests/cases", function(err, results) {
|
||||
if (err) throw err;
|
||||
runBrowsers(results);
|
||||
});
|
||||
};
|
||||
|
||||
exports.baseline = function() {
|
||||
getBaselineFiles().forEach(function(file) {
|
||||
var newName = file.substring(0, file.length - 9);
|
||||
fs.renameSync(file, newName);
|
||||
console.log(newName, "created");
|
||||
});
|
||||
};
|
||||
|
||||
exports.markdown = function() {
|
||||
var data = {}, html = "<table><thead><tr><td></td>",
|
||||
browsers = ["chrome", "firefox", "iexplorer"];
|
||||
|
||||
browsers.forEach(function(browser) {
|
||||
data[browser] = JSON.parse(fs.readFileSync("tests/results/" + browser + ".json"));
|
||||
html += "<th>" + browser + "<br />" + data[browser].version + "</th>";
|
||||
});
|
||||
html += "</tr></thead><tbody>\n";
|
||||
|
||||
Object.keys(data[browsers[0]].tests).forEach(function(testFile) {
|
||||
html += "<tr><td>" + testFile.substring(12) + "</td>";
|
||||
browsers.forEach(function(browser) {
|
||||
html += "<td>" + Math.round(data[browser].tests[testFile] * 100) / 100 + "%</td>";
|
||||
});
|
||||
html += "</tr>\n"
|
||||
});
|
||||
|
||||
html += "</tbody></table>";
|
||||
|
||||
fs.writeFileSync("tests/readme.md", html);
|
||||
};
|
||||
|
||||
})();
|
||||
@ -11,7 +11,7 @@ var h2cSelector, h2cOptions;
|
||||
|
||||
document.write(srcStart + '/tests/assets/jquery-1.6.2.js' + scrEnd);
|
||||
document.write(srcStart + '/tests/assets/jquery.plugin.html2canvas.js' + scrEnd);
|
||||
var html2canvas = ['Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'Util', 'renderers/Canvas'], i;
|
||||
var html2canvas = ['Core', 'Generate', 'Parse', 'Preload', 'Queue', 'Renderer', 'Util', 'Support', 'Font', 'renderers/Canvas'], i;
|
||||
for (i = 0; i < html2canvas.length; ++i) {
|
||||
document.write(srcStart + '/src/' + html2canvas[i] + '.js' + scrEnd);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user