From b97972eeb669981abfcb083c2416be135ae24990 Mon Sep 17 00:00:00 2001
From: Jasper Krielaars <jkrielaars@gmail.com>
Date: Thu, 4 Jan 2018 08:59:38 +0100
Subject: [PATCH 1/2] updated calculation of border-radius
---
src/Bounds.js | 60 ++++++++++++++++++++++-----------------------------
1 file changed, 26 insertions(+), 34 deletions(-)
diff --git a/src/Bounds.js b/src/Bounds.js
index d54d332..73e8f77 100644
--- a/src/Bounds.js
+++ b/src/Bounds.js
@@ -202,40 +202,32 @@ export const parseBoundCurves = (
borders: Array<Border>,
borderRadius: Array<BorderRadius>
): BoundCurves => {
- const HALF_WIDTH = bounds.width / 2;
- const HALF_HEIGHT = bounds.height / 2;
- const tlh =
- borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
- ? borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width)
- : HALF_WIDTH;
- const tlv =
- borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
- ? borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height)
- : HALF_HEIGHT;
- const trh =
- borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
- ? borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width)
- : HALF_WIDTH;
- const trv =
- borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
- ? borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height)
- : HALF_HEIGHT;
- const brh =
- borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
- ? borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width)
- : HALF_WIDTH;
- const brv =
- borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
- ? borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height)
- : HALF_HEIGHT;
- const blh =
- borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width) < HALF_WIDTH
- ? borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width)
- : HALF_WIDTH;
- const blv =
- borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height) < HALF_HEIGHT
- ? borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height)
- : HALF_HEIGHT;
+ let tlh = borderRadius[CORNER.TOP_LEFT][H].getAbsoluteValue(bounds.width);
+ let tlv = borderRadius[CORNER.TOP_LEFT][V].getAbsoluteValue(bounds.height);
+ let trh = borderRadius[CORNER.TOP_RIGHT][H].getAbsoluteValue(bounds.width);
+ let trv = borderRadius[CORNER.TOP_RIGHT][V].getAbsoluteValue(bounds.height);
+ let brh = borderRadius[CORNER.BOTTOM_RIGHT][H].getAbsoluteValue(bounds.width);
+ let brv = borderRadius[CORNER.BOTTOM_RIGHT][V].getAbsoluteValue(bounds.height);
+ let blh = borderRadius[CORNER.BOTTOM_LEFT][H].getAbsoluteValue(bounds.width);
+ let blv = borderRadius[CORNER.BOTTOM_LEFT][V].getAbsoluteValue(bounds.height);
+
+ const factors = [];
+ factors.push((tlh + trh) / bounds.width);
+ factors.push((blh + brh) / bounds.width);
+ factors.push((tlv + blv) / bounds.height);
+ factors.push((trv + brv) / bounds.height);
+ let maxFactor = Math.max(...factors);
+
+ if (maxFactor > 1) {
+ tlh = tlh / maxFactor;
+ tlv = tlv / maxFactor;
+ trh = trh / maxFactor;
+ trv = trv / maxFactor;
+ brh = brh / maxFactor;
+ brv = brv / maxFactor;
+ blh = blh / maxFactor;
+ blv = blv / maxFactor;
+ }
const topWidth = bounds.width - trh;
const rightHeight = bounds.height - brv;
From 474b5e81a748270ef87e20ea791cdfd020fdab71 Mon Sep 17 00:00:00 2001
From: Niklas von Hertzen <niklasvh@gmail.com>
Date: Sun, 7 Jan 2018 19:19:55 +0800
Subject: [PATCH 2/2] Refactor border-radius update
---
src/Bounds.js | 18 ++++++++--------
tests/reftests/border/radius.html | 34 ++++++++++++++++++++++++-------
2 files changed, 36 insertions(+), 16 deletions(-)
diff --git a/src/Bounds.js b/src/Bounds.js
index 73e8f77..0fbc5de 100644
--- a/src/Bounds.js
+++ b/src/Bounds.js
@@ -216,17 +216,17 @@ export const parseBoundCurves = (
factors.push((blh + brh) / bounds.width);
factors.push((tlv + blv) / bounds.height);
factors.push((trv + brv) / bounds.height);
- let maxFactor = Math.max(...factors);
+ const maxFactor = Math.max(...factors);
if (maxFactor > 1) {
- tlh = tlh / maxFactor;
- tlv = tlv / maxFactor;
- trh = trh / maxFactor;
- trv = trv / maxFactor;
- brh = brh / maxFactor;
- brv = brv / maxFactor;
- blh = blh / maxFactor;
- blv = blv / maxFactor;
+ tlh /= maxFactor;
+ tlv /= maxFactor;
+ trh /= maxFactor;
+ trv /= maxFactor;
+ brh /= maxFactor;
+ brv /= maxFactor;
+ blh /= maxFactor;
+ blv /= maxFactor;
}
const topWidth = bounds.width - trh;
diff --git a/tests/reftests/border/radius.html b/tests/reftests/border/radius.html
index 35634f0..37136e1 100644
--- a/tests/reftests/border/radius.html
+++ b/tests/reftests/border/radius.html
@@ -5,7 +5,7 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../test.js"></script>
<style type="text/css">
- div {
+ .box {
width: 200px;
height: 200px;
display: inline-block;
@@ -63,6 +63,21 @@
border-radius: 200px;
}
+ .gauge{
+ display: inline-block;
+ width: 100px;
+ height: 50px;
+ background: green;
+ margin-bottom: 20px;
+ }
+
+ .gauge1{ border-radius: 25px 25px 0 0 / 25px 25px 0 0; }
+ .gauge2{ border-radius: 100px 100px 0 0 / 50px 50px 0 0; }
+ .gauge3{ border-radius: 100px 100px 0 0 / 100px 100px 0 0; }
+ .gauge4{ border-radius: 300px 100px 0 0 / 100px 100px 0 0; }
+ .gauge5{ border-radius: 400px 400px 50px 50px / 50px 50px 50px 50px; }
+
+
html {
background: #3a84c3;
}
@@ -70,11 +85,16 @@
</head>
<body>
- <div class="box1"> </div>
- <div class="box2"> </div>
- <div class="box3"> </div>
- <div class="box4"> </div>
- <div class="box5"> </div>
- <div class="box6"> </div>
+ <div class="box box1"> </div>
+ <div class="box box2"> </div>
+ <div class="box box3"> </div>
+ <div class="box box4"> </div>
+ <div class="box box5"> </div>
+ <div class="box box6"> </div>
+ <div class="gauge gauge1"></div>
+ <div class="gauge gauge2"></div>
+ <div class="gauge gauge3"></div>
+ <div class="gauge gauge4"></div>
+ <div class="gauge gauge5"></div>
</body>
</html>