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:
Niklas von Hertzen
45
tests/reftests/transform/nested.html
Normal file
45
tests/reftests/transform/nested.html
Normal file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Nested transform tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<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 {
|
||||
background: #bc8f8f;
|
||||
}
|
||||
|
||||
div {
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="first">First level content <div id="second">with second level content <div id="third">and third level content</div>, ending second</div>, ending first</div>
|
||||
<div id="fourth">something else</div>
|
||||
</body>
|
||||
</html>
|
||||
42
tests/reftests/transform/nested.txt
Normal file
42
tests/reftests/transform/nested.txt
Normal file
@ -0,0 +1,42 @@
|
||||
Window: [800, 600]
|
||||
Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
|
||||
Opacity: 1
|
||||
Clip: Path (Vector(x: 8, y: 108) > Vector(x: 649, y: 108) > Vector(x: 649, y: 157) > Vector(x: 8, y: 157))
|
||||
Fill: rgb(205,92,92)
|
||||
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
|
||||
[8, 124]: First
|
||||
[41, 124]: level
|
||||
[76, 124]: content
|
||||
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
|
||||
[568, 124]: ,
|
||||
[576, 124]: ending
|
||||
[624, 124]: first
|
||||
Clip: Path (Vector(x: 653, y: 123) > Vector(x: 749, y: 123) > Vector(x: 749, y: 142) > Vector(x: 653, y: 142))
|
||||
Fill: rgb(188,143,143)
|
||||
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
|
||||
[653, 124]: something
|
||||
[724, 124]: else
|
||||
Transform: (348, 132) [0.99, 0.13, -0.13, 0.99, 0, 0]
|
||||
Clip: Path (Vector(x: 128, y: 108) > Vector(x: 568, y: 108) > Vector(x: 568, y: 157) > Vector(x: 128, y: 157))
|
||||
Fill: rgb(143,188,143)
|
||||
Shape: rgb(255,0,0) Path (Vector(x: 128, y: 108) > Vector(x: 568, y: 108) > Vector(x: 553, y: 123) > Vector(x: 143, y: 123))
|
||||
Shape: rgb(255,0,0) Path (Vector(x: 568, y: 108) > Vector(x: 568, y: 157) > Vector(x: 553, y: 142) > Vector(x: 553, y: 123))
|
||||
Shape: rgb(255,0,0) Path (Vector(x: 568, y: 157) > Vector(x: 128, y: 157) > Vector(x: 143, y: 142) > Vector(x: 553, y: 142))
|
||||
Shape: rgb(255,0,0) Path (Vector(x: 128, y: 157) > Vector(x: 128, y: 108) > Vector(x: 143, y: 123) > Vector(x: 143, y: 142))
|
||||
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
|
||||
[143, 123]: with
|
||||
[175, 123]: second
|
||||
[224, 123]: level
|
||||
[258, 123]: content
|
||||
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
|
||||
[453, 123]: ,
|
||||
[461, 123]: ending
|
||||
[509, 123]: second
|
||||
Transform: (381, 132) [0.33, -0.94, 0.94, 0.33, 0, 0]
|
||||
Clip: Path (Vector(x: 310, y: 123) > Vector(x: 453, y: 123) > Vector(x: 453, y: 142) > Vector(x: 310, y: 142))
|
||||
Fill: rgb(95,158,160)
|
||||
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
|
||||
[310, 123]: and
|
||||
[337, 123]: third
|
||||
[371, 123]: level
|
||||
[406, 123]: content
|
||||
54
tests/reftests/transform/rotate.html
Normal file
54
tests/reftests/transform/rotate.html
Normal file
@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Rotation transform tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
}
|
||||
.image1 {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
-webkit-transform: rotate(-45deg); /* Chrome, Safari 3.1+ */
|
||||
-moz-transform: rotate(-45deg); /* Firefox 3.5-15 */
|
||||
-ms-transform: rotate(-45deg); /* IE 9 */
|
||||
-o-transform: rotate(-45deg); /* Opera 10.50-12.00 */
|
||||
transform:rotate(-45deg);
|
||||
}
|
||||
.image2 {
|
||||
position: absolute;
|
||||
left: 634px;
|
||||
-webkit-transform: rotate(90deg); /* Chrome, Safari 3.1+ */
|
||||
-moz-transform: rotate(90deg); /* Firefox 3.5-15 */
|
||||
-ms-transform: rotate(90deg); /* IE 9 */
|
||||
-o-transform: rotate(90deg); /* Opera 10.50-12.00 */
|
||||
transform:rotate(90deg);
|
||||
}
|
||||
.image3 {
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: 100px;
|
||||
-webkit-transform: rotate(45deg); /* Chrome, Safari 3.1+ */
|
||||
-moz-transform: rotate(45deg); /* Firefox 3.5-15 */
|
||||
-ms-transform: rotate(45deg); /* IE 9 */
|
||||
-o-transform: rotate(45deg); /* Opera 10.50-12.00 */
|
||||
transform:rotate(45deg);
|
||||
}
|
||||
</style
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="image1">
|
||||
<img src="../../assets/image.jpg" style="width: 200px; height: 200px;">
|
||||
</div>
|
||||
<div class="image2">
|
||||
<img src="../../assets/image2.jpg" style="width: 50px; height: 200px;">
|
||||
</div>
|
||||
<div class="image3">
|
||||
<img src="../../assets/image.jpg" style="width: 100px; height: 200px;">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
12
tests/reftests/transform/rotate.txt
Normal file
12
tests/reftests/transform/rotate.txt
Normal file
@ -0,0 +1,12 @@
|
||||
Window: [800, 600]
|
||||
Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
|
||||
Opacity: 1
|
||||
Transform: (208, 110) [0.71, -0.71, 0.71, 0.71, 0, 0]
|
||||
Clip: Path (Vector(x: 108, y: 8) > Vector(x: 308, y: 8) > Vector(x: 308, y: 208) > Vector(x: 108, y: 208))
|
||||
Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
|
||||
Transform: (667, 110) [0, 1, -1, 0, 0, 0]
|
||||
Clip: Path (Vector(x: 642, y: 8) > Vector(x: 692, y: 8) > Vector(x: 692, y: 208) > Vector(x: 642, y: 208))
|
||||
Draw image: Image ("/tests/assets/image2.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
|
||||
Transform: (158, 360) [0.71, 0.71, -0.71, 0.71, 0, 0]
|
||||
Clip: Path (Vector(x: 108, y: 258) > Vector(x: 208, y: 258) > Vector(x: 208, y: 458) > Vector(x: 108, y: 458))
|
||||
Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
|
||||
45
tests/reftests/transform/translate.html
Normal file
45
tests/reftests/transform/translate.html
Normal file
@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Nested transform tests</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<script type="text/javascript" src="../../test.js"></script>
|
||||
<style>
|
||||
#first {
|
||||
background: indianred;
|
||||
margin-top: 100px;
|
||||
}
|
||||
#second {
|
||||
border: 10px solid red;
|
||||
background: darkseagreen;
|
||||
-webkit-transform: translate(125px); /* Chrome, Safari 3.1+ */
|
||||
-moz-transform: translate(125px); /* Firefox 3.5-15 */
|
||||
-ms-transform: translate(125px); /* IE 9 */
|
||||
-o-transform: translate(125px); /* Opera 10.50-12.00 */
|
||||
transform: translate(125px);
|
||||
}
|
||||
#third {
|
||||
background: cadetblue;
|
||||
-webkit-transform: translate(-100px, -25px); /* Chrome, Safari 3.1+ */
|
||||
-moz-transform: translate(100px, -25px); /* Firefox 3.5-15 */
|
||||
-ms-transform: translate(100px, -25px); /* IE 9 */
|
||||
-o-transform: translate(100px, -25px); /* Opera 10.50-12.00 */
|
||||
transform: translate(100px, -25px);
|
||||
-webkit-transform-origin: 100px 50px;
|
||||
-moz-transform-origin: 100px 50px;
|
||||
-ms-transform-origin: 100px 50px;
|
||||
-o-transform-origin: 100px 50px;
|
||||
transform-origin: 100px 50px;
|
||||
|
||||
}
|
||||
div {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="first">First level content <div id="second">with second level content <div id="third">and third level content</div>, ending second</div>, ending first</div>
|
||||
</body>
|
||||
</html>
|
||||
37
tests/reftests/transform/translate.txt
Normal file
37
tests/reftests/transform/translate.txt
Normal file
@ -0,0 +1,37 @@
|
||||
Window: [800, 600]
|
||||
Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
|
||||
Opacity: 1
|
||||
Clip: Path (Vector(x: 8, y: 108) > Vector(x: 699, y: 108) > Vector(x: 699, y: 207) > Vector(x: 8, y: 207))
|
||||
Fill: rgb(205,92,92)
|
||||
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
|
||||
[18, 148]: First
|
||||
[51, 148]: level
|
||||
[86, 148]: content
|
||||
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
|
||||
[608, 148]: ,
|
||||
[616, 148]: ending
|
||||
[664, 148]: first
|
||||
Transform: (373, 157) [1, 0, 0, 1, 125, 0]
|
||||
Clip: Path (Vector(x: 138, y: 118) > Vector(x: 608, y: 118) > Vector(x: 608, y: 197) > Vector(x: 138, y: 197))
|
||||
Fill: rgb(143,188,143)
|
||||
Shape: rgb(255,0,0) Path (Vector(x: 138, y: 118) > Vector(x: 608, y: 118) > Vector(x: 598, y: 128) > Vector(x: 148, y: 128))
|
||||
Shape: rgb(255,0,0) Path (Vector(x: 608, y: 118) > Vector(x: 608, y: 197) > Vector(x: 598, y: 187) > Vector(x: 598, y: 128))
|
||||
Shape: rgb(255,0,0) Path (Vector(x: 608, y: 197) > Vector(x: 138, y: 197) > Vector(x: 148, y: 187) > Vector(x: 598, y: 187))
|
||||
Shape: rgb(255,0,0) Path (Vector(x: 138, y: 197) > Vector(x: 138, y: 118) > Vector(x: 148, y: 128) > Vector(x: 148, y: 187))
|
||||
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
|
||||
[158, 148]: with
|
||||
[190, 148]: second
|
||||
[238, 148]: level
|
||||
[274, 148]: content
|
||||
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
|
||||
[488, 148]: ,
|
||||
[496, 148]: ending
|
||||
[544, 148]: second
|
||||
Transform: (425, 188) [1, 0, 0, 1, 100, -25]
|
||||
Clip: Path (Vector(x: 325, y: 138) > Vector(x: 488, y: 138) > Vector(x: 488, y: 177) > Vector(x: 325, y: 177))
|
||||
Fill: rgb(95,158,160)
|
||||
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
|
||||
[335, 148]: and
|
||||
[362, 148]: third
|
||||
[396, 148]: level
|
||||
[431, 148]: content
|
||||
Reference in New Issue
Block a user