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`.
LadybirdBrowser · Aug 13, 2024 · 1537d58 · 1537d58
1 parent 8298955
commit 1537d58
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 12 deletions.
diff --git 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 <div> 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 <div> 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 <div> 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<DIV>) [300,110 102x102]
         TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer(anonymous)) [200,212 592x0]
-      PaintableWithLines (BlockContainer<DIV>) [400,212 102x102]
+      PaintableWithLines (BlockContainer<DIV>) [400,212 102x102] overflow: [401,213 100.21875x100]
         TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer(anonymous)) [200,314 592x0]
       PaintableWithLines (BlockContainer<DIV>) [300,314 102x102]
@@ -87,9 +87,9 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x832]
       PaintableWithLines (BlockContainer<DIV>) [300,518 102x102]
         TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer(anonymous)) [200,620 592x0]
-      PaintableWithLines (BlockContainer<DIV>) [400,620 102x102]
+      PaintableWithLines (BlockContainer<DIV>) [400,620 102x102] overflow: [401,621 100.125x100]
         TextPaintable (TextNode<#text>)
       PaintableWithLines (BlockContainer(anonymous)) [200,722 592x0]
-      PaintableWithLines (BlockContainer<DIV>) [400,722 102x102]
+      PaintableWithLines (BlockContainer<DIV>) [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
@@ -0,0 +1,24 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x33 [BFC] children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x17 children: inline
+      frag 0 from TextNode start: 0, length: 1, rect: [737,8 8x17] baseline: 13.296875
+          " "
+      InlineNode <span>
+        frag 0 from TextNode start: 0, length: 5, rect: [690,8 46.71875x17] baseline: 13.296875
+            "aaaaa"
+        TextNode <#text>
+      TextNode <#text>
+      InlineNode <span>
+        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<HTML>) [0,0 800x33]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x17] overflow: [8,8 784.34375x17]
+      InlinePaintable (InlineNode<SPAN>)
+        TextPaintable (TextNode<#text>)
+      TextPaintable (TextNode<#text>)
+      InlinePaintable (InlineNode<SPAN>)
+        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
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<html dir="rtl">
+<span>aaaaa</span>
+<span>bbbbb</span>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;