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 transform nesting

Browse Source
This commit is contained in:
MoyuScript 2014-03-15 14:30:26 +02:00
parent be59e0ee19
commit bfe31cf71f
4 changed files with 58 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build/html2canvas.js
View File

@ -625,7 +625,7 @@ NodeContainer.prototype.parseBounds = function() {
}; };
NodeContainer.prototype.hasTransform = function() { NodeContainer.prototype.hasTransform = function() {
return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0"; return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0" || (this.parent && this.parent.hasTransform());
}; };
NodeContainer.prototype.getValue = function() { NodeContainer.prototype.getValue = function() {

2
build/html2canvas.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/nodecontainer.js
View File

@ -195,7 +195,7 @@ NodeContainer.prototype.parseBounds = function() {
}; };
NodeContainer.prototype.hasTransform = function() { NodeContainer.prototype.hasTransform = function() {
return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0"; return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0" || (this.parent && this.parent.hasTransform());
}; };
NodeContainer.prototype.getValue = function() { NodeContainer.prototype.getValue = function() {

54
tests/cases/transform/rotate.html Normal file
View 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>