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 individual border rendering (Fix #1349)

Browse Source
This commit is contained in:
MoyuScript 2018-01-02 19:46:46 +08:00
parent b844e28116
commit ca2200d270
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/Renderer.js
View File

@ -165,7 +165,7 @@ export default class Renderer {
!container.style.background.backgroundColor.isTransparent() || !container.style.background.backgroundColor.isTransparent() ||
container.style.background.backgroundImage.length; container.style.background.backgroundImage.length;
const renderableBorders = container.style.border.filter( const hasRenderableBorders = container.style.border.some(
border => border =>
border.borderStyle !== BORDER_STYLE.NONE && !border.borderColor.isTransparent() border.borderStyle !== BORDER_STYLE.NONE && !border.borderColor.isTransparent()
); );
@ -186,12 +186,17 @@ export default class Renderer {
}); });
} }
renderableBorders.forEach((border, side) => { container.style.border.forEach((border, side) => {
this.renderBorder(border, side, container.curvedBounds); if (
border.borderStyle !== BORDER_STYLE.NONE &&
!border.borderColor.isTransparent()
) {
this.renderBorder(border, side, container.curvedBounds);
}
}); });
}; };
if (HAS_BACKGROUND || renderableBorders.length) { if (HAS_BACKGROUND || hasRenderableBorders) {
const paths = container.parent ? container.parent.getClipPaths() : []; const paths = container.parent ? container.parent.getClipPaths() : [];
if (paths.length) { if (paths.length) {
this.target.clip(paths, callback); this.target.clip(paths, callback);

8
tests/reftests/border/solid.html
View File

@ -12,6 +12,7 @@
margin: 10px; margin: 10px;
background:#6F428C; background:#6F428C;
border-style: solid; border-style: solid;
border-width: 0;
} }
.box1 { .box1 {
@ -33,6 +34,12 @@
border-color: green; border-color: green;
} }
.box5 {
border-style: none;
border-bottom: 50px solid #807d32;
border-bottom-width: 50px;
}
html { html {
background: #3a84c3; background: #3a84c3;
} }
@ -43,5 +50,6 @@
<div class="box2">&nbsp;</div> <div class="box2">&nbsp;</div>
<div class="box3">&nbsp;</div> <div class="box3">&nbsp;</div>
<div class="box4">&nbsp;</div> <div class="box4">&nbsp;</div>
<div class="box5">&nbsp;</div>
</body> </body>
</html> </html>