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 new file mode 100644 index 0000000000..64275bf4e5 Binary files /dev/null and b/integration_tests/snapshots/css/css-backgrounds/border-radius.ts.bb23e06d1.png differ diff --git a/integration_tests/specs/css/css-backgrounds/border-radius.ts b/integration_tests/specs/css/css-backgrounds/border-radius.ts index 7d9d80d370..6b1df98cad 100644 --- 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 index 074b100cf5..0351b05e90 100644 --- 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 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); } }