Merge pull request #1121 from openkraken/fix/border-radius-one-value

fix: border radius of one percentage value
openkraken · Jan 21, 2022 · f76df41 · f76df41
2 parents 6e8e66c + 596217d
commit f76df41
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 6 deletions.
diff --git a/integration_tests/snapshots/css/css-backgrounds/border-radius.ts.bb23e06d1.png b/integration_tests/snapshots/css/css-backgrounds/border-radius.ts.bb23e06d1.png
diff --git a/integration_tests/specs/css/css-backgrounds/border-radius.ts b/integration_tests/specs/css/css-backgrounds/border-radius.ts
@@ -71,6 +71,24 @@ describe('border_radius', () => {
     await snapshot();
   });
 
+  it('should work with percentage of one value on element of width and height not equal', async () => {
+    let div;
+    div = createElement(
+      'div',
+      {
+        style: {
+          width: '200px',
+          height: '100px',
+          backgroundColor: 'green',
+          borderRadius: '100%'
+        },
+      },
+    );
+
+    BODY.appendChild(div);
+    await snapshot();
+  });
+
   it('should work with percentage of two values', async () => {
     let div;
     div = createElement(

diff --git a/kraken/lib/src/css/border.dart b/kraken/lib/src/css/border.dart
@@ -316,12 +316,14 @@ class CSSBorderRadius {
     if (radius.isNotEmpty) {
       // border-top-left-radius: horizontal vertical
       List<String> values = radius.split(_splitRegExp);
-      if (values.length == 1) {
-        CSSLengthValue circular = CSSLength.parseLength(values[0], renderStyle, propertyName, Axis.horizontal);
-        return CSSBorderRadius(circular, circular);
-      } else if (values.length == 2) {
-        CSSLengthValue x = CSSLength.parseLength(values[0], renderStyle, propertyName, Axis.horizontal);
-        CSSLengthValue y = CSSLength.parseLength(values[1], renderStyle, propertyName, Axis.vertical);
+      if (values.length == 1 || values.length == 2) {
+        String horizontalRadius = values[0];
+        // The first value is the horizontal radius, the second the vertical radius.
+        // If the second value is omitted it is copied from the first.
+        // https://www.w3.org/TR/css-backgrounds-3/#border-radius
+        String verticalRadius = values.length == 1 ? values[0] : values[1];
+        CSSLengthValue x = CSSLength.parseLength(horizontalRadius, renderStyle, propertyName, Axis.horizontal);
+        CSSLengthValue y = CSSLength.parseLength(verticalRadius, renderStyle, propertyName, Axis.vertical);
         return CSSBorderRadius(x, y);
       }
     }