From ae2c3c71e9e686d9ca7c08f35942972941ac958c Mon Sep 17 00:00:00 2001
From: rel-q <5148607+rel-q@users.noreply.github.com>
Date: Tue, 11 Aug 2026 19:48:12 +0800
Subject: [PATCH] [BugFix][CSS] Treat typed numeric lengths as pixels

- Parse typed numeric length values with the PX pattern while preserving CSS string parsing.

- Forward lepus numeric values into the inline style data model without string conversion.

- Add parser and DOM coverage for numeric pixel styles.

TEST: css_parser_test_exec (224 passed)

TEST: dom_unittest_exec (2837 passed, 36 skipped)

AutoSubmit: true
---
 core/renderer/css/parser/length_handler.cc          |  2 +-
 core/renderer/css/parser/length_handler_unittest.cc | 10 ++++++++++
 core/renderer/dom/attribute_holder.h                |  6 ++++++
 core/renderer/dom/attribute_holder_unittest.cc      | 13 +++++++++++++
 core/renderer/dom/element.cc                        |  5 +----
 core/renderer/dom/element_unittest.cc               | 13 +++++++++++++
 6 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/core/renderer/css/parser/length_handler.cc b/core/renderer/css/parser/length_handler.cc
index 42599b9066..b3f9cc899a 100644
--- a/core/renderer/css/parser/length_handler.cc
+++ b/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;
   }
 
diff --git a/core/renderer/css/parser/length_handler_unittest.cc b/core/renderer/css/parser/length_handler_unittest.cc
index 1db398d1f3..7ae49c309e 100644
--- a/core/renderer/css/parser/length_handler_unittest.cc
+++ b/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;
diff --git a/core/renderer/dom/attribute_holder.h b/core/renderer/dom/attribute_holder.h
index eb9d70688e..23dbb3ac85 100644
--- a/core/renderer/dom/attribute_holder.h
+++ b/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();
diff --git a/core/renderer/dom/attribute_holder_unittest.cc b/core/renderer/dom/attribute_holder_unittest.cc
index 299fc45986..7fab3dbb43 100644
--- a/core/renderer/dom/attribute_holder_unittest.cc
+++ b/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");
diff --git a/core/renderer/dom/element.cc b/core/renderer/dom/element.cc
index 4a39e73a23..c7e1897a73 100644
--- a/core/renderer/dom/element.cc
+++ b/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());
       }
     }
diff --git a/core/renderer/dom/element_unittest.cc b/core/renderer/dom/element_unittest.cc
index e0595afe32..649aac575c 100644
--- a/core/renderer/dom/element_unittest.cc
+++ b/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);