From ea6062c85b5b9f4cc6f7da7591f164737d8889f6 Mon Sep 17 00:00:00 2001
From: Niklas von Hertzen <niklasvh@gmail.com>
Date: Tue, 2 Jan 2018 19:46:46 +0800
Subject: [PATCH] Fix individual border rendering (Fix #1349)

---
 src/Renderer.js                  | 13 +++++++++----
 tests/reftests/border/solid.html |  8 ++++++++
 2 files changed, 17 insertions(+), 4 deletions(-)

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