Fix individual border rendering (Fix niklasvh#1349)

Author: niklasvh

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);

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 @@
     <div class="box2">&nbsp;</div>
     <div class="box3">&nbsp;</div>
     <div class="box4">&nbsp;</div>
+    <div class="box5">&nbsp;</div>
   </body>
 </html>