Fix individual border rendering (Fix #1349)

This commit is contained in:
Niklas von Hertzen 2018-01-02 19:46:46 +08:00
parent 9a4a506366
commit ea6062c85b
2 changed files with 17 additions and 4 deletions

View File

@ -165,7 +165,7 @@ export default class Renderer {
!container.style.background.backgroundColor.isTransparent() ||
container.style.background.backgroundImage.length;
const renderableBorders = container.style.border.filter(
const hasRenderableBorders = container.style.border.some(
border =>
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) => {
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() : [];
if (paths.length) {
this.target.clip(paths, callback);

View File

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