Implement field-sizing: content minimum width for text caret

https://bugs.webkit.org/show_bug.cgi?id=269128 Reviewed by Darin Adler. Updates text control computed style to include a minimum sizing so the caret shows. * LayoutTests/fast/forms/text/text-field-sizing-caret-expected.txt: Added. * LayoutTests/fast/forms/text/text-field-sizing-caret.html: Added. * LayoutTests/fast/forms/textarea/textarea-field-sizing-caret-expected.txt: Added. * LayoutTests/fast/forms/textarea/textarea-field-sizing-caret.html: Added. * Source/WebCore/html/HTMLTextFormControlElement.cpp: (WebCore::HTMLTextFormControlElement::adjustInnerTextStyle const): Canonical link: https://commits.webkit.org/279115@main
WebKit · May 22, 2024 · c2e64ba · c2e64ba
1 parent 45503f8
commit c2e64ba
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 0 deletions.
diff --git a/LayoutTests/fast/forms/text/text-field-sizing-caret-expected.txt b/LayoutTests/fast/forms/text/text-field-sizing-caret-expected.txt
@@ -0,0 +1,6 @@
+
+
+PASS The width of an empty text input should be same as the caret width
+PASS The width of an empty search input should be same as the caret width
+PASS The width of an empty number input should be same as the caret width
+
diff --git a/LayoutTests/fast/forms/text/text-field-sizing-caret.html b/LayoutTests/fast/forms/text/text-field-sizing-caret.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+input {
+  border: none;
+  padding: 0px;
+  field-sizing: content;
+}
+input::-webkit-search-cancel-button {
+  display: none;
+}
+input::-webkit-inner-spin-button {
+  display: none;
+}
+</style>
+<input id="text">
+<input id="search" type="search">
+<input id="number" type="number">
+<script>
+text.focus();
+finalCaretRect = internals.absoluteCaretBounds();
+
+test(() => {
+  assert_equals(document.querySelector('#text').offsetWidth, finalCaretRect.width);
+}, 'The width of an empty text input should be same as the caret width');
+test(() => {
+  assert_equals(document.querySelector('#search').offsetWidth, finalCaretRect.width);
+}, 'The width of an empty search input should be same as the caret width');
+test(() => {
+  assert_equals(document.querySelector('#number').offsetWidth, finalCaretRect.width);
+}, 'The width of an empty number input should be same as the caret width');
+</script>
diff --git a/LayoutTests/fast/forms/textarea/textarea-field-sizing-caret-expected.txt b/LayoutTests/fast/forms/textarea/textarea-field-sizing-caret-expected.txt
@@ -0,0 +1,5 @@
+
+
+PASS The width of an empty textarea should be same as the caret width
+PASS The height of an empty textarea should be same as the caret height in a vertical writing-mode
+
diff --git a/LayoutTests/fast/forms/textarea/textarea-field-sizing-caret.html b/LayoutTests/fast/forms/textarea/textarea-field-sizing-caret.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+textarea {
+  border: none;
+  padding: 0px;
+  field-sizing: content;
+}
+</style>
+<textarea id="textarea"></textarea>
+<textarea style="writing-mode:vertical-rl"></textarea>
+<script>
+textarea.focus();
+finalCaretRect = internals.absoluteCaretBounds();
+test(() => {
+  assert_equals(document.querySelector('textarea').offsetWidth, finalCaretRect.width);
+}, 'The width of an empty textarea should be same as the caret width');
+test(() => {
+  assert_equals(document.querySelectorAll('textarea')[1].offsetHeight, finalCaretRect.width);
+}, 'The height of an empty textarea should be same as the caret height in a vertical writing-mode');
+</script>
diff --git a/Source/WebCore/html/HTMLTextFormControlElement.cpp b/Source/WebCore/html/HTMLTextFormControlElement.cpp
@@ -908,6 +908,9 @@ void HTMLTextFormControlElement::adjustInnerTextStyle(const RenderStyle& parentS
         }
     }
 
+    if (parentStyle.fieldSizing() == FieldSizing::Content)
+        textBlockStyle.setLogicalMinWidth(Length { caretWidth(), LengthType::Fixed });
+
 #if PLATFORM(IOS_FAMILY)
     if (textBlockStyle.textSecurity() != TextSecurity::None && !textBlockStyle.isLeftToRightDirection()) {
         // Preserve the alignment but force the direction to LTR so that the last-typed, unmasked character