Fix some issues with rounded borders (#16051)

* Some fixes for rounded borders

* Change files

* Image snaphots

Author: acoates-ms

change/react-native-windows-621a7e8e-3a57-4835-8f3c-bf3dce559da8.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Some fixes for rounded borders",
+  "packageName": "react-native-windows",
+  "email": "30809111+acoates-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-views-can-have-outlines-2-snap.png

@@ -26,16 +26,18 @@ bool isColorMeaningful(
 void pixelRoundBorderRadii(facebook::react::BorderRadii &borderRadii, float scaleFactor) noexcept {
   // Always round radii down to avoid spikey circles
   borderRadii.topLeft = {
-      std::floor(borderRadii.topLeft.horizontal * scaleFactor), std::floor(borderRadii.topLeft.vertical * scaleFactor)};
+      .vertical = std::floor(borderRadii.topLeft.vertical * scaleFactor),
+      .horizontal = std::floor(borderRadii.topLeft.horizontal * scaleFactor)};
   borderRadii.topRight = {
-      std::floor(borderRadii.topRight.horizontal * scaleFactor),
-      std::floor(borderRadii.topRight.vertical * scaleFactor)};
+      .vertical = std::floor(borderRadii.topRight.vertical * scaleFactor),
+      .horizontal = std::floor(borderRadii.topRight.horizontal * scaleFactor)};
   borderRadii.bottomLeft = {
-      std::floor(borderRadii.bottomLeft.horizontal * scaleFactor),
-      std::floor(borderRadii.bottomLeft.vertical * scaleFactor)};
+      .vertical = std::floor(borderRadii.bottomLeft.vertical * scaleFactor),
+      .horizontal = std::floor(borderRadii.bottomLeft.horizontal * scaleFactor)};
   borderRadii.bottomRight = {
-      std::floor(borderRadii.bottomRight.horizontal * scaleFactor),
-      std::floor(borderRadii.bottomRight.vertical * scaleFactor)};
+      .vertical = std::floor(borderRadii.bottomRight.vertical * scaleFactor),
+      .horizontal = std::floor(borderRadii.bottomRight.horizontal * scaleFactor),
+  };
 }
 
 void scaleAndPixelRoundBorderWidths(
@@ -268,30 +270,14 @@ RoundedPathParameters GenerateRoundedPathParameters(
     return result;
   }
 
-  float totalTopRadius = baseRadius.topLeft.horizontal + baseRadius.topRight.horizontal;
-  float totalRightRadius = baseRadius.topRight.vertical + baseRadius.bottomRight.vertical;
-  float totalBottomRadius = baseRadius.bottomRight.horizontal + baseRadius.bottomLeft.horizontal;
-  float totalLeftRadius = baseRadius.bottomLeft.vertical + baseRadius.topLeft.vertical;
-
-  float maxHorizontalRadius = std::max(totalTopRadius, totalBottomRadius);
-  float maxVerticalRadius = std::max(totalLeftRadius, totalRightRadius);
-
-  double totalWidth = inset.left + inset.right + pathSize.width;
-  double totalHeight = inset.top + inset.bottom + pathSize.height;
-
-  float scaleHoriz = static_cast<float>(maxHorizontalRadius / totalWidth);
-  float scaleVert = static_cast<float>(maxVerticalRadius / totalHeight);
-
-  float maxScale = std::max(1.0f, std::max(scaleHoriz, scaleVert));
-
-  result.topLeftRadiusX = std::max(0.0f, baseRadius.topLeft.horizontal / maxScale - inset.left);
-  result.topLeftRadiusY = std::max(0.0f, baseRadius.topLeft.vertical / maxScale - inset.top);
-  result.topRightRadiusX = std::max(0.0f, baseRadius.topRight.horizontal / maxScale - inset.right);
-  result.topRightRadiusY = std::max(0.0f, baseRadius.topRight.vertical / maxScale - inset.top);
-  result.bottomRightRadiusX = std::max(0.0f, baseRadius.bottomRight.horizontal / maxScale - inset.right);
-  result.bottomRightRadiusY = std::max(0.0f, baseRadius.bottomRight.vertical / maxScale - inset.bottom);
-  result.bottomLeftRadiusX = std::max(0.0f, baseRadius.bottomLeft.horizontal / maxScale - inset.left);
-  result.bottomLeftRadiusY = std::max(0.0f, baseRadius.bottomLeft.vertical / maxScale - inset.bottom);
+  result.topLeftRadiusX = std::max(0.0f, baseRadius.topLeft.horizontal - inset.left);
+  result.topLeftRadiusY = std::max(0.0f, baseRadius.topLeft.vertical - inset.top);
+  result.topRightRadiusX = std::max(0.0f, baseRadius.topRight.horizontal - inset.right);
+  result.topRightRadiusY = std::max(0.0f, baseRadius.topRight.vertical - inset.top);
+  result.bottomRightRadiusX = std::max(0.0f, baseRadius.bottomRight.horizontal - inset.right);
+  result.bottomRightRadiusY = std::max(0.0f, baseRadius.bottomRight.vertical - inset.bottom);
+  result.bottomLeftRadiusX = std::max(0.0f, baseRadius.bottomLeft.horizontal - inset.left);
+  result.bottomLeftRadiusY = std::max(0.0f, baseRadius.bottomLeft.vertical - inset.bottom);
 
   return result;
 }
