From 629068c2a7eb02db37ffb4fe8d536306ee71e156 Mon Sep 17 00:00:00 2001 From: rmg-x Date: Sun, 7 Jul 2024 13:15:30 -0500 Subject: [PATCH] LibWeb: Ensure normal line-height on `HTMLInputElement` Previously, setting CSS `line-height: 0` on an `input` element would result in no text being displayed. Other browsers handle this by setting the minimum height to the "normal" value for single line inputs. --- .../Layout/expected/css-line-height-zero.txt | 19 +++++++++++++++++++ .../Layout/input/css-line-height-zero.html | 5 +++++ .../LibWeb/HTML/HTMLInputElement.cpp | 8 ++++++++ 3 files changed, 32 insertions(+) create mode 100644 Tests/LibWeb/Layout/expected/css-line-height-zero.txt create mode 100644 Tests/LibWeb/Layout/input/css-line-height-zero.html diff --git a/Tests/LibWeb/Layout/expected/css-line-height-zero.txt b/Tests/LibWeb/Layout/expected/css-line-height-zero.txt new file mode 100644 index 00000000000..622f303c9c4 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/css-line-height-zero.txt @@ -0,0 +1,19 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x37 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x21 children: inline + frag 0 from BlockContainer start: 0, length: 0, rect: [9,9 191.875x19] baseline: 13.296875 + BlockContainer at (9,9) content-size 191.875x19 inline-block [BFC] children: not-inline + Box
at (11,10) content-size 187.875x17 flex-container(row) [FFC] children: not-inline + BlockContainer
at (11,10) content-size 187.875x17 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 11, rect: [11,10 91.953125x17] baseline: 13.296875 + "Hello World" + TextNode <#text> + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x37] + PaintableWithLines (BlockContainer) [8,8 784x21] + PaintableWithLines (BlockContainer) [8,8 193.875x21] + PaintableBox (Box
) [9,9 191.875x19] + PaintableWithLines (BlockContainer
) [11,10 187.875x17] + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/input/css-line-height-zero.html b/Tests/LibWeb/Layout/input/css-line-height-zero.html new file mode 100644 index 00000000000..76faff47c20 --- /dev/null +++ b/Tests/LibWeb/Layout/input/css-line-height-zero.html @@ -0,0 +1,5 @@ + diff --git a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp index bd5a57efdec..890bc5e05b0 100644 --- a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp +++ b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp @@ -127,6 +127,14 @@ void HTMLInputElement::adjust_computed_style(CSS::StyleProperties& style) if (style.property(CSS::PropertyID::Width)->has_auto()) style.set_property(CSS::PropertyID::Width, CSS::LengthStyleValue::create(CSS::Length(size(), CSS::Length::Type::Ch))); } + + // NOTE: The following line-height check is done for web compatability and usability reasons. + // FIXME: The "normal" line-height value should be calculated but assume 1.0 for now. + double normal_line_height = 1.0; + double current_line_height = style.line_height().to_double(); + + if (is_single_line() && current_line_height < normal_line_height) + style.set_property(CSS::PropertyID::LineHeight, CSS::IdentifierStyleValue::create(CSS::ValueID::Normal)); } void HTMLInputElement::set_checked(bool checked, ChangeSource change_source)