diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp index 22d543fcd82..cd785ced9bc 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp +++ b/packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp @@ -447,54 +447,52 @@ static BorderRadii ensureNoOverlap(const BorderRadii& radii, const Size& size) { // the used values of all border radii until none of them overlap." // Source: https://www.w3.org/TR/css-backgrounds-3/#corner-overlap - auto insets = EdgeInsets{ - .left = radii.topLeft.horizontal + radii.bottomLeft.horizontal, - .top = radii.topLeft.vertical + radii.topRight.vertical, - .right = radii.topRight.horizontal + radii.bottomRight.horizontal, - .bottom = radii.bottomLeft.vertical + radii.bottomRight.vertical, - }; + float leftEdgeRadii = radii.topLeft.vertical + radii.bottomLeft.vertical; + float topEdgeRadii = radii.topLeft.horizontal + radii.topRight.horizontal; + float rightEdgeRadii = radii.topRight.vertical + radii.bottomRight.vertical; + float bottomEdgeRadii = + radii.bottomLeft.horizontal + radii.bottomRight.horizontal; - auto insetsScale = EdgeInsets{ - .left = - insets.left > 0 ? std::min((Float)1.0, size.height / insets.left) : 0, - .top = insets.top > 0 ? std::min((Float)1.0, size.width / insets.top) : 0, - .right = insets.right > 0 - ? std::min((Float)1.0, size.height / insets.right) - : 0, - .bottom = insets.bottom > 0 - ? std::min((Float)1.0, size.width / insets.bottom) - : 0, - }; + float leftEdgeRadiiScale = + (leftEdgeRadii > 0) ? std::min(size.height / leftEdgeRadii, (Float)1) : 0; + float topEdgeRadiiScale = + (topEdgeRadii > 0) ? std::min(size.width / topEdgeRadii, (Float)1) : 0; + float rightEdgeRadiiScale = (rightEdgeRadii > 0) + ? std::min(size.height / rightEdgeRadii, (Float)1) + : 0; + float bottomEdgeRadiiScale = (bottomEdgeRadii > 0) + ? std::min(size.width / bottomEdgeRadii, (Float)1) + : 0; return BorderRadii{ .topLeft = {static_cast( - radii.topLeft.horizontal * - std::min(insetsScale.top, insetsScale.left)), - static_cast( radii.topLeft.vertical * - std::min(insetsScale.top, insetsScale.left))}, + std::min(topEdgeRadiiScale, leftEdgeRadiiScale)), + static_cast( + radii.topLeft.horizontal * + std::min(topEdgeRadiiScale, leftEdgeRadiiScale))}, .topRight = {static_cast( - radii.topRight.horizontal * - std::min(insetsScale.top, insetsScale.right)), - static_cast( radii.topRight.vertical * - std::min(insetsScale.top, insetsScale.right))}, + std::min(topEdgeRadiiScale, rightEdgeRadiiScale)), + static_cast( + radii.topRight.horizontal * + std::min(topEdgeRadiiScale, rightEdgeRadiiScale))}, .bottomLeft = {static_cast( - radii.bottomLeft.horizontal * - std::min(insetsScale.bottom, insetsScale.left)), - static_cast( radii.bottomLeft.vertical * - std::min(insetsScale.bottom, insetsScale.left))}, + std::min(bottomEdgeRadiiScale, leftEdgeRadiiScale)), + static_cast( + radii.bottomLeft.horizontal * + std::min(bottomEdgeRadiiScale, leftEdgeRadiiScale))}, .bottomRight = {static_cast( - radii.bottomRight.horizontal * - std::min(insetsScale.bottom, insetsScale.right)), - static_cast( radii.bottomRight.vertical * - std::min(insetsScale.bottom, insetsScale.right))}, + std::min(bottomEdgeRadiiScale, rightEdgeRadiiScale)), + static_cast( + radii.bottomRight.horizontal * + std::min(bottomEdgeRadiiScale, rightEdgeRadiiScale))}, }; } @@ -503,17 +501,17 @@ static BorderRadii radiiPercentToPoint( const Size& size) { return BorderRadii{ .topLeft = - {radii.topLeft.resolve(size.width), - radii.topLeft.resolve(size.height)}, + {radii.topLeft.resolve(size.height), + radii.topLeft.resolve(size.width)}, .topRight = - {radii.topRight.resolve(size.width), - radii.topRight.resolve(size.height)}, + {radii.topRight.resolve(size.height), + radii.topRight.resolve(size.width)}, .bottomLeft = - {radii.bottomLeft.resolve(size.width), - radii.bottomLeft.resolve(size.height)}, + {radii.bottomLeft.resolve(size.height), + radii.bottomLeft.resolve(size.width)}, .bottomRight = - {radii.bottomRight.resolve(size.width), - radii.bottomRight.resolve(size.height)}, + {radii.bottomRight.resolve(size.height), + radii.bottomRight.resolve(size.width)}, }; }