@@ -473,8 +459,8 @@ void SetBorderLayerProperties(
     /*
                 else
                 {
-                        SetBorderLayerPropertiesCommon(theme, comContext, layer, shape, borderTexture, textureRect,
-       anchorPoint, anchorOffset, strokeWidth, borderColor, borderStyle);
+      SetBorderLayerPropertiesCommon(theme, compContext, layer, shape, borderTexture, textureRect,
+            anchorPoint, anchorOffset, size, relativeSizeAdjustment, strokeWidth, borderColor, borderStyle);
                 }
     */
   }
@@ -516,11 +502,11 @@ void DrawAllBorderLayers(
       spTextures[0], // Target Layer, Source Texture, Target Texture
       {0,
        0,
-       borderRadii.topLeft.vertical + borderWidths.left,
-       borderRadii.topLeft.horizontal + borderWidths.top}, // Texture Left, Top, Width, Height
+       borderRadii.topLeft.horizontal + borderWidths.left,
+       borderRadii.topLeft.vertical + borderWidths.top}, // Texture Left, Top, Width, Height
       {AnchorPosition::Left, AnchorPosition::Top}, // Layer Anchor Point
       {0, 0}, // Layer Anchor Offset
-      {borderRadii.topLeft.vertical + borderWidths.left, borderRadii.topLeft.horizontal + borderWidths.top}, // size
+      {borderRadii.topLeft.horizontal + borderWidths.left, borderRadii.topLeft.vertical + borderWidths.top}, // size
       {0.0f, 0.0f}, // relativeSize
       std::max(borderWidths.left, borderWidths.top),
       borderColors.left ? borderColors.left : borderColors.top,
