Skip to content

Commit 650ead6

Browse files
niklasvhniklasvh
committed
Fix transform nesting
1 parent b35fcae commit 650ead6

4 files changed

Lines changed: 58 additions & 4 deletions

File tree

‎build/html2canvas.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ window.html2canvas = function(nodeList, options) {
5757
options.onrendered(canvas);
5858
}
5959
return canvas;
60-
});
60+
});
6161
};
6262

6363
function renderDocument(document, options, windowWidth, windowHeight) {
@@ -625,7 +625,7 @@ NodeContainer.prototype.parseBounds = function() {
625625
};
626626

627627
NodeContainer.prototype.hasTransform = function() {
628-
return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0";
628+
return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0" || (this.parent && this.parent.hasTransform());
629629
};
630630

631631
NodeContainer.prototype.getValue = function() {

‎build/html2canvas.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/nodecontainer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@ NodeContainer.prototype.parseBounds = function() {
195195
};
196196

197197
NodeContainer.prototype.hasTransform = function() {
198-
return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0";
198+
return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0" || (this.parent && this.parent.hasTransform());
199199
};
200200

201201
NodeContainer.prototype.getValue = function() {

‎tests/cases/transform/rotate.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Rotation transform tests</title>
5+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
6+
<script type="text/javascript" src="../../test.js"></script>
7+
<style>
8+
.container {
9+
position: relative;
10+
}
11+
.image1 {
12+
position: absolute;
13+
left: 100px;
14+
-webkit-transform: rotate(-45deg); /* Chrome, Safari 3.1+ */
15+
-moz-transform: rotate(-45deg); /* Firefox 3.5-15 */
16+
-ms-transform: rotate(-45deg); /* IE 9 */
17+
-o-transform: rotate(-45deg); /* Opera 10.50-12.00 */
18+
transform:rotate(-45deg);
19+
}
20+
.image2 {
21+
position: absolute;
22+
left: 634px;
23+
-webkit-transform: rotate(90deg); /* Chrome, Safari 3.1+ */
24+
-moz-transform: rotate(90deg); /* Firefox 3.5-15 */
25+
-ms-transform: rotate(90deg); /* IE 9 */
26+
-o-transform: rotate(90deg); /* Opera 10.50-12.00 */
27+
transform:rotate(90deg);
28+
}
29+
.image3 {
30+
position: absolute;
31+
top: 250px;
32+
left: 100px;
33+
-webkit-transform: rotate(45deg); /* Chrome, Safari 3.1+ */
34+
-moz-transform: rotate(45deg); /* Firefox 3.5-15 */
35+
-ms-transform: rotate(45deg); /* IE 9 */
36+
-o-transform: rotate(45deg); /* Opera 10.50-12.00 */
37+
transform:rotate(45deg);
38+
}
39+
</style
40+
</head>
41+
<body>
42+
<div class="container">
43+
<div class="image1">
44+
<img src="../../assets/image.jpg" style="width: 200px; height: 200px;">
45+
</div>
46+
<div class="image2">
47+
<img src="../../assets/image2.jpg" style="width: 50px; height: 200px;">
48+
</div>
49+
<div class="image3">
50+
<img src="../../assets/image.jpg" style="width: 100px; height: 200px;">
51+
</div>
52+
</div>
53+
</body>
54+
</html>

0 commit comments

Comments
 (0)