diff --git a/src/Renderer.js b/src/Renderer.js index 322d066..fee635a 100644 --- a/src/Renderer.js +++ b/src/Renderer.js @@ -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) => { - this.renderBorder(border, side, container.curvedBounds); + 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); diff --git a/tests/reftests/border/solid.html b/tests/reftests/border/solid.html index faab8a7..4f3acb4 100644 --- a/tests/reftests/border/solid.html +++ b/tests/reftests/border/solid.html @@ -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 @@
 
 
 
+