mirror of
https://github.com/niklasvh/html2canvas.git
synced 2023-08-10 21:13:10 +03:00
Deploying to gh-pages from @ 7c3269bdbe 🚀
This commit is contained in:
niklasvh
48
tests/reftests/transform/nested.html
Normal file
48
tests/reftests/transform/nested.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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;
|
||||
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial;
|
||||
}
|
||||
</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>
|
||||
58
tests/reftests/transform/rotate.html
Normal file
58
tests/reftests/transform/rotate.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<!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);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial;
|
||||
}
|
||||
</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>
|
||||
48
tests/reftests/transform/translate.html
Normal file
48
tests/reftests/transform/translate.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial;
|
||||
}
|
||||
</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>
|
||||
Reference in New Issue
Block a user