[BugFix][CSS] Treat typed numeric lengths as pixels

core/renderer/css/parser/length_handler.cc

@@ -45,7 +45,7 @@ bool Process(const lepus::Value& input, CSSValue& css_value,
   }
 
   if (input.IsNumber()) {
-    css_value.SetValueAndPattern(input, CSSValuePattern::NUMBER);
+    css_value.SetValueAndPattern(input, CSSValuePattern::PX);
     return true;
   }
 

core/renderer/css/parser/length_handler_unittest.cc

@@ -92,6 +92,16 @@ TEST(LengthHandler, Process) {
   EXPECT_EQ(css_value.GetNumber(), 10);
 }
 
+TEST(LengthHandler, NumericLengthUsesPxPattern) {
+  auto impl = lepus::Value(10);
+  CSSValue css_value;
+  CSSParserConfigs configs;
+
+  EXPECT_TRUE(LengthHandler::Process(impl, css_value, configs));
+  EXPECT_TRUE(css_value.IsPx());
+  EXPECT_EQ(css_value.GetNumber(), 10);
+}
+
 TEST(LengthHandler, TextDecorationPatternLengths) {
   StyleMap output;
   CSSParserConfigs configs;

core/renderer/dom/attribute_holder.h

@@ -95,6 +95,12 @@ class AttributeHolder : public fml::RefCountedThreadSafeStorage,
     OnStyleChange();
   }
 
+  void SetInlineStyle(CSSPropertyID id, const lepus::Value& value,
+                      const CSSParserConfigs& configs) {
+    UnitHandler::Process(id, value, inline_styles_, configs);
+    OnStyleChange();
+  }
+
   void SetInlineStyle(CSSPropertyID id, const tasm::CSSValue& value) {
     inline_styles_.insert_or_assign(id, value);
     OnStyleChange();

core/renderer/dom/attribute_holder_unittest.cc

@@ -19,6 +19,19 @@ class AttributeHolderTest : public ::testing::Test {
   void SetUp() override {}
 };
 
+TEST_F(AttributeHolderTest, NumericInlineStylePreservesValueType) {
+  AttributeHolder holder;
+  CSSParserConfigs configs;
+
+  holder.SetInlineStyle(CSSPropertyID::kPropertyIDWidth, lepus::Value(10),
+                        configs);
+
+  auto style = holder.inline_styles().find(CSSPropertyID::kPropertyIDWidth);
+  ASSERT_NE(style, holder.inline_styles().end());
+  EXPECT_TRUE(style->second.IsPx());
+  EXPECT_EQ(style->second.GetNumber(), 10);
+}
+
 TEST_F(AttributeHolderTest, ContainsSelector) {
   RadonNode node(nullptr, "my_tag", 0);
   node.SetIdSelector("my_id");

core/renderer/dom/element.cc

@@ -3227,10 +3227,7 @@ void Element::SetStyle(CSSPropertyID id, const lepus::Value& value) {
       if (value.IsEmpty()) {
         data_model()->ResetInlineStyle(id);
       } else {
-        data_model()->SetInlineStyle(id,
-                                     value.IsNumber()
-                                         ? std::to_string(value.Number())
-                                         : value.ToString(),
+        data_model()->SetInlineStyle(id, value,
                                      element_manager_->GetCSSParserConfigs());
       }
     }

core/renderer/dom/element_unittest.cc

@@ -114,6 +114,19 @@ TEST_F(ElementTest, CheckHasFilterProps) {
   }
 }
 
+TEST_F(ElementTest, NumericStylePreservesValueTypeInDataModel) {
+  manager->dom_tree_enabled_ = true;
+
+  auto element = manager->CreateFiberElement("view");
+  element->SetStyle(CSSPropertyID::kPropertyIDWidth, lepus::Value(10));
+
+  auto style = element->data_model()->inline_styles().find(
+      CSSPropertyID::kPropertyIDWidth);
+  ASSERT_NE(style, element->data_model()->inline_styles().end());
+  EXPECT_TRUE(style->second.IsPx());
+  EXPECT_EQ(style->second.GetNumber(), 10);
+}
+
 TEST_F(ElementTest, CheckWillDestroy) {
   auto config = std::make_shared<PageConfig>();
   config->SetEnableFiberArch(true);