@@ -533,13 +519,13 @@ void DrawAllBorderLayers(
       spBorderLayers[1],
       shape,
       spTextures[1],
-      {borderRadii.topLeft.vertical + borderWidths.left,
+      {borderRadii.topLeft.horizontal + borderWidths.left,
        0,
-       textureWidth - (borderRadii.topRight.vertical + borderWidths.right),
+       textureWidth - (borderRadii.topRight.horizontal + borderWidths.right),
        borderWidths.top},
       {AnchorPosition::Left, AnchorPosition::Top},
-      {borderRadii.topLeft.vertical + borderWidths.left, 0},
-      {-(borderRadii.topLeft.vertical + borderWidths.left + borderRadii.topRight.vertical + borderWidths.right),
+      {borderRadii.topLeft.horizontal + borderWidths.left, 0},
+      {-(borderRadii.topLeft.horizontal + borderWidths.left + borderRadii.topRight.horizontal + borderWidths.right),
        borderWidths.top}, // size
       {1.0f, 0.0f}, // relativeSize
       borderWidths.top,
@@ -553,13 +539,13 @@ void DrawAllBorderLayers(
       spBorderLayers[2],
       shape,
       spTextures[2],
-      {textureWidth - (borderRadii.topRight.vertical + borderWidths.right),
+      {textureWidth - (borderRadii.topRight.horizontal + borderWidths.right),
        0,
        textureWidth,
-       borderRadii.topRight.horizontal + borderWidths.top},
+       borderRadii.topRight.vertical + borderWidths.top},
       {AnchorPosition::Right, AnchorPosition::Top},
-      {-(borderRadii.topRight.vertical + borderWidths.right), 0},
-      {borderRadii.topRight.vertical + borderWidths.right, borderRadii.topRight.horizontal + borderWidths.top},
+      {-(borderRadii.topRight.horizontal + borderWidths.right), 0},
+      {borderRadii.topRight.horizontal + borderWidths.right, borderRadii.topRight.vertical + borderWidths.top},
       {0.0f, 0.0f},
       std::max(borderWidths.right, borderWidths.top),
       borderColors.right ? borderColors.right : borderColors.top,
@@ -573,14 +559,14 @@ void DrawAllBorderLayers(
       shape,
       spTextures[3],
       {textureWidth - borderWidths.right,
-       borderWidths.top + borderRadii.topRight.horizontal,
+       borderWidths.top + borderRadii.topRight.vertical,
        textureWidth,
-       textureHeight - (borderWidths.bottom + borderRadii.bottomRight.horizontal)},
+       textureHeight - (borderWidths.bottom + borderRadii.bottomRight.vertical)},
       {AnchorPosition::Right, AnchorPosition::Top},
-      {-borderWidths.right, borderWidths.top + borderRadii.topRight.horizontal},
+      {-borderWidths.right, borderWidths.top + borderRadii.topRight.vertical},
       {borderWidths.right,
-       -(borderWidths.top + borderRadii.topRight.horizontal + borderWidths.bottom +
-         borderRadii.bottomRight.horizontal)}, // size
+       -(borderWidths.top + borderRadii.topRight.vertical + borderWidths.bottom +
+         borderRadii.bottomRight.vertical)}, // size
       {0.0f, 1.0f},
       borderWidths.right,
       borderColors.right,
@@ -593,14 +579,14 @@ void DrawAllBorderLayers(
       spBorderLayers[4],
       shape,
       spTextures[4],
-      {textureWidth - (borderWidths.right + borderRadii.bottomRight.vertical),
-       textureHeight - (borderWidths.bottom + borderRadii.bottomRight.horizontal),
+      {textureWidth - (borderWidths.right + borderRadii.bottomRight.horizontal),
+       textureHeight - (borderWidths.bottom + borderRadii.bottomRight.vertical),
        textureWidth,
        textureHeight},
       {AnchorPosition::Right, AnchorPosition::Bottom},
-      {-(borderWidths.right + borderRadii.bottomRight.vertical),
-       -(borderWidths.bottom + borderRadii.bottomRight.horizontal)},
-      {borderWidths.right + borderRadii.bottomRight.vertical, borderWidths.bottom + borderRadii.bottomRight.horizontal},
+      {-(borderWidths.right + borderRadii.bottomRight.horizontal),
+       -(borderWidths.bottom + borderRadii.bottomRight.vertical)},
+      {borderWidths.right + borderRadii.bottomRight.horizontal, borderWidths.bottom + borderRadii.bottomRight.vertical},
       {0, 0},
       std::max(borderWidths.right, borderWidths.bottom),
       borderColors.right ? borderColors.right : borderColors.bottom,
@@ -613,13 +599,14 @@ void DrawAllBorderLayers(
       spBorderLayers[5],
       shape,
       spTextures[5],
-      {borderWidths.left + borderRadii.bottomLeft.vertical,
+      {borderWidths.left + borderRadii.bottomLeft.horizontal,
        textureHeight - borderWidths.bottom,
-       textureWidth - (borderWidths.right + borderRadii.bottomRight.vertical),
+       textureWidth - (borderWidths.right + borderRadii.bottomRight.horizontal),
        textureHeight},
       {AnchorPosition::Left, AnchorPosition::Bottom},
-      {borderWidths.left + borderRadii.bottomLeft.vertical, -borderWidths.bottom},
-      {-(borderWidths.right + borderRadii.bottomLeft.vertical + borderWidths.left + borderRadii.bottomRight.vertical),
+      {borderWidths.left + borderRadii.bottomLeft.horizontal, -borderWidths.bottom},
+      {-(borderWidths.right + borderRadii.bottomLeft.horizontal + borderWidths.left +
+         borderRadii.bottomRight.horizontal),
        borderWidths.bottom},
       {1.0f, 0.0f},
       borderWidths.bottom,
@@ -634,12 +621,12 @@ void DrawAllBorderLayers(
       shape,
       spTextures[6],
       {0,
-       textureHeight - (borderWidths.bottom + borderRadii.bottomLeft.horizontal),
-       borderWidths.left + borderRadii.bottomLeft.vertical,
+       textureHeight - (borderWidths.bottom + borderRadii.bottomLeft.vertical),
+       borderWidths.left + borderRadii.bottomLeft.horizontal,
        textureHeight},
       {AnchorPosition::Left, AnchorPosition::Bottom},
-      {0, -(borderWidths.bottom + borderRadii.bottomLeft.horizontal)},
-      {borderWidths.left + borderRadii.bottomLeft.vertical, borderWidths.bottom + borderRadii.bottomLeft.horizontal},
+      {0, -(borderWidths.bottom + borderRadii.bottomLeft.vertical)},
+      {borderWidths.left + borderRadii.bottomLeft.horizontal, borderWidths.bottom + borderRadii.bottomLeft.vertical},
       {0, 0},
       std::max(borderWidths.left, borderWidths.bottom),
       borderColors.left ? borderColors.left : borderColors.bottom,
@@ -653,13 +640,13 @@ void DrawAllBorderLayers(
       shape,
       spTextures[7],
       {0,
-       borderWidths.top + borderRadii.topLeft.horizontal,
+       borderWidths.top + borderRadii.topLeft.vertical,
        borderWidths.left,
-       textureHeight - (borderWidths.bottom + borderRadii.bottomLeft.horizontal)},
+       textureHeight - (borderWidths.bottom + borderRadii.bottomLeft.vertical)},
       {AnchorPosition::Left, AnchorPosition::Top},
-      {0, borderWidths.top + borderRadii.topLeft.horizontal},
+      {0, borderWidths.top + borderRadii.topLeft.vertical},
       {borderWidths.left,
-       -(borderWidths.top + borderRadii.topLeft.horizontal + borderWidths.bottom + borderRadii.bottomLeft.horizontal)},
+       -(borderWidths.top + borderRadii.topLeft.vertical + borderWidths.bottom + borderRadii.bottomLeft.vertical)},
       {0, 1},
       borderWidths.left,
       borderColors.left,

packages/e2e-test-app-fabric/test/__image_snapshots__/view-component-test-test-ts-view-tests-views-can-have-rounded-borders-percentages-2-snap.png

@@ -2208,7 +2208,6 @@ struct CompContext : winrt::implements<
   winrt::com_ptr<ID3D11Device> m_d3dDevice;
   winrt::com_ptr<ID2D1Device> m_d2dDevice;
   typename TTypeRedirects::CompositionGraphicsDevice m_compositionGraphicsDevice{nullptr};
-  winrt::com_ptr<ID3D11DeviceContext> m_d3dDeviceContext;
 };
 
 winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual