From 5df4c760d36d056292161eef221165c9f41c6125 Mon Sep 17 00:00:00 2001
From: DK Liao <dklassic@gmail.com>
Date: Fri, 11 Apr 2025 15:51:52 +0900
Subject: [PATCH] fix: Crashing due to input element hack (#36461)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR addresses a crash in text input element due to a hack to prevent
text input being trimmed.

The updated behavior will only add `zero width space` unicode character
to the node if there's no text content instead of adding it constantly.
Also by adding the same `zero width space` unicode character to text
area when there's no text content within will allow text area element to
properly display caret.

<img width="197" alt="截圖 2025-04-11 中午12 51 00"
src="https://github.com/user-attachments/assets/10bc7314-9aa3-49df-baac-ef26d39a96d8"
/>

This PR also addresses issues with multiple glyph runs:


https://github.com/user-attachments/assets/658db56f-b166-47ec-bc77-c6c13114d669

Testing: This PR is tested using:
- `./mach run -d 'data:text/html,<input id="input_element"
value="xxxxxxxxxxxxxxxxxxxx">'`
- `./mach run -d 'data:text/html,<textarea id="input_element"
value="xxxxxxxxxxxxxxxxxxxx">'`

without causing crashes, while the results should be covered by WPT
tests

Fixes: https://github.com/servo/servo/issues/36449

---------

Signed-off-by: DK Liao <dklassic@gmail.com>
---
 components/layout_2020/display_list/mod.rs                | 8 ++++----
 components/layout_2020/dom_traversal.rs                   | 7 ++++++-
 components/layout_2020/flow/inline/text_run.rs            | 2 +-
 .../baseline-source-first-textarea-001.tentative.html.ini | 6 +++---
 .../widgets/button-layout/input-type-button-clip.html.ini | 2 --
 5 files changed, 14 insertions(+), 11 deletions(-)
 delete mode 100644 tests/wpt/meta/html/rendering/widgets/button-layout/input-type-button-clip.html.ini

diff --git a/components/layout_2020/display_list/mod.rs b/components/layout_2020/display_list/mod.rs
index 5879733ac45..a872ac9ef17 100644
--- a/components/layout_2020/display_list/mod.rs
+++ b/components/layout_2020/display_list/mod.rs
@@ -1223,9 +1223,7 @@ fn glyphs(
     glyphs
 }
 
-// TODO: This implementation has not been tested against `TextFragment` with mutiple runs.
-// It is possible that the `glyphs` function above will need to be modified to
-// handle multiple runs correctly.
+// TODO: The implementation here does not account for multiple glyph runs properly.
 fn glyphs_advance_by_index(
     glyph_runs: &[Arc<GlyphStore>],
     index: fonts_traits::ByteIndex,
@@ -1233,11 +1231,13 @@ fn glyphs_advance_by_index(
     justification_adjustment: Au,
 ) -> PhysicalPoint<Au> {
     let mut point = baseline_origin;
+    let mut index = index;
     for run in glyph_runs {
         let total_advance = run.advance_for_byte_range(
-            &ServoRange::new(fonts::ByteIndex(0), index),
+            &ServoRange::new(fonts::ByteIndex(0), index.min(run.len())),
             justification_adjustment,
         );
+        index = index - index.min(run.len());
         point.x += total_advance;
     }
     point
diff --git a/components/layout_2020/dom_traversal.rs b/components/layout_2020/dom_traversal.rs
index 1b9258fb824..966cf83443a 100644
--- a/components/layout_2020/dom_traversal.rs
+++ b/components/layout_2020/dom_traversal.rs
@@ -212,12 +212,17 @@ fn traverse_children_of<'dom, Node>(
     if is_text_input_element || is_textarea_element {
         let info = NodeAndStyleInfo::new(parent_element, parent_element.style(context));
 
-        if is_text_input_element {
+        if parent_element
+            .to_threadsafe()
+            .node_text_content()
+            .is_empty()
+        {
             // The addition of zero-width space here forces the text input to have an inline formatting
             // context that might otherwise be trimmed if there's no text. This is important to ensure
             // that the input element is at least as tall as the line gap of the caret:
             // <https://drafts.csswg.org/css-ui/#element-with-default-preferred-size>.
             //
+            // This is also used to ensure that the caret will still be rendered when the input is empty.
             // TODO: Is there a less hacky way to do this?
             handler.handle_text(&info, "\u{200B}".into());
         }
diff --git a/components/layout_2020/flow/inline/text_run.rs b/components/layout_2020/flow/inline/text_run.rs
index d36834bd80e..b0687900000 100644
--- a/components/layout_2020/flow/inline/text_run.rs
+++ b/components/layout_2020/flow/inline/text_run.rs
@@ -166,7 +166,7 @@ impl TextRunSegment {
                 self.bidi_level,
                 ServoRange::<ByteIndex>::new(
                     byte_processed + ByteIndex(self.range.start as isize),
-                    run.range.length(),
+                    ByteIndex(self.range.len() as isize) - byte_processed,
                 ),
             );
             byte_processed = byte_processed + run.range.length();
diff --git a/tests/wpt/meta/css/css-inline/baseline-source/baseline-source-first-textarea-001.tentative.html.ini b/tests/wpt/meta/css/css-inline/baseline-source/baseline-source-first-textarea-001.tentative.html.ini
index 33e8242e0ef..69fbdce4c26 100644
--- a/tests/wpt/meta/css/css-inline/baseline-source/baseline-source-first-textarea-001.tentative.html.ini
+++ b/tests/wpt/meta/css/css-inline/baseline-source/baseline-source-first-textarea-001.tentative.html.ini
@@ -2,8 +2,8 @@
   [.target > * 9]
     expected: FAIL
 
-  [.target > * 1]
-    expected: FAIL
-
   [.target > * 11]
     expected: FAIL
+
+  [.target > * 7]
+    expected: FAIL
diff --git a/tests/wpt/meta/html/rendering/widgets/button-layout/input-type-button-clip.html.ini b/tests/wpt/meta/html/rendering/widgets/button-layout/input-type-button-clip.html.ini
deleted file mode 100644
index 1a31628240b..00000000000
--- a/tests/wpt/meta/html/rendering/widgets/button-layout/input-type-button-clip.html.ini
+++ /dev/null
@@ -1,2 +0,0 @@
-[input-type-button-clip.html]
-  expected: FAIL