diff options
| author | FalseHonesty <thefalsehonesty@gmail.com> | 2023-06-01 20:42:41 -0400 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2023-06-02 05:21:22 +0200 |
| commit | de9604212f7c4a9bc2607608ffd28c88e5b02072 (patch) | |
| tree | 9f7cd87838ab1527edd99c348ed7a8d24e70383f | |
| parent | 54fb9477a4d69efa15c65f62dfbd4a13feec3af9 (diff) | |
| download | serenity-de9604212f7c4a9bc2607608ffd28c88e5b02072.zip | |
LibWeb: Avoid text-aligning content that is too long for its line box
Previously, we would always respect the `text-align` property, even if
the text being aligned was too long for its line box and would be
clipped. This led to seeing the clipped middle/end of strings when we
should instead always see the beginning of the text.
| -rw-r--r-- | Tests/LibWeb/Layout/expected/text-align-overflow.txt | 9 | ||||
| -rw-r--r-- | Tests/LibWeb/Layout/input/text-align-overflow.html | 13 | ||||
| -rw-r--r-- | Userland/Libraries/LibWeb/Layout/LineBuilder.cpp | 28 |
3 files changed, 38 insertions, 12 deletions
diff --git a/Tests/LibWeb/Layout/expected/text-align-overflow.txt b/Tests/LibWeb/Layout/expected/text-align-overflow.txt new file mode 100644 index 0000000000..854ace1b2e --- /dev/null +++ b/Tests/LibWeb/Layout/expected/text-align-overflow.txt @@ -0,0 +1,9 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (0,0) content-size 800x33.46875 [BFC] children: not-inline + BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline + BlockContainer <div.outer> at (18,8) content-size 80x17.46875 children: not-inline + BlockContainer <span.text> at (18,8) content-size 80x17.46875 [BFC] children: inline + line 0 width: 189.875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 22, rect: [18,8 189.875x17.46875] + "My super long message!" + TextNode <#text>
\ No newline at end of file diff --git a/Tests/LibWeb/Layout/input/text-align-overflow.html b/Tests/LibWeb/Layout/input/text-align-overflow.html new file mode 100644 index 0000000000..8255dfcc83 --- /dev/null +++ b/Tests/LibWeb/Layout/input/text-align-overflow.html @@ -0,0 +1,13 @@ +<!DOCTYPE html><style> + .outer { + margin-left: 10px; + width: 80px; + } + + .text { + display: block; + text-align: center; + overflow: hidden; + white-space: nowrap; + } +</style><div class="outer"><span class="text">My super long message!
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp b/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp index beba5659ac..80e199c610 100644 --- a/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp +++ b/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp @@ -170,18 +170,22 @@ void LineBuilder::update_last_line() CSSPixels excess_horizontal_space = m_available_width_for_current_line - line_box.width(); - switch (text_align) { - case CSS::TextAlign::Center: - case CSS::TextAlign::LibwebCenter: - x_offset += excess_horizontal_space / 2; - break; - case CSS::TextAlign::Right: - x_offset += excess_horizontal_space; - break; - case CSS::TextAlign::Left: - case CSS::TextAlign::Justify: - default: - break; + // If (after justification, if any) the inline contents of a line box are too long to fit within it, + // then the contents are start-aligned: any content that doesn't fit overflows the line box’s end edge. + if (excess_horizontal_space > 0) { + switch (text_align) { + case CSS::TextAlign::Center: + case CSS::TextAlign::LibwebCenter: + x_offset += excess_horizontal_space / 2; + break; + case CSS::TextAlign::Right: + x_offset += excess_horizontal_space; + break; + case CSS::TextAlign::Left: + case CSS::TextAlign::Justify: + default: + break; + } } auto strut_baseline = [&] { |