!1204 support calc and var

Merge pull request !1204 from Yao.inhome/lixinli_calcvar_0223

frameworks/base/geometry/animatable_dimension.cpp

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -26,13 +26,25 @@ AnimatableDimension& AnimatableDimension::operator=(const Dimension& newDimensio
     return *this;
 }
 
+AnimatableDimension& AnimatableDimension::operator=(const CalcDimension& newDimension)
+{
+    ResetAnimatableDimension();
+    CalcDimension& dimension = *this;
+    dimension = newDimension;
+    return *this;
+}
+
 AnimatableDimension& AnimatableDimension::operator=(const AnimatableDimension& newDimension)
 {
     SetUnit(newDimension.Unit());
     SetAnimationOption(newDimension.GetAnimationOption());
     auto pipelineContext = context_.Upgrade();
     if (!animationCallback_ || !pipelineContext) {
-        SetValue(newDimension.Value());
+        if (newDimension.Unit() == DimensionUnit::CALC) {
+            SetCalcValue(newDimension.CalcValue());
+        } else {
+            SetValue(newDimension.Value());
+        }
         return *this;
     }
     AnimationOption explicitAnim = pipelineContext->GetExplicitAnimationOption();
@@ -43,7 +55,11 @@ AnimatableDimension& AnimatableDimension::operator=(const AnimatableDimension& n
         AnimateTo(newDimension.Value());
     } else {
         ResetController();
-        SetValue(newDimension.Value());
+        if (newDimension.Unit() == DimensionUnit::CALC) {
+            SetCalcValue(newDimension.CalcValue());
+        } else {
+            SetValue(newDimension.Value());
+        }
     }
     isFirstAssign_ = false;
     return *this;

frameworks/base/geometry/animatable_dimension.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -17,6 +17,7 @@
 #define FOUNDATION_ACE_FRAMEWORKS_BASE_GEOMETRY_ANIMATABLE_DIMENSION_H
 
 #include "base/geometry/dimension.h"
+#include "base/geometry/calc_dimension.h"
 #include "core/animation/animator.h"
 #include "core/animation/curve_animation.h"
 #include "core/components/common/properties/animation_option.h"
@@ -28,17 +29,28 @@ using RenderNodeAnimationCallback = std::function<void()>;
 /*
  * AnimatableDimension is a Dimension with AnimationOption and Animator.
  */
-class ACE_EXPORT AnimatableDimension : public Dimension {
+class ACE_EXPORT AnimatableDimension : public CalcDimension {
 public:
     AnimatableDimension() = default;
     ~AnimatableDimension() = default;
 
     explicit AnimatableDimension(
         double value, DimensionUnit unit = DimensionUnit::PX, const AnimationOption& option = AnimationOption())
-        : Dimension(value, unit), animationOption_(option)
+        : CalcDimension(value, unit), animationOption_(option)
     {}
+
+    explicit AnimatableDimension(
+        const std::string& value, DimensionUnit unit = DimensionUnit::CALC,
+        const AnimationOption& option = AnimationOption())
+        : CalcDimension(value, unit), animationOption_(option)
+    {}
+
     explicit AnimatableDimension(const Dimension& dimension, const AnimationOption& option = AnimationOption())
-        : Dimension(dimension), animationOption_(option)
+        : CalcDimension(dimension), animationOption_(option)
+    {}
+
+    explicit AnimatableDimension(const CalcDimension& dimension, const AnimationOption& option = AnimationOption())
+        : CalcDimension(dimension), animationOption_(option)
     {}
 
     void SetContextAndCallback(const WeakPtr<PipelineContext>& context, const RenderNodeAnimationCallback& callback)
@@ -85,6 +97,8 @@ public:
 
     AnimatableDimension& operator=(const Dimension& newDimension);
 
+    AnimatableDimension& operator=(const CalcDimension& newDimension);
+
     AnimatableDimension& operator=(const AnimatableDimension& newDimension);
 
     void MoveTo(double target);

frameworks/base/geometry/calc_dimension.h

@@ -0,0 +1,66 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef FOUNDATION_ACE_FRAMEWORKS_BASE_GEOMETRY_CALC_DIMENSION_H
+#define FOUNDATION_ACE_FRAMEWORKS_BASE_GEOMETRY_CALC_DIMENSION_H
+
+#include "base/geometry/dimension.h"
+
+namespace OHOS::Ace {
+class CalcDimension : public Dimension {
+public:
+    CalcDimension() = default;
+    ~CalcDimension() = default;
+
+    explicit CalcDimension(const std::string& value, DimensionUnit unit = DimensionUnit::CALC)
+    {
+        calcvalue_ = value;
+        SetUnit(DimensionUnit::CALC);
+    };
+
+    CalcDimension(double value, DimensionUnit unit = DimensionUnit::PX) : Dimension(value, unit) {};
+    CalcDimension(const Dimension& dimension) : Dimension(dimension) {};
+
+    const std::string& CalcValue() const
+    {
+        return calcvalue_;
+    }
+
+    void SetCalcValue(const std::string& value)
+    {
+        calcvalue_ = value;
+    }
+
+    CalcDimension& operator=(const Dimension& newDimension)
+    {
+        Dimension& dimension = *this;
+        dimension = newDimension;
+        return *this;
+    }
+
+    CalcDimension& operator=(const CalcDimension& newDimension)
+    {
+        SetCalcValue(newDimension.CalcValue());
+        SetValue(newDimension.Value());
+        SetUnit(newDimension.Unit());
+        return *this;
+    }
+
+private:
+    std::string calcvalue_ = "";
+};
+} // namespace OHOS::Ace
+
+#endif // FOUNDATION_ACE_FRAMEWORKS_BASE_GEOMETRY_CALC_DIMENSION_H

frameworks/base/geometry/dimension.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -55,6 +55,10 @@ enum class DimensionUnit {
      * The value is calculated from the element's parent and another property of the element itself.
      */
     AUTO,
+    /*
+     * The value is expression.
+     */
+    CALC,
 };
 
 /*

frameworks/base/utils/string_expression.h

@@ -0,0 +1,135 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef FOUNDATION_ACE_FRAMEWORKS_BASE_UTILS_STRING_EXPRESSION_H
+#define FOUNDATION_ACE_FRAMEWORKS_BASE_UTILS_STRING_EXPRESSION_H
+
+#include <string>
+#include <vector>
+#include <map>
+#include <regex>
+#include <functional>
+
+namespace OHOS::Ace::StringExpression {
+void InitMapping(std::map<std::string, int> &mapping)
+{
+    mapping["+"] = 0;
+    mapping["-"] = 0;
+    mapping["*"] = 1;
+    mapping["/"] = 1;
+    mapping["("] = 2;
+    mapping[")"] = 2;
+}
+
+std::vector<std::string> ConvertDal2Rpn(std::string formula)
+{
+    std::vector<std::string> result;
+    std::vector<std::string> opStack;
+    std::map<std::string, int> OpMapping;
+    std::string curNum, curOp;
+    std::regex calc("calc");
+    std::regex space(" ");
+    std::string ops = "+-*/()";
+    formula = regex_replace(formula, calc, "");
+    formula = regex_replace(formula, space, "");
+    for (int i = 0; i < formula.size(); ++ i) {
+        if (ops.find(formula[i]) == ops.npos) {
+            curNum += formula[i];
+        } else {
+            if (!curNum.empty()) {
+                result.push_back(curNum);
+                curNum.clear();
+            }
+            curOp = formula[i];
+            if (opStack.empty()) {
+                opStack.push_back(curOp);
+            } else if (curOp == "(") {
+                opStack.push_back(curOp);
+            } else if (curOp == ")") {
+                while (opStack.back() != "(") {
+                    result.push_back(opStack.back());
+                    opStack.pop_back();
+                    if (opStack.empty()) {
+                        LOGE("ExpressionError, opStack is empty");
+                        result.push_back("0");
+                        return result;
+                    }
+                }
+                opStack.pop_back();
+            } else if (opStack.back() == "(") {
+                opStack.push_back(curOp);
+            } else if (OpMapping[curOp] > OpMapping[opStack.back()] && (!opStack.empty())) {
+                opStack.push_back(curOp);
+            } else {
+                while ((opStack.back() != "(") && (OpMapping[opStack.back()] >= OpMapping[curOp]))  {
+                    result.push_back(opStack.back());
+                    opStack.pop_back();
+                    if (opStack.empty())
+                        break;
+                }
+                opStack.push_back(curOp);
+            }
+        }
+    }
+    if (!opStack.empty()) {
+        LOGE("opStack is not empty");
+    }
+    return result;
+}
+
+double CalculateExp(std::string expression, const std::function<double (const Dimension&)> calcFunc)
+{
+    std::vector<std::string> rpnexp = ConvertDal2Rpn(expression);
+    std::vector<double> result;
+    double num = 0.0;
+    std::string ops = "+-*/()";
+    for (int i = 0; i < rpnexp.size(); ++ i) {
+        if (ops.find(rpnexp[i]) == ops.npos) {
+            std::string value = rpnexp[i];
+            Dimension dim = StringUtils::StringToDimensionWithUnit(value);
+            num = calcFunc(dim);
+            result.push_back(num);
+        } else {
+            if (result.size() < 2) {
+                LOGE("ExpressionError, size < 2");
+                return 0.0;
+            }
+            double num1 = result.back();
+            result.pop_back();
+            double num2 = result.back();
+            result.pop_back();
+            double opRes = 0.0;
+            if (rpnexp[i] == "+") {
+                opRes = num2 + num1;
+            } else if (rpnexp[i] == "-") {
+                opRes = num2 - num1;
+            } else if (rpnexp[i] == "*") {
+                opRes = num2 * num1;
+            } else if (rpnexp[i] == "/" && num1 != 0) {
+                opRes = num2 / num1;
+            }
+            result.push_back(opRes);
+        }
+    }
+    if (result.size() == 1) {
+        return result.back();
+    } else {
+        LOGE("ExpressionError");
+        return 0.0;
+    }
+}
+} // namespace OHOS::Ace::StringExpression
+
+#endif // FOUNDATION_ACE_FRAMEWORKS_BASE_UTILS_STRING_EXPRESSION_H

frameworks/base/utils/string_utils.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -24,6 +24,7 @@
 #include <vector>
 
 #include "base/geometry/dimension.h"
+#include "base/geometry/calc_dimension.h"
 #include "base/utils/linear_map.h"
 #include "base/utils/utils.h"
 
@@ -217,6 +218,16 @@ inline Dimension StringToDimensionWithUnit(const std::string& value, DimensionUn
     return Dimension(result, defaultUnit);
 }
 
+inline CalcDimension StringToCalcDimension(const std::string& value, bool useVp = false)
+{
+    if (value.find("calc") != std::string::npos) {
+        return CalcDimension(value, DimensionUnit::CALC);
+    } else {
+        return StringToDimensionWithUnit(value, useVp ? DimensionUnit::VP : DimensionUnit::PX);
+    }
+}
+
+
 inline Dimension StringToDimension(const std::string& value, bool useVp = false)
 {
     return StringToDimensionWithUnit(value, useVp ? DimensionUnit::VP : DimensionUnit::PX);

frameworks/bridge/common/dom/dom_node.cpp

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -1331,8 +1331,10 @@ void DOMNode::UpdateFlexItemComponent()
         (parentNode->GetTag() == DOM_NODE_TAG_DIV || parentNode->GetTag() == DOM_NODE_TAG_GRID_COLUMN)) {
         auto parent = AceType::DynamicCast<DOMDiv>(parentNode);
         // Stretch flag means that if the child's main size is determined, it can not be stretched.
-        if (((parent->GetFlexDirection() == FlexDirection::ROW && GreatOrEqual(GetHeight().Value(), 0.0)) ||
-                (parent->GetFlexDirection() == FlexDirection::COLUMN && GreatOrEqual(GetWidth().Value(), 0.0)))) {
+        if ((parent->GetFlexDirection() == FlexDirection::ROW && (GreatOrEqual(GetHeight().Value(), 0.0) ||
+            GetHeight().Unit() == DimensionUnit::CALC)) ||
+            (parent->GetFlexDirection() == FlexDirection::COLUMN && (GreatOrEqual(GetWidth().Value(), 0.0) ||
+            GetWidth().Unit() == DimensionUnit::CALC))) {
             flexItemComponent_->SetStretchFlag(false);
         } else {
             flexItemComponent_->SetStretchFlag(true);
@@ -1361,10 +1363,18 @@ void DOMNode::UpdateUiComponents()
     UpdateTweenComponent();
 }
 
-void DOMNode::UpdateBoxSize(const Dimension& width, const Dimension& height)
+void DOMNode::UpdateBoxSize(const CalcDimension& width, const CalcDimension& height)
 {
-    boxComponent_->SetHeight(height.Value(), height.Unit());
-    boxComponent_->SetWidth(width.Value(), width.Unit());
+    if (height.Unit() == DimensionUnit::CALC) {
+        boxComponent_->SetHeight(height.CalcValue(), height.Unit());
+    } else {
+        boxComponent_->SetHeight(height.Value(), height.Unit());
+    }
+    if (width.Unit() == DimensionUnit::CALC) {
+        boxComponent_->SetWidth(width.CalcValue(), width.Unit());
+    } else {
+        boxComponent_->SetWidth(width.Value(), width.Unit());
+    }
 }
 
 void DOMNode::UpdateBoxPadding(const Edge& padding)
@@ -1386,7 +1396,15 @@ void DOMNode::UpdateBoxComponent()
     }
 
     if (declaration_->HasBoxStyle()) {
-        UpdateBoxSize(GetWidth(), GetHeight());
+        if (GetWidth().Unit() != DimensionUnit::CALC && GetHeight().Unit() != DimensionUnit::CALC) {
+            UpdateBoxSize(GetWidth(), GetHeight());
+        } else if (GetWidth().Unit() == DimensionUnit::CALC && GetHeight().Unit() != DimensionUnit::CALC) {
+            UpdateBoxSize(GetCalcWidth(), GetHeight());
+        } else if (GetWidth().Unit() != DimensionUnit::CALC && GetHeight().Unit() == DimensionUnit::CALC) {
+            UpdateBoxSize(GetWidth(), GetCalcHeight());
+        } else {
+            UpdateBoxSize(GetCalcWidth(), GetCalcHeight());
+        }
         auto& paddingStyle = static_cast<CommonPaddingStyle&>(declaration_->GetStyle(StyleTag::COMMON_PADDING_STYLE));
         if (paddingStyle.IsValid()) {
             UpdateBoxPadding(paddingStyle.padding);
@@ -2111,7 +2129,7 @@ double DOMNode::ParseDouble(const std::string& value) const
     return ParseThemeReference<double>(value, noRefFunc, idRefFunc, 0.0);
 }
 
-Dimension DOMNode::ParseDimension(const std::string& value) const
+CalcDimension DOMNode::ParseDimension(const std::string& value) const
 {
     auto themeConstants = GetThemeConstants();
     if (!themeConstants) {
@@ -2120,7 +2138,11 @@ Dimension DOMNode::ParseDimension(const std::string& value) const
     }
     auto&& noRefFunc = [&value]() { return StringUtils::StringToDimension(value); };
     auto&& idRefFunc = [constants = themeConstants](uint32_t refId) { return constants->GetDimension(refId); };
-    return ParseThemeReference<Dimension>(value, noRefFunc, idRefFunc, Dimension());
+    if (value.find("calc") != std::string::npos) {
+        return CalcDimension(value, DimensionUnit::CALC);
+    } else {
+        return ParseThemeReference<Dimension>(value, noRefFunc, idRefFunc, Dimension());
+    }
 }
 
 Dimension DOMNode::ParseLineHeight(const std::string& value) const

frameworks/bridge/common/dom/dom_node.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -418,9 +418,9 @@ public:
 
     /*
      * Parse dimension from string content and reference for id/attr, including format:
-     * 10px, "@id001", "@attr_sys_dimension".
+     * 10px, "@id001", "@attr_sys_dimension, expression".
      */
-    Dimension ParseDimension(const std::string& value) const;
+    CalcDimension ParseDimension(const std::string& value) const;
 
     /*
      * Parse line height from string content and reference for id/attr, including format:
@@ -520,7 +520,7 @@ public:
         return declaration_ ? declaration_->IsRightToLeft() : false;
     }
 
-    void SetHeight(const Dimension& height)
+    void SetHeight(const CalcDimension& height)
     {
         if (declaration_) {
             auto& sizeStyle = declaration_->MaybeResetStyle<CommonSizeStyle>(StyleTag::COMMON_SIZE_STYLE);
@@ -530,7 +530,7 @@ public:
         }
     }
 
-    void SetWidth(const Dimension& width)
+    void SetWidth(const CalcDimension& width)
     {
         if (declaration_) {
             auto& sizeStyle = declaration_->MaybeResetStyle<CommonSizeStyle>(StyleTag::COMMON_SIZE_STYLE);
@@ -552,6 +552,18 @@ public:
         return height;
     }
 
+    virtual CalcDimension GetCalcHeight() const
+    {
+        CalcDimension height = Dimension(-1.0, DimensionUnit::PX);
+        if (declaration_) {
+            auto& sizeStyle = static_cast<CommonSizeStyle&>(declaration_->GetStyle(StyleTag::COMMON_SIZE_STYLE));
+            if (sizeStyle.IsValid()) {
+                height = sizeStyle.height;
+            }
+        }
+        return height;
+    }
+
     virtual Dimension GetWidth() const
     {
         Dimension width = Dimension(-1.0, DimensionUnit::PX);
@@ -564,6 +576,18 @@ public:
         return width;
     }
 
+    virtual CalcDimension GetCalcWidth() const
+    {
+        CalcDimension width = Dimension(-1.0, DimensionUnit::PX);
+        if (declaration_) {
+            auto& sizeStyle = static_cast<CommonSizeStyle&>(declaration_->GetStyle(StyleTag::COMMON_SIZE_STYLE));
+            if (sizeStyle.IsValid()) {
+                width = sizeStyle.width;
+            }
+        }
+        return width;
+    }
+
     DisplayType GetDisplay() const
     {
         DisplayType display = DisplayType::NO_SETTING;
@@ -767,7 +791,7 @@ protected:
 
     virtual void CompositeComponents();
 
-    virtual void UpdateBoxSize(const Dimension& width, const Dimension& height);
+    virtual void UpdateBoxSize(const CalcDimension& width, const CalcDimension& height);
     virtual void UpdateBoxPadding(const Edge& padding);
     virtual void UpdateBoxBorder(const Border& border);
     virtual void UpdatePropAnimations(const PropAnimationMap& animations);

frameworks/bridge/common/dom/dom_select.cpp

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -70,7 +70,7 @@ void DOMSelect::InitializeStyle()
     }
 }
 
-void DOMSelect::UpdateBoxSize(const Dimension& width, const Dimension& height)
+void DOMSelect::UpdateBoxSize(const CalcDimension& width, const CalcDimension& height)
 {
     if (!selectComponent_) {
         return;

frameworks/bridge/common/dom/dom_select.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -66,7 +66,7 @@ protected:
         selectComponent_->FlushRefresh();
     }
 
-    void UpdateBoxSize(const Dimension& width, const Dimension& height) override;
+    void UpdateBoxSize(const CalcDimension& width, const CalcDimension& height) override;
     void UpdateBoxPadding(const Edge& padding) override;
     void UpdateBoxBorder(const Border& border) override;
 

frameworks/core/components/box/box_base_component.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -171,42 +171,42 @@ public:
         return aspectRatio_;
     }
 
-    void SetMinWidth(const Dimension& minWidth)
+    void SetMinWidth(const CalcDimension& minWidth)
     {
         minWidth_ = minWidth;
     }
 
-    const Dimension& GetMinWidth() const
+    const CalcDimension& GetMinWidth() const
     {
         return minWidth_;
     }
 
-    void SetMinHeight(const Dimension& minHeight)
+    void SetMinHeight(const CalcDimension& minHeight)
     {
         minHeight_ = minHeight;
     }
 
-    const Dimension& GetMinHeight() const
+    const CalcDimension& GetMinHeight() const
     {
         return minHeight_;
     }
 
-    void SetMaxWidth(const Dimension& maxWidth)
+    void SetMaxWidth(const CalcDimension& maxWidth)
     {
         maxWidth_ = maxWidth;
     }
 
-    const Dimension& GetMaxWidth() const
+    const CalcDimension& GetMaxWidth() const
     {
         return maxWidth_;
     }
 
-    void SetMaxHeight(const Dimension& maxHeight)
+    void SetMaxHeight(const CalcDimension& maxHeight)
     {
         maxHeight_ = maxHeight;
     }
 
-    const Dimension& GetMaxHeight() const
+    const CalcDimension& GetMaxHeight() const
     {
         return maxHeight_;
     }
@@ -372,10 +372,10 @@ private:
     uint32_t percentFlag_ = 1;
     bool layoutInBox_ = false;
     AnimatableDimension aspectRatio_ = AnimatableDimension();
-    Dimension minWidth_ = Dimension();
-    Dimension minHeight_ = Dimension();
-    Dimension maxWidth_ = Dimension();
-    Dimension maxHeight_ = Dimension();
+    CalcDimension minWidth_ = Dimension();
+    CalcDimension minHeight_ = Dimension();
+    CalcDimension maxWidth_ = Dimension();
+    CalcDimension maxHeight_ = Dimension();
     RefPtr<GridLayoutInfo> gridLayoutInfo_;
     RefPtr<GridColumnInfo::Builder> gridColumnInfoBuilder_;
     bool useLiteStyle_ = false;

frameworks/core/components/box/render_box_base.cpp

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -24,6 +24,7 @@
 #include "core/components/common/properties/radius.h"
 #include "core/components/flex/render_flex.h"
 #include "core/components/text_field/render_text_field.h"
+#include "base/utils/string_expression.h"
 
 namespace OHOS::Ace {
 namespace {
@@ -72,9 +73,15 @@ double RenderBoxBase::CalculateHeightPercent(double percent) const
     return ConvertVerticalDimensionToPx(Dimension(percent, DimensionUnit::PERCENT));
 }
 
-double RenderBoxBase::ConvertMarginToPx(Dimension dimension, bool vertical, bool additional) const
+double RenderBoxBase::ConvertMarginToPx(CalcDimension dimension, bool vertical, bool additional) const
 {
-    if (dimension.Unit() == DimensionUnit::PERCENT) {
+    if (dimension.Unit() == DimensionUnit::CALC) {
+        std::string value = dimension.CalcValue();
+        auto node = AceType::Claim(const_cast<RenderBoxBase*>(this));
+        return StringExpression::CalculateExp(value, [vertical, node](const Dimension& dim) -> double {
+                return node->NormalizePercentToPx(dim, vertical, false);
+            });
+    } else if (dimension.Unit() == DimensionUnit::PERCENT) {
         double parentLimit = 0.0;
         if (vertical) {
             parentLimit = GetLayoutParam().GetMaxSize().Height();
@@ -105,9 +112,15 @@ double RenderBoxBase::ConvertMarginToPx(Dimension dimension, bool vertical, bool
     }
 }
 
-double RenderBoxBase::ConvertDimensionToPx(Dimension dimension, bool vertical, bool defaultZero) const
+double RenderBoxBase::ConvertDimensionToPx(CalcDimension dimension, bool vertical, bool defaultZero) const
 {
-    if (dimension.Unit() == DimensionUnit::PERCENT) {
+    if (dimension.Unit() == DimensionUnit::CALC) {
+        std::string value = dimension.CalcValue();
+        auto node = AceType::Claim(const_cast<RenderBoxBase*>(this));
+        return StringExpression::CalculateExp(value, [vertical, node](const Dimension& dim) -> double {
+                return node->NormalizePercentToPx(dim, vertical, false);
+            });
+    } else if (dimension.Unit() == DimensionUnit::PERCENT) {
         double parentLimit = GetLayoutParam().GetMaxSize().Width();
         if (vertical) {
             parentLimit = GetLayoutParam().GetMaxSize().Height();
@@ -131,12 +144,12 @@ double RenderBoxBase::ConvertDimensionToPx(Dimension dimension, bool vertical, b
     }
 }
 
-double RenderBoxBase::ConvertHorizontalDimensionToPx(Dimension dimension, bool defaultZero) const
+double RenderBoxBase::ConvertHorizontalDimensionToPx(CalcDimension dimension, bool defaultZero) const
 {
     return ConvertDimensionToPx(dimension, false, defaultZero);
 }
 
-double RenderBoxBase::ConvertVerticalDimensionToPx(Dimension dimension, bool defaultZero) const
+double RenderBoxBase::ConvertVerticalDimensionToPx(CalcDimension dimension, bool defaultZero) const
 {
     return ConvertDimensionToPx(dimension, true, defaultZero);
 }

frameworks/core/components/box/render_box_base.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -293,10 +293,10 @@ protected:
     virtual Radius GetBorderRadius() const;
 
     EdgePx ConvertEdgeToPx(const Edge& edge, bool additional);
-    double ConvertMarginToPx(Dimension dimension, bool vertical, bool additional) const;
-    double ConvertDimensionToPx(Dimension dimension, bool vertical, bool defaultZero = false) const;
-    double ConvertHorizontalDimensionToPx(Dimension dimension, bool defaultZero = false) const;
-    double ConvertVerticalDimensionToPx(Dimension dimension, bool defaultZero = false) const;
+    double ConvertMarginToPx(CalcDimension dimension, bool vertical, bool additional) const;
+    double ConvertDimensionToPx(CalcDimension dimension, bool vertical, bool defaultZero = false) const;
+    double ConvertHorizontalDimensionToPx(CalcDimension dimension, bool defaultZero = false) const;
+    double ConvertVerticalDimensionToPx(CalcDimension dimension, bool defaultZero = false) const;
     void CalculateWidth();
     void CalculateHeight();
     void CalculateAutoMargin();
@@ -358,10 +358,10 @@ private:
     double selfMinWidth_ = 0.0;                  // exclude margin
     double selfMaxHeight_ = Size::INFINITE_SIZE; // exclude margin
     double selfMinHeight_ = 0.0;                 // exclude margin
-    Dimension minWidth_ = Dimension();
-    Dimension minHeight_ = Dimension();
-    Dimension maxWidth_ = Dimension();
-    Dimension maxHeight_ = Dimension();
+    CalcDimension minWidth_ = Dimension();
+    CalcDimension minHeight_ = Dimension();
+    CalcDimension maxWidth_ = Dimension();
+    CalcDimension maxHeight_ = Dimension();
 
     // result for layout
     LayoutParam selfLayoutParam_; // include margin

frameworks/core/components/common/properties/edge.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -17,6 +17,7 @@
 #define FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_BASE_PROPERTIES_EDGE_H
 
 #include "base/geometry/animatable_dimension.h"
+#include "base/geometry/calc_dimension.h"
 #include "base/geometry/dimension.h"
 #include "base/geometry/offset.h"
 #include "base/geometry/size.h"
@@ -32,15 +33,25 @@ public:
     Edge() = default;
     explicit Edge(double value) : Edge(value, value, value, value) {};
     explicit Edge(const Dimension& value) : Edge(value, value, value, value) {};
+    explicit Edge(const std::string& value) : Edge(value, value, value, value) {};
+    explicit Edge(const CalcDimension& value) : Edge(value, value, value, value) {};
     Edge(double left, double top, double right, double bottom, DimensionUnit unit = DimensionUnit::PX)
         : left_(Dimension(left, unit)), top_(Dimension(top, unit)), right_(Dimension(right, unit)),
           bottom_(Dimension(bottom, unit)) {};
-    Edge(const Dimension& left, const Dimension& top, const Dimension& right, const Dimension& bottom)
+    Edge(const std::string& left, const std::string& top, const std::string& right, const std::string& bottom,
+        DimensionUnit unit = DimensionUnit::CALC) : left_(CalcDimension(left, unit)), top_(CalcDimension(top, unit)),
+        right_(CalcDimension(right, unit)), bottom_(CalcDimension(bottom, unit)) {};
+    Edge(const CalcDimension& left, const CalcDimension& top, const CalcDimension& right, const CalcDimension& bottom)
         : left_(left), top_(top), right_(right), bottom_(bottom) {};
     Edge(const Dimension& left, const Dimension& top, const Dimension& right, const Dimension& bottom,
          const AnimationOption& option)
         : left_(AnimatableDimension(left, option)), top_(AnimatableDimension(top, option)),
           right_(AnimatableDimension(right, option)), bottom_(AnimatableDimension(bottom, option)) {};
+    Edge(const CalcDimension& left, const CalcDimension& top, const CalcDimension& right, const CalcDimension& bottom,
+         const AnimationOption& option)
+        : left_(AnimatableDimension(left, option)), top_(AnimatableDimension(top, option)),
+          right_(AnimatableDimension(right, option)), bottom_(AnimatableDimension(bottom, option)) {};
+
     virtual ~Edge() = default;
 
     static const Edge NONE;
@@ -69,6 +80,12 @@ public:
         left_ = left;
     }
 
+    virtual void SetLeft(const CalcDimension& left)
+    {
+        left_ = AnimatableDimension(left);
+    }
+
+
     virtual void SetLeft(const Dimension& left)
     {
         left_ = AnimatableDimension(left);
@@ -84,6 +101,12 @@ public:
         top_ = top;
     }
 
+    virtual void SetTop(const CalcDimension& top)
+    {
+        top_ = AnimatableDimension(top);
+    }
+
+
     virtual void SetTop(const Dimension& top)
     {
         top_ = AnimatableDimension(top);
@@ -99,6 +122,11 @@ public:
         right_ = right;
     }
 
+    virtual void SetRight(const CalcDimension& right)
+    {
+        right_ = AnimatableDimension(right);
+    }
+
     virtual void SetRight(const Dimension& right)
     {
         right_ = AnimatableDimension(right);
@@ -114,6 +142,11 @@ public:
         bottom_ = bottom;
     }
 
+    virtual void SetBottom(const CalcDimension& bottom)
+    {
+        bottom_ = AnimatableDimension(bottom);
+    }
+
     virtual void SetBottom(const Dimension& bottom)
     {
         bottom_ = AnimatableDimension(bottom);
@@ -166,7 +199,10 @@ class EdgePx : public Edge {
 public:
     EdgePx() = default;
     explicit EdgePx(double value) : EdgePx(value, value, value, value) {};
+    explicit EdgePx(const std::string& value) : EdgePx(value, value, value, value) {};
     EdgePx(double left, double top, double right, double bottom) : Edge(left, top, right, bottom) {};
+    EdgePx(const std::string& left, const std::string& top, const std::string& right, const std::string& bottom)
+        : Edge(left, top, right, bottom) {};
     ~EdgePx() override = default;
 
     double LeftPx() const
@@ -191,7 +227,7 @@ public:
 
     void SetLeft(const AnimatableDimension& left) override
     {
-        if (left.Unit() != DimensionUnit::PX) {
+        if (left.Unit() != DimensionUnit::PX && left.Unit() != DimensionUnit::CALC) {
             return;
         }
         left_ = left;
@@ -205,9 +241,17 @@ public:
         left_ = AnimatableDimension(left);
     }
 
+    void SetLeft(const CalcDimension& left) override
+    {
+        if (left.Unit() != DimensionUnit::CALC) {
+            return;
+        }
+        left_ = AnimatableDimension(left);
+    }
+
     void SetTop(const AnimatableDimension& top) override
     {
-        if (top.Unit() != DimensionUnit::PX) {
+        if (top.Unit() != DimensionUnit::PX && top.Unit() != DimensionUnit::CALC) {
             return;
         }
         top_ = top;
@@ -221,9 +265,17 @@ public:
         top_ = AnimatableDimension(top);
     }
 
+    void SetTop(const CalcDimension& top) override
+    {
+        if (top.Unit() != DimensionUnit::CALC) {
+            return;
+        }
+        top_ = AnimatableDimension(top);
+    }
+
     void SetRight(const AnimatableDimension& right) override
     {
-        if (right.Unit() != DimensionUnit::PX) {
+        if (right.Unit() != DimensionUnit::PX && right.Unit() != DimensionUnit::CALC) {
             return;
         }
         right_ = right;
@@ -237,9 +289,17 @@ public:
         right_ = AnimatableDimension(right);
     }
 
+    void SetRight(const CalcDimension& right) override
+    {
+        if (right.Unit() != DimensionUnit::CALC) {
+            return;
+        }
+        right_ = AnimatableDimension(right);
+    }
+
     void SetBottom(const AnimatableDimension& bottom) override
     {
-        if (bottom.Unit() != DimensionUnit::PX) {
+        if (bottom.Unit() != DimensionUnit::PX && bottom.Unit() != DimensionUnit::CALC) {
             return;
         }
         bottom_ = bottom;
@@ -253,6 +313,15 @@ public:
         bottom_ = AnimatableDimension(bottom);
     }
 
+    void SetBottom(const CalcDimension& bottom) override
+    {
+        if (bottom.Unit() != DimensionUnit::CALC) {
+            return;
+        }
+        bottom_ = AnimatableDimension(bottom);
+    }
+
+
     Size GetLayoutSize() const
     {
         return Size(left_.Value() + right_.Value(), top_.Value() + bottom_.Value());

frameworks/core/components/declaration/common/declaration.cpp

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -16,6 +16,7 @@
 #include "core/components/declaration/common/declaration.h"
 
 #include "base/geometry/dimension.h"
+#include "base/geometry/calc_dimension.h"
 #include "base/log/ace_trace.h"
 #include "base/utils/string_utils.h"
 #include "core/common/ace_application_info.h"
@@ -1154,7 +1155,7 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
             [](const std::string& value, Declaration& declaration) {
                 auto& sizeStyle = declaration.MaybeResetStyle<CommonSizeStyle>(StyleTag::COMMON_SIZE_STYLE);
                 if (sizeStyle.IsValid()) {
-                    sizeStyle.height = declaration.ParseDimension(value);
+                    sizeStyle.height = declaration.ParseCalcDimension(value);
                     declaration.hasBoxStyle_ = true;
                 }
             } },
@@ -1187,7 +1188,7 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
             [](const std::string& value, Declaration& declaration) {
                 auto& marginStyle = declaration.MaybeResetStyle<CommonMarginStyle>(StyleTag::COMMON_MARGIN_STYLE);
                 if (marginStyle.IsValid()) {
-                    marginStyle.margin.SetBottom(declaration.ParseDimension(value));
+                    marginStyle.margin.SetBottom(declaration.ParseCalcDimension(value));
                     declaration.hasBoxStyle_ = true;
                 }
             } },
@@ -1196,9 +1197,9 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
                 auto& marginStyle = declaration.MaybeResetStyle<CommonMarginStyle>(StyleTag::COMMON_MARGIN_STYLE);
                 if (marginStyle.IsValid()) {
                     if (declaration.IsRightToLeft()) {
-                        marginStyle.margin.SetLeft(declaration.ParseDimension(value));
+                        marginStyle.margin.SetLeft(declaration.ParseCalcDimension(value));
                     } else {
-                        marginStyle.margin.SetRight(declaration.ParseDimension(value));
+                        marginStyle.margin.SetRight(declaration.ParseCalcDimension(value));
                     }
                     declaration.hasBoxStyle_ = true;
                 }
@@ -1207,7 +1208,7 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
             [](const std::string& value, Declaration& declaration) {
                 auto& marginStyle = declaration.MaybeResetStyle<CommonMarginStyle>(StyleTag::COMMON_MARGIN_STYLE);
                 if (marginStyle.IsValid()) {
-                    marginStyle.margin.SetLeft(declaration.ParseDimension(value));
+                    marginStyle.margin.SetLeft(declaration.ParseCalcDimension(value));
                     declaration.hasBoxStyle_ = true;
                 }
             } },
@@ -1215,7 +1216,7 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
             [](const std::string& value, Declaration& declaration) {
                 auto& marginStyle = declaration.MaybeResetStyle<CommonMarginStyle>(StyleTag::COMMON_MARGIN_STYLE);
                 if (marginStyle.IsValid()) {
-                    marginStyle.margin.SetRight(declaration.ParseDimension(value));
+                    marginStyle.margin.SetRight(declaration.ParseCalcDimension(value));
                     declaration.hasBoxStyle_ = true;
                 }
             } },
@@ -1224,9 +1225,9 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
                 auto& marginStyle = declaration.MaybeResetStyle<CommonMarginStyle>(StyleTag::COMMON_MARGIN_STYLE);
                 if (marginStyle.IsValid()) {
                     if (declaration.IsRightToLeft()) {
-                        marginStyle.margin.SetRight(declaration.ParseDimension(value));
+                        marginStyle.margin.SetRight(declaration.ParseCalcDimension(value));
                     } else {
-                        marginStyle.margin.SetLeft(declaration.ParseDimension(value));
+                        marginStyle.margin.SetLeft(declaration.ParseCalcDimension(value));
                     }
                     declaration.hasBoxStyle_ = true;
                 }
@@ -1235,7 +1236,7 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
             [](const std::string& value, Declaration& declaration) {
                 auto& marginStyle = declaration.MaybeResetStyle<CommonMarginStyle>(StyleTag::COMMON_MARGIN_STYLE);
                 if (marginStyle.IsValid()) {
-                    marginStyle.margin.SetTop(declaration.ParseDimension(value));
+                    marginStyle.margin.SetTop(declaration.ParseCalcDimension(value));
                     declaration.hasBoxStyle_ = true;
                 }
             } },
@@ -1264,28 +1265,28 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
             [](const std::string& value, Declaration& declaration) {
                 auto& sizeStyle = declaration.MaybeResetStyle<CommonSizeStyle>(StyleTag::COMMON_SIZE_STYLE);
                 if (sizeStyle.IsValid()) {
-                    sizeStyle.maxHeight = declaration.ParseDimension(value);
+                    sizeStyle.maxHeight = declaration.ParseCalcDimension(value);
                 }
             } },
         { DOM_MAX_WIDTH,
             [](const std::string& value, Declaration& declaration) {
                 auto& sizeStyle = declaration.MaybeResetStyle<CommonSizeStyle>(StyleTag::COMMON_SIZE_STYLE);
                 if (sizeStyle.IsValid()) {
-                    sizeStyle.maxWidth = declaration.ParseDimension(value);
+                    sizeStyle.maxWidth = declaration.ParseCalcDimension(value);
                 }
             } },
         { DOM_MIN_HEIGHT,
             [](const std::string& value, Declaration& declaration) {
                 auto& sizeStyle = declaration.MaybeResetStyle<CommonSizeStyle>(StyleTag::COMMON_SIZE_STYLE);
                 if (sizeStyle.IsValid()) {
-                    sizeStyle.minHeight = declaration.ParseDimension(value);
+                    sizeStyle.minHeight = declaration.ParseCalcDimension(value);
                 }
             } },
         { DOM_MIN_WIDTH,
             [](const std::string& value, Declaration& declaration) {
                 auto& sizeStyle = declaration.MaybeResetStyle<CommonSizeStyle>(StyleTag::COMMON_SIZE_STYLE);
                 if (sizeStyle.IsValid()) {
-                    sizeStyle.minWidth = declaration.ParseDimension(value);
+                    sizeStyle.minWidth = declaration.ParseCalcDimension(value);
                 }
             } },
         { DOM_OPACITY,
@@ -1323,7 +1324,7 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
             [](const std::string& value, Declaration& declaration) {
                 auto& paddingStyle = declaration.MaybeResetStyle<CommonPaddingStyle>(StyleTag::COMMON_PADDING_STYLE);
                 if (paddingStyle.IsValid()) {
-                    paddingStyle.padding.SetBottom(declaration.ParseDimension(value));
+                    paddingStyle.padding.SetBottom(declaration.ParseCalcDimension(value));
                     declaration.hasBoxStyle_ = true;
                 }
             } },
@@ -1332,9 +1333,9 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
                 auto& paddingStyle = declaration.MaybeResetStyle<CommonPaddingStyle>(StyleTag::COMMON_PADDING_STYLE);
                 if (paddingStyle.IsValid()) {
                     if (declaration.IsRightToLeft()) {
-                        paddingStyle.padding.SetLeft(declaration.ParseDimension(value));
+                        paddingStyle.padding.SetLeft(declaration.ParseCalcDimension(value));
                     } else {
-                        paddingStyle.padding.SetRight(declaration.ParseDimension(value));
+                        paddingStyle.padding.SetRight(declaration.ParseCalcDimension(value));
                     }
                     declaration.hasBoxStyle_ = true;
                 }
@@ -1343,7 +1344,7 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
             [](const std::string& value, Declaration& declaration) {
                 auto& paddingStyle = declaration.MaybeResetStyle<CommonPaddingStyle>(StyleTag::COMMON_PADDING_STYLE);
                 if (paddingStyle.IsValid()) {
-                    paddingStyle.padding.SetLeft(declaration.ParseDimension(value));
+                    paddingStyle.padding.SetLeft(declaration.ParseCalcDimension(value));
                     declaration.hasBoxStyle_ = true;
                 }
             } },
@@ -1351,7 +1352,7 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
             [](const std::string& value, Declaration& declaration) {
                 auto& paddingStyle = declaration.MaybeResetStyle<CommonPaddingStyle>(StyleTag::COMMON_PADDING_STYLE);
                 if (paddingStyle.IsValid()) {
-                    paddingStyle.padding.SetRight(declaration.ParseDimension(value));
+                    paddingStyle.padding.SetRight(declaration.ParseCalcDimension(value));
                     declaration.hasBoxStyle_ = true;
                 }
             } },
@@ -1360,9 +1361,9 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
                 auto& paddingStyle = declaration.MaybeResetStyle<CommonPaddingStyle>(StyleTag::COMMON_PADDING_STYLE);
                 if (paddingStyle.IsValid()) {
                     if (declaration.IsRightToLeft()) {
-                        paddingStyle.padding.SetRight(declaration.ParseDimension(value));
+                        paddingStyle.padding.SetRight(declaration.ParseCalcDimension(value));
                     } else {
-                        paddingStyle.padding.SetLeft(declaration.ParseDimension(value));
+                        paddingStyle.padding.SetLeft(declaration.ParseCalcDimension(value));
                     }
                     declaration.hasBoxStyle_ = true;
                 }
@@ -1371,7 +1372,7 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
             [](const std::string& value, Declaration& declaration) {
                 auto& paddingStyle = declaration.MaybeResetStyle<CommonPaddingStyle>(StyleTag::COMMON_PADDING_STYLE);
                 if (paddingStyle.IsValid()) {
-                    paddingStyle.padding.SetTop(declaration.ParseDimension(value));
+                    paddingStyle.padding.SetTop(declaration.ParseCalcDimension(value));
                     declaration.hasBoxStyle_ = true;
                 }
             } },
@@ -1562,7 +1563,7 @@ void Declaration::SetCurrentStyle(const std::pair<std::string, std::string>& sty
             [](const std::string& value, Declaration& declaration) {
                 auto& sizeStyle = declaration.MaybeResetStyle<CommonSizeStyle>(StyleTag::COMMON_SIZE_STYLE);
                 if (sizeStyle.IsValid()) {
-                    sizeStyle.width = declaration.ParseDimension(value);
+                    sizeStyle.width = declaration.ParseCalcDimension(value);
                     declaration.hasBoxStyle_ = true;
                 }
             } },
@@ -2048,7 +2049,7 @@ void Declaration::SetMarginOverall(const std::string& value, Declaration& declar
             marginStyle.margin.SetBottom(declaration.ParseDimension(offsets[0]));
             break;
         case 2:
-            marginStyle.margin.SetLeft(declaration.ParseDimension(offsets[0]));
+            marginStyle.margin.SetLeft(declaration.ParseDimension(offsets[1]));
             marginStyle.margin.SetRight(declaration.ParseDimension(offsets[1]));
             marginStyle.margin.SetTop(declaration.ParseDimension(offsets[0]));
             marginStyle.margin.SetBottom(declaration.ParseDimension(offsets[0]));
@@ -3206,6 +3207,15 @@ Dimension Declaration::ParseDimension(const std::string& value, bool useVp) cons
     return ParseThemeReference<Dimension>(value, noRefFunc, idRefFunc, Dimension());
 }
 
+CalcDimension Declaration::ParseCalcDimension(const std::string& value, bool useVp) const
+{
+    if (value.find("calc") != std::string::npos) {
+        return StringUtils::StringToCalcDimension(value, useVp);
+    } else {
+        return ParseDimension(value, useVp);
+    }
+}
+
 Dimension Declaration::ParseLineHeight(const std::string& value) const
 {
     auto themeConstants = GetThemeConstants();

frameworks/core/components/declaration/common/declaration.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -30,6 +30,7 @@
 #include "core/components/scroll/scroll_position_controller.h"
 #include "core/pipeline/pipeline_context.h"
 #include "frameworks/core/components/transform/click_spring_effect.h"
+#include "base/geometry/calc_dimension.h"
 
 namespace OHOS::Ace {
 
@@ -543,6 +544,12 @@ protected:
      */
     Dimension ParseDimension(const std::string& value, bool useVp = false) const;
 
+    /*
+     * Parse calcdimension from string content and reference for id/attr, including format:
+     * calc(100% - 10px), 10px, "@id001", "@attr_sys_dimension".
+     */
+    CalcDimension ParseCalcDimension(const std::string& value, bool useVp = false) const;
+
     /*
      * Parse line height from string content and reference for id/attr, including format:
      * 1.5, "@id001", "@attr_sys_line_height".

frameworks/core/components/declaration/common/style.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -17,6 +17,8 @@
 #define FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_DECLARATION_COMMON_STYLE_H
 
 #include "base/geometry/dimension.h"
+#include "base/geometry/calc_dimension.h"
+
 #include "core/animation/animation_pub.h"
 #include "core/animation/shared_transition_effect.h"
 #include "core/components/common/properties/border.h"
@@ -80,12 +82,12 @@ struct CommonStyle : Style {
 };
 
 struct CommonSizeStyle : Style {
-    Dimension width = Dimension(-1.0, DimensionUnit::PX);
-    Dimension height = Dimension(-1.0, DimensionUnit::PX);
-    Dimension minWidth = Dimension(0.0);
-    Dimension minHeight = Dimension(0.0);
-    Dimension maxWidth = Dimension(Size::INFINITE_SIZE);
-    Dimension maxHeight = Dimension(Size::INFINITE_SIZE);
+    CalcDimension width = Dimension(-1.0, DimensionUnit::PX);
+    CalcDimension height = Dimension(-1.0, DimensionUnit::PX);
+    CalcDimension minWidth = Dimension(0.0);
+    CalcDimension minHeight = Dimension(0.0);
+    CalcDimension maxWidth = Dimension(Size::INFINITE_SIZE);
+    CalcDimension maxHeight = Dimension(Size::INFINITE_SIZE);
     double aspectRatio = 0.0;
     BoxSizing boxSizing = BoxSizing::BORDER_BOX;
 };

frameworks/core/pipeline/base/measurable.h

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -35,11 +35,21 @@ public:
         width_ = AnimatableDimension(dimension, option);
     }
 
+    virtual void SetWidth(const CalcDimension& dimension, const AnimationOption& option = AnimationOption())
+    {
+        width_ = AnimatableDimension(dimension, option);
+    }
+
     virtual void SetWidth(double width, DimensionUnit unit = DimensionUnit::PX)
     {
         width_ = AnimatableDimension(width, unit);
     }
 
+    virtual void SetWidth(std::string width, DimensionUnit unit = DimensionUnit::CALC)
+    {
+        width_ = AnimatableDimension(width, unit);
+    }
+
     virtual void SetWidth(const AnimatableDimension& dimension)
     {
         width_ = dimension;
@@ -55,11 +65,21 @@ public:
         height_ = AnimatableDimension(dimension, option);
     }
 
+    virtual void SetHeight(const CalcDimension& dimension, const AnimationOption& option = AnimationOption())
+    {
+        height_ = AnimatableDimension(dimension, option);
+    }
+
     virtual void SetHeight(double height, DimensionUnit unit = DimensionUnit::PX)
     {
         height_ = AnimatableDimension(height, unit);
     }
 
+    virtual void SetHeight(std::string height, DimensionUnit unit = DimensionUnit::CALC)
+    {
+        height_ = AnimatableDimension(height, unit);
+    }
+
     virtual void SetHeight(const AnimatableDimension& dimension)
     {
         height_ = dimension;

frameworks/core/pipeline/base/render_node.cpp

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Copyright (c) 2021-2022 Huawei Device Co., Ltd.
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at