Skip to content

Commit fc800bf

Browse files
niklasvhniklasvh
committed
Partial fix for borders
1 parent 36648af commit fc800bf

4 files changed

Lines changed: 18 additions & 6 deletions

File tree

‎dist/html2canvas.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -730,7 +730,6 @@ function createWindowClone(ownerDocument, containerDocument, width, height, opti
730730
}
731731
documentClone.replaceChild(options.javascriptEnabled === true ? documentClone.adoptNode(documentElement) : removeScriptNodes(documentClone.adoptNode(documentElement)), documentClone.documentElement);
732732
documentClone.close();
733-
734733
});
735734
}
736735

@@ -2124,9 +2123,9 @@ function calculateCurvePoints(bounds, borderRadius, borders) {
21242123
topRightOuter: getCurvePoints(x + topWidth, y, trh, trv).topRight.subdivide(0.5),
21252124
topRightInner: getCurvePoints(x + Math.min(topWidth, width + borders[3].width), y + borders[0].width, (topWidth > width + borders[3].width) ? 0 :trh - borders[3].width, trv - borders[0].width).topRight.subdivide(0.5),
21262125
bottomRightOuter: getCurvePoints(x + bottomWidth, y + rightHeight, brh, brv).bottomRight.subdivide(0.5),
2127-
bottomRightInner: getCurvePoints(x + Math.min(bottomWidth, width + borders[3].width), y + Math.min(rightHeight, height + borders[0].width), Math.max(0, brh - borders[1].width), Math.max(0, brv - borders[2].width)).bottomRight.subdivide(0.5),
2126+
bottomRightInner: getCurvePoints(x + Math.min(bottomWidth, width - borders[3].width), y + Math.min(rightHeight, height + borders[0].width), Math.max(0, brh - borders[1].width), brv - borders[2].width).bottomRight.subdivide(0.5),
21282127
bottomLeftOuter: getCurvePoints(x, y + leftHeight, blh, blv).bottomLeft.subdivide(0.5),
2129-
bottomLeftInner: getCurvePoints(x + borders[3].width, y + leftHeight, Math.max(0, blh - borders[3].width), Math.max(0, blv - borders[2].width)).bottomLeft.subdivide(0.5)
2128+
bottomLeftInner: getCurvePoints(x + borders[3].width, y + leftHeight, Math.max(0, blh - borders[3].width), blv - borders[2].width).bottomLeft.subdivide(0.5)
21302129
};
21312130
}
21322131

‎dist/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/nodeparser.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -550,9 +550,9 @@ function calculateCurvePoints(bounds, borderRadius, borders) {
550550
topRightOuter: getCurvePoints(x + topWidth, y, trh, trv).topRight.subdivide(0.5),
551551
topRightInner: getCurvePoints(x + Math.min(topWidth, width + borders[3].width), y + borders[0].width, (topWidth > width + borders[3].width) ? 0 :trh - borders[3].width, trv - borders[0].width).topRight.subdivide(0.5),
552552
bottomRightOuter: getCurvePoints(x + bottomWidth, y + rightHeight, brh, brv).bottomRight.subdivide(0.5),
553-
bottomRightInner: getCurvePoints(x + Math.min(bottomWidth, width + borders[3].width), y + Math.min(rightHeight, height + borders[0].width), Math.max(0, brh - borders[1].width), Math.max(0, brv - borders[2].width)).bottomRight.subdivide(0.5),
553+
bottomRightInner: getCurvePoints(x + Math.min(bottomWidth, width - borders[3].width), y + Math.min(rightHeight, height + borders[0].width), Math.max(0, brh - borders[1].width), brv - borders[2].width).bottomRight.subdivide(0.5),
554554
bottomLeftOuter: getCurvePoints(x, y + leftHeight, blh, blv).bottomLeft.subdivide(0.5),
555-
bottomLeftInner: getCurvePoints(x + borders[3].width, y + leftHeight, Math.max(0, blh - borders[3].width), Math.max(0, blv - borders[2].width)).bottomLeft.subdivide(0.5)
555+
bottomLeftInner: getCurvePoints(x + borders[3].width, y + leftHeight, Math.max(0, blh - borders[3].width), blv - borders[2].width).bottomLeft.subdivide(0.5)
556556
};
557557
}
558558

‎tests/cases/border/radius.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,15 +46,28 @@
4646
background-clip: padding-box;
4747
}
4848

49+
.box5 {
50+
margin: 100px;
51+
border-width: 50px;
52+
border-left-color: transparent;
53+
border-top-color: red;
54+
border-top-width: 10px;
55+
border-right-color: green;
56+
border-radius: 25px;
57+
background-clip: padding-box;
58+
}
59+
4960
html {
5061
background: #3a84c3;
5162
}
5263
</style>
5364
</head>
5465
<body>
66+
5567
<div class="box1">&nbsp;</div>
5668
<div class="box2">&nbsp;</div>
5769
<div class="box3">&nbsp;</div>
5870
<div class="box4">&nbsp;</div>
71+
<div class="box5">&nbsp;</div>
5972
</body>
6073
</html>

0 commit comments

Comments
 (0)