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

add test files

Browse Source
This commit is contained in:
ysk2014 2020-09-14 12:21:30 +08:00
parent 4482b33356
commit 1dcd17b408
4 changed files with 66 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
examples/demo3.html
View File

@ -1,54 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Text stroke tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
div span:first-child {
font-size: 2em;
}
div span:nth-child(2) {
font-size: 5em;
}
.stroke1 {
-webkit-text-stroke: .09em red;
font-size: 1em;
}
.stroke2 {
-webkit-text-stroke-width: .12em;
-webkit-text-stroke-color: green;
font-size: 2em;
box-shadow: 1px 1px #000;
}
.stroke3 {
-webkit-text-stroke-width: .19em;
-webkit-text-stroke-color: blue;
font-size: 3em;
}
body {
font-family: Arial;
}
</style>
</head>
<body>
<div class="stroke1">
Some text <span> with bigger text </span> that should have a stroke
<strong>Bolder stroke</strong> that makes things pretty
</div>
<script type="text/javascript" src="../dist/html2canvas.js"></script>
<script type="text/javascript">
html2canvas(document.body).then(function (canvas) {
document.body.appendChild(canvas);
});
</script>
</html>

72
examples/demo4.html
View File

@ -1,72 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Nested transform tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
#first {
background: indianred;
margin-top: 100px;
}
#second {
border: 15px solid red;
background: darkseagreen;
-webkit-transform: rotate(7.5deg);
/* Chrome, Safari 3.1+ */
-moz-transform: rotate(7.5deg);
/* Firefox 3.5-15 */
-ms-transform: rotate(7.5deg);
/* IE 9 */
-o-transform: rotate(7.5deg);
/* Opera 10.50-12.00 */
transform: rotate(7.5deg);
}
#third {
background: cadetblue;
-webkit-transform: rotate(-70.5deg);
/* Chrome, Safari 3.1+ */
-moz-transform: rotate(-70.5deg);
/* Firefox 3.5-15 */
-ms-transform: rotate(-70.5deg);
/* IE 9 */
-o-transform: rotate(-70.5deg);
/* Opera 10.50-12.00 */
transform: rotate(-70.5deg);
/* Firefox 16+, IE 10+, Opera 12.10+ */
}
#fourth {
margin-bottom: 100px;
{% comment %} transform: scale(2); {% endcomment %}
}
div {
display: inline-block;
}
body {
font-family: Arial;
}
img.test {
width: 100px;
/* Chrome, Safari, Opera */
filter: contrast(110%) sepia(100%) grayscale(100%);
}
</style>
</head>
<body>
<div id="fourth">
<img class="test" src="../tests/assets/image.jpg" crossorigin="anonymous" alt="" />
</div>
<script type="text/javascript" src="../dist/html2canvas.js"></script>
<script type="text/javascript">
html2canvas(document.getElementById('fourth'), {allowTaint: true, scale: 1}).then(function(canvas) {
document.body.appendChild(canvas);
});
</script>
</body>
</html>

33
tests/reftests/images/filter.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>External content tests</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../../test.js"></script>
<style>
body {
font-family: Arial;
}
</style>
<base href="http://localhost:8081/" />
</head>
<body>
<h1>Original image</h1>
<img src="http://localhost:8081/assets/image2.jpg" />
<h1>filter: blur(5px);</h1>
<img src="/assets/image_1.jpg" style="filter: blur(5px);" />
<h1>filter: contrast(200%);</h1>
<img src="/assets/image_1.jpg" style="filter: contrast(200%);" />
<h1>filter: grayscale(80%);</h1>
<img src="/assets/image_1.jpg" style="filter: grayscale(80%);" />
<h1>filter: hue-rotate(90deg);</h1>
<img src="/assets/image_1.jpg" style="filter: hue-rotate(90deg);" />
<h1>filter: invert(75%);</h1>
<img src="/assets/image_1.jpg" style="filter: invert(75%);" />
</body>
</html>

33
tests/reftests/text/stroke.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<title>Text stroke</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../../test.js"></script>
<style>
div span:first-child {
font-size: 2em;
}
div span:nth-child(2) {
font-size: 5em;
}
.stroke1 {
-webkit-text-stroke: 0.09em red;
font-size: 1em;
}
body {
font-family: Arial;
}
</style>
</head>
<body>
<h1>&lt;h1&gt; text-stroke</h1>
<div class="stroke1">
Some text <span> with bigger text </span> that should have a stroke <strong>Bolder stroke</strong> that
makes things pretty
</div>
</body>
</html>