CSS calc() percentage post-layout offset support (#56170)

Summary:

Add native support for CSS calc() expressions containing percentages (e.g., `calc(50% - 20px)`). The JS side produces `{__rsdCalc: true, percent, offset}` objects; this diff adds the C++ side that consumes them.

**YogaStylableProps:**
- `CalcPropId` enum for width/height/min/max dimension properties
- `calcOffsets[]` array storing point offsets indexed by CalcPropId
- `trySetCalcDimension()` parses `__rsdCalc` map objects from RawValue, sets percentage on Yoga and stores point offset
- Width/height/min/max cases in `setProp` call `trySetCalcDimension` before falling back to standard handling

**YogaLayoutableShadowNode:**
- `applyCalcOffsets()` adjusts layout metrics after Yoga layout, adding point offsets to percentage-resolved dimensions
- Called in `layout()` after `layoutMetricsFromYogaNode` when `hasCalcOffsets()` is true

**LayoutTest:**
- `CalcOffsetTest` verifies calc(50% - 20px) in 200px parent → 80px child width
- Verifies calc(100% - 64px) → 136px height


Changelog:
[General][Added] - Added initial support for calc CSS property

Differential Revision: D97422357

Author: MazinZ

packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp

@@ -688,6 +688,59 @@ static EdgeInsets calculateOverflowInset(
   return overflowInset;
 }
 
+static void applyCalcOffsets(
+    LayoutMetrics& metrics,
+    const YogaStylableProps& props) {
+  // Width
+  float widthOffset = props.calcOffsets[static_cast<size_t>(CalcPropId::Width)];
+  if (widthOffset != 0.0f) {
+    metrics.frame.size.width += widthOffset;
+  }
+  // Height
+  float heightOffset =
+      props.calcOffsets[static_cast<size_t>(CalcPropId::Height)];
+  if (heightOffset != 0.0f) {
+    metrics.frame.size.height += heightOffset;
+  }
+  // MinWidth: clamp width from below
+  float minWidthOffset =
+      props.calcOffsets[static_cast<size_t>(CalcPropId::MinWidth)];
+  if (minWidthOffset != 0.0f) {
+    // Yoga already applied minWidth percent; adjust the resolved minimum
+    float adjustedMin = metrics.frame.size.width + minWidthOffset;
+    if (metrics.frame.size.width < adjustedMin) {
+      metrics.frame.size.width = adjustedMin;
+    }
+  }
+  // MinHeight
+  float minHeightOffset =
+      props.calcOffsets[static_cast<size_t>(CalcPropId::MinHeight)];
+  if (minHeightOffset != 0.0f) {
+    float adjustedMin = metrics.frame.size.height + minHeightOffset;
+    if (metrics.frame.size.height < adjustedMin) {
+      metrics.frame.size.height = adjustedMin;
+    }
+  }
+  // MaxWidth: clamp width from above
+  float maxWidthOffset =
+      props.calcOffsets[static_cast<size_t>(CalcPropId::MaxWidth)];
+  if (maxWidthOffset != 0.0f) {
+    float adjustedMax = metrics.frame.size.width + maxWidthOffset;
+    if (metrics.frame.size.width > adjustedMax) {
+      metrics.frame.size.width = adjustedMax;
+    }
+  }
+  // MaxHeight
+  float maxHeightOffset =
+      props.calcOffsets[static_cast<size_t>(CalcPropId::MaxHeight)];
+  if (maxHeightOffset != 0.0f) {
+    float adjustedMax = metrics.frame.size.height + maxHeightOffset;
+    if (metrics.frame.size.height > adjustedMax) {
+      metrics.frame.size.height = adjustedMax;
+    }
+  }
+}
+
 void YogaLayoutableShadowNode::layout(LayoutContext layoutContext) {
   // Reading data from a dirtied node does not make sense.
   react_native_assert(!YGNodeIsDirty(&yogaNode_));
@@ -717,6 +770,20 @@ void YogaLayoutableShadowNode::layout(LayoutContext layoutContext) {
           layoutContext.swapLeftAndRightInRTL &&
           newLayoutMetrics.layoutDirection == LayoutDirection::RightToLeft;
 
+      // Apply CSS calc() post-layout offsets. When a calc expression contains
+      // a percentage (e.g. calc(50% - 20px)), Yoga resolves the percentage
+      // part during layout. The point offset is applied here afterward.
+      {
+        const auto& childPropsShared = childNode.getProps();
+        if (childPropsShared != nullptr) {
+          const auto& childProps =
+              static_cast<const YogaStylableProps&>(*childPropsShared);
+          if (childProps.hasCalcOffsets()) {
+            applyCalcOffsets(newLayoutMetrics, childProps);
+          }
+        }
+      }
+
       // Child node's layout has changed. When a node is added to
       // `affectedNodes`, onLayout event is called on the component. Comparing
       // `newLayoutMetrics.frame` with `childNode.getLayoutMetrics().frame` to

packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp

@@ -7,6 +7,8 @@
 
 #include "YogaStylableProps.h"
 
+#include <string>
+
 #include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/renderer/components/view/conversions.h>
 #include <react/renderer/components/view/propsConversions.h>
@@ -34,6 +36,42 @@ YogaStylableProps::YogaStylableProps(
   if (!ReactNativeFeatureFlags::enableCppPropsIteratorSetter()) {
     convertRawPropAliases(context, sourceProps, rawProps);
   }
+
+  // Read calc() offsets for dimension props. The JS side sends
+  // the percentage part as a normal dimension value (e.g. width: "50%")
+  // and the point offset as a separate float prop.
+  calcOffsets[0] = convertRawProp(
+      context, rawProps, "__calcWidthOffset", sourceProps.calcOffsets[0], 0.0f);
+  calcOffsets[1] = convertRawProp(
+      context,
+      rawProps,
+      "__calcHeightOffset",
+      sourceProps.calcOffsets[1],
+      0.0f);
+  calcOffsets[2] = convertRawProp(
+      context,
+      rawProps,
+      "__calcMinWidthOffset",
+      sourceProps.calcOffsets[2],
+      0.0f);
+  calcOffsets[3] = convertRawProp(
+      context,
+      rawProps,
+      "__calcMinHeightOffset",
+      sourceProps.calcOffsets[3],
+      0.0f);
+  calcOffsets[4] = convertRawProp(
+      context,
+      rawProps,
+      "__calcMaxWidthOffset",
+      sourceProps.calcOffsets[4],
+      0.0f);
+  calcOffsets[5] = convertRawProp(
+      context,
+      rawProps,
+      "__calcMaxHeightOffset",
+      sourceProps.calcOffsets[5],
+      0.0f);
 };
 
 template <typename T>

packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h

@@ -7,6 +7,8 @@
 
 #pragma once
 
+#include <cstdint>
+
 #include <yoga/style/Style.h>
 
 #include <react/renderer/core/Props.h>
@@ -15,6 +17,18 @@
 
 namespace facebook::react {
 
+// Property identifiers for calc post-layout offsets, matching Yoga dimension
+// props. Used by CSS calc() expressions like calc(50% - 20px), where the
+// percentage is set on Yoga and the point offset is applied post-layout.
+enum class CalcPropId : uint8_t {
+  Width,
+  Height,
+  MinWidth,
+  MinHeight,
+  MaxWidth,
+  MaxHeight,
+};
+
 class YogaStylableProps : public Props {
  public:
   YogaStylableProps() = default;
@@ -57,6 +71,21 @@ class YogaStylableProps : public Props {
   yoga::Style::Length paddingBlockStart;
   yoga::Style::Length paddingBlockEnd;
 
+  // Post-layout offsets for CSS calc() expressions containing percentages.
+  // Indexed by CalcPropId (cast to size_t). Non-zero offset means active.
+  static constexpr size_t kCalcPropCount = 6;
+  float calcOffsets[kCalcPropCount] = {0, 0, 0, 0, 0, 0};
+
+  bool hasCalcOffsets() const
+  {
+    for (size_t i = 0; i < kCalcPropCount; i++) {
+      if (calcOffsets[i] != 0.0f) {
+        return true;
+      }
+    }
+    return false;
+  }
+
 #if RN_DEBUG_STRING_CONVERTIBLE
 
 #pragma mark - DebugStringConvertible (Partial)

packages/react-native/ReactCommon/react/renderer/components/view/tests/LayoutTest.cpp

@@ -10,6 +10,7 @@
 #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
 #include <react/renderer/components/root/RootComponentDescriptor.h>
 #include <react/renderer/components/view/ViewComponentDescriptor.h>
+#include <react/renderer/components/view/YogaStylableProps.h>
 #include <react/renderer/element/ComponentBuilder.h>
 #include <react/renderer/element/Element.h>
 #include <react/renderer/element/testUtils.h>
@@ -444,4 +445,74 @@ TEST_F(LayoutTest, overflowInsetHitSlopTransformTranslateTest) {
   EXPECT_EQ(layoutMetricsABC.overflowInset.bottom, 0);
 }
 
+// Test CSS calc() post-layout offsets.
+// A child with width: calc(50% - 20px) inside a 200px-wide parent
+// should resolve to 200*0.5 - 20 = 80px.
+class CalcOffsetTest : public ::testing::Test {
+ protected:
+  ComponentBuilder builder_;
+  std::shared_ptr<RootShadowNode> rootShadowNode_;
+  std::shared_ptr<ViewShadowNode> childNode_;
+
+  CalcOffsetTest() : builder_(simpleComponentBuilder()) {}
+
+  void initialize() {
+    // clang-format off
+    auto element =
+        Element<RootShadowNode>()
+          .reference(rootShadowNode_)
+          .tag(1)
+          .props([] {
+            auto sharedProps = std::make_shared<RootProps>();
+            auto &props = *sharedProps;
+            props.layoutConstraints = LayoutConstraints{
+                .minimumSize = {.width = 0, .height = 0},
+                .maximumSize = {.width = 500, .height = 500}};
+            auto &yogaStyle = props.yogaStyle;
+            yogaStyle.setDimension(
+                yoga::Dimension::Width, yoga::StyleSizeLength::points(200));
+            yogaStyle.setDimension(
+                yoga::Dimension::Height, yoga::StyleSizeLength::points(200));
+            return sharedProps;
+          })
+          .children({
+            Element<ViewShadowNode>()
+              .reference(childNode_)
+              .tag(2)
+              .props([] {
+                auto sharedProps = std::make_shared<ViewShadowNodeProps>();
+                auto &props = *sharedProps;
+                auto &yogaStyle = props.yogaStyle;
+                // Simulate calc(50% - 20px): set 50% on Yoga, store -20 offset
+                yogaStyle.setDimension(
+                    yoga::Dimension::Width,
+                    yoga::StyleSizeLength::percent(50));
+                // CalcPropId::Width == 0, CalcPropId::Height == 1
+                props.calcOffsets[0] = -20.0f;
+                // Simulate calc(100% - 64px) for height
+                yogaStyle.setDimension(
+                    yoga::Dimension::Height,
+                    yoga::StyleSizeLength::percent(100));
+                props.calcOffsets[1] = -64.0f;
+                return sharedProps;
+              })
+          });
+    // clang-format on
+
+    builder_.build(element);
+    rootShadowNode_->layoutIfNeeded();
+  }
+};
+
+TEST_F(CalcOffsetTest, calcWidthAndHeight) {
+  initialize();
+
+  auto layoutMetrics = childNode_->getLayoutMetrics();
+
+  // width: calc(50% - 20px) = 200 * 0.5 - 20 = 80
+  EXPECT_EQ(layoutMetrics.frame.size.width, 80);
+  // height: calc(100% - 64px) = 200 * 1.0 - 64 = 136
+  EXPECT_EQ(layoutMetrics.frame.size.height, 136);
+}
+
 } // namespace facebook::react