From 1537d589ca4908c3631dc38e66c97fd37fa2f526 Mon Sep 17 00:00:00 2001 From: BenJilks Date: Sun, 11 Aug 2024 18:14:12 +0100 Subject: [PATCH] LibWeb: Add `start` and `end` values to `text-align` The `start` and `end` value set the text alignment based on the computed value of `direction`. The default value of `text-align` is now `start` instead of `left`. --- .../Layout/expected/css-dir-selector.txt | 18 +++++++------- .../writing-modes-direction-inline.txt | 24 +++++++++++++++++++ .../input/writing-modes-direction-inline.html | 4 ++++ .../css/getComputedStyle-print-all.txt | 2 +- .../Libraries/LibWeb/CSS/ComputedValues.h | 2 +- Userland/Libraries/LibWeb/CSS/Enums.json | 2 ++ Userland/Libraries/LibWeb/CSS/Properties.json | 2 +- .../Libraries/LibWeb/Layout/LineBuilder.cpp | 9 +++++++ 8 files changed, 51 insertions(+), 12 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/writing-modes-direction-inline.txt create mode 100644 Tests/LibWeb/Layout/input/writing-modes-direction-inline.html diff --git a/Tests/LibWeb/Layout/expected/css-dir-selector.txt b/Tests/LibWeb/Layout/expected/css-dir-selector.txt index 14e88bfe2d21..e74247f2f703 100644 --- a/Tests/LibWeb/Layout/expected/css-dir-selector.txt +++ b/Tests/LibWeb/Layout/expected/css-dir-selector.txt @@ -18,9 +18,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer <(anonymous)> at (200,212) content-size 592x0 children: inline TextNode <#text> BlockContainer
at (401,213) content-size 100x100 children: inline - frag 0 from TextNode start: 0, length: 11, rect: [401,213 79.96875x17] baseline: 13.296875 + frag 0 from TextNode start: 0, length: 11, rect: [421,213 79.96875x17] baseline: 13.296875 "Well, hello" - frag 1 from TextNode start: 12, length: 8, rect: [401,230 59.21875x17] baseline: 13.296875 + frag 1 from TextNode start: 12, length: 8, rect: [442,230 59.21875x17] baseline: 13.296875 "friends!" TextNode <#text> BlockContainer <(anonymous)> at (200,314) content-size 592x0 children: inline @@ -50,17 +50,17 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer <(anonymous)> at (200,620) content-size 592x0 children: inline TextNode <#text> BlockContainer
at (401,621) content-size 100x100 children: inline - frag 0 from TextNode start: 0, length: 26, rect: [401,621 86.125x17] baseline: 13.296875 + frag 0 from TextNode start: 0, length: 26, rect: [415,621 86.125x17] baseline: 13.296875 "حسنًا ، مرحباً" - frag 1 from TextNode start: 27, length: 25, rect: [401,638 78.125x17] baseline: 13.296875 + frag 1 from TextNode start: 27, length: 25, rect: [423,638 78.125x17] baseline: 13.296875 "أيها الأصدقاء" TextNode <#text> BlockContainer <(anonymous)> at (200,722) content-size 592x0 children: inline TextNode <#text> BlockContainer
at (401,723) content-size 100x100 children: inline - frag 0 from TextNode start: 0, length: 26, rect: [401,723 86.125x17] baseline: 13.296875 + frag 0 from TextNode start: 0, length: 26, rect: [415,723 86.125x17] baseline: 13.296875 "حسنًا ، مرحباً" - frag 1 from TextNode start: 27, length: 25, rect: [401,740 78.125x17] baseline: 13.296875 + frag 1 from TextNode start: 27, length: 25, rect: [423,740 78.125x17] baseline: 13.296875 "أيها الأصدقاء" TextNode <#text> BlockContainer <(anonymous)> at (200,824) content-size 592x0 children: inline @@ -75,7 +75,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x832] PaintableWithLines (BlockContainer
) [300,110 102x102] TextPaintable (TextNode<#text>) PaintableWithLines (BlockContainer(anonymous)) [200,212 592x0] - PaintableWithLines (BlockContainer
) [400,212 102x102] + PaintableWithLines (BlockContainer
) [400,212 102x102] overflow: [401,213 100.21875x100] TextPaintable (TextNode<#text>) PaintableWithLines (BlockContainer(anonymous)) [200,314 592x0] PaintableWithLines (BlockContainer
) [300,314 102x102] @@ -87,9 +87,9 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x832] PaintableWithLines (BlockContainer
) [300,518 102x102] TextPaintable (TextNode<#text>) PaintableWithLines (BlockContainer(anonymous)) [200,620 592x0] - PaintableWithLines (BlockContainer
) [400,620 102x102] + PaintableWithLines (BlockContainer
) [400,620 102x102] overflow: [401,621 100.125x100] TextPaintable (TextNode<#text>) PaintableWithLines (BlockContainer(anonymous)) [200,722 592x0] - PaintableWithLines (BlockContainer
) [400,722 102x102] + PaintableWithLines (BlockContainer
) [400,722 102x102] overflow: [401,723 100.125x100] TextPaintable (TextNode<#text>) PaintableWithLines (BlockContainer(anonymous)) [200,824 592x0] diff --git a/Tests/LibWeb/Layout/expected/writing-modes-direction-inline.txt b/Tests/LibWeb/Layout/expected/writing-modes-direction-inline.txt new file mode 100644 index 000000000000..918b8814e96c --- /dev/null +++ b/Tests/LibWeb/Layout/expected/writing-modes-direction-inline.txt @@ -0,0 +1,24 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x33 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x17 children: inline + frag 0 from TextNode start: 0, length: 1, rect: [737,8 8x17] baseline: 13.296875 + " " + InlineNode + frag 0 from TextNode start: 0, length: 5, rect: [690,8 46.71875x17] baseline: 13.296875 + "aaaaa" + TextNode <#text> + TextNode <#text> + InlineNode + frag 0 from TextNode start: 0, length: 5, rect: [745,8 47.34375x17] baseline: 13.296875 + "bbbbb" + TextNode <#text> + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x33] + PaintableWithLines (BlockContainer) [8,8 784x17] overflow: [8,8 784.34375x17] + InlinePaintable (InlineNode) + TextPaintable (TextNode<#text>) + TextPaintable (TextNode<#text>) + InlinePaintable (InlineNode) + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/input/writing-modes-direction-inline.html b/Tests/LibWeb/Layout/input/writing-modes-direction-inline.html new file mode 100644 index 000000000000..73a98eb7aa8e --- /dev/null +++ b/Tests/LibWeb/Layout/input/writing-modes-direction-inline.html @@ -0,0 +1,4 @@ + + +aaaaa +bbbbb diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt index f20ac98e2379..4a64b08a752d 100644 --- a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt +++ b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt @@ -192,7 +192,7 @@ stroke: none stroke-opacity: 1 stroke-width: 1px table-layout: auto -text-align: left +text-align: start text-anchor: start text-decoration-color: rgb(0, 0, 0) text-decoration-line: none diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h index b3d6b72625d1..6d4fdaa3934d 100644 --- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h +++ b/Userland/Libraries/LibWeb/CSS/ComputedValues.h @@ -104,7 +104,7 @@ class InitialValues { static CSS::ContentVisibility content_visibility() { return CSS::ContentVisibility::Visible; } static CSS::Cursor cursor() { return CSS::Cursor::Auto; } static CSS::WhiteSpace white_space() { return CSS::WhiteSpace::Normal; } - static CSS::TextAlign text_align() { return CSS::TextAlign::Left; } + static CSS::TextAlign text_align() { return CSS::TextAlign::Start; } static CSS::TextJustify text_justify() { return CSS::TextJustify::Auto; } static CSS::Positioning position() { return CSS::Positioning::Static; } static CSS::TextDecorationLine text_decoration_line() { return CSS::TextDecorationLine::None; } diff --git a/Userland/Libraries/LibWeb/CSS/Enums.json b/Userland/Libraries/LibWeb/CSS/Enums.json index b5c47d719508..8382f7cde8bf 100644 --- a/Userland/Libraries/LibWeb/CSS/Enums.json +++ b/Userland/Libraries/LibWeb/CSS/Enums.json @@ -390,6 +390,8 @@ "text-align": [ "center", "justify", + "start", + "end", "left", "right", "-libweb-center", diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json index a3b2a70f4659..ffc4586fc7b9 100644 --- a/Userland/Libraries/LibWeb/CSS/Properties.json +++ b/Userland/Libraries/LibWeb/CSS/Properties.json @@ -2470,7 +2470,7 @@ "text-align": { "animation-type": "discrete", "inherited": true, - "initial": "left", + "initial": "start", "valid-types": [ "text-align" ] diff --git a/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp b/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp index 72f80c8cae6e..7e3207db69e9 100644 --- a/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp +++ b/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp @@ -163,6 +163,7 @@ void LineBuilder::update_last_line() auto& line_box = line_boxes.last(); auto text_align = m_context.containing_block().computed_values().text_align(); + auto direction = m_context.containing_block().computed_values().direction(); auto current_line_height = max(m_max_height_on_current_line, m_context.containing_block().computed_values().line_height()); CSSPixels x_offset_top = m_context.leftmost_x_offset_at(m_current_y); @@ -179,6 +180,14 @@ void LineBuilder::update_last_line() case CSS::TextAlign::LibwebCenter: x_offset += excess_horizontal_space / 2; break; + case CSS::TextAlign::Start: + if (direction == CSS::Direction::Rtl) + x_offset += excess_horizontal_space; + break; + case CSS::TextAlign::End: + if (direction == CSS::Direction::Ltr) + x_offset += excess_horizontal_space; + break; case CSS::TextAlign::Right: case CSS::TextAlign::LibwebRight: x_offset += excess_horizontal_space;