LibWeb: Implement justify-*: left/right

(cherry picked from commit 4a3a9e6ec4891a6e38d175cca796770092e6b9a2)
SerenityOS · Nov 8, 2024 · b2d8231 · b2d8231
1 parent a1d89d5
commit b2d8231
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/Userland/Libraries/LibWeb/CSS/Enums.json b/Userland/Libraries/LibWeb/CSS/Enums.json
@@ -253,7 +253,9 @@
     "space-between",
     "space-around",
     "space-evenly",
-    "stretch"
+    "stretch",
+    "left",
+    "right"
   ],
   "justify-items": [
     "baseline",
@@ -268,7 +270,9 @@
     "self-start",
     "start",
     "stretch",
-    "unsafe"
+    "unsafe",
+    "left",
+    "right"
   ],
   "justify-self": [
     "auto",
@@ -283,7 +287,9 @@
     "self-start",
     "start",
     "stretch",
-    "unsafe"
+    "unsafe",
+    "left",
+    "right"
   ],
   "line-style": [
     "none",

diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
@@ -1269,6 +1269,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
         if (auto_margins == 0 && number_of_items > 0) {
             switch (flex_container().computed_values().justify_content()) {
             case CSS::JustifyContent::Start:
+            case CSS::JustifyContent::Left:
                 initial_offset = 0;
                 break;
             case CSS::JustifyContent::Stretch:
@@ -1283,6 +1284,13 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
             case CSS::JustifyContent::End:
                 initial_offset = inner_main_size(m_flex_container_state);
                 break;
+            case CSS::JustifyContent::Right:
+                if (is_row_layout()) {
+                    initial_offset = inner_main_size(m_flex_container_state);
+                } else {
+                    initial_offset = 0;
+                }
+                break;
             case CSS::JustifyContent::FlexEnd:
                 if (is_direction_reverse()) {
                     initial_offset = 0;
@@ -1337,6 +1345,10 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
 
         if (auto_margins == 0) {
             switch (flex_container().computed_values().justify_content()) {
+            case CSS::JustifyContent::Start:
+            case CSS::JustifyContent::Left:
+                flex_region_render_cursor = FlexRegionRenderCursor::Left;
+                break;
             case CSS::JustifyContent::Normal:
             case CSS::JustifyContent::FlexStart:
             case CSS::JustifyContent::Center:
@@ -1351,6 +1363,13 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
             case CSS::JustifyContent::End:
                 flex_region_render_cursor = FlexRegionRenderCursor::Right;
                 break;
+            case CSS::JustifyContent::Right:
+                if (is_row_layout()) {
+                    flex_region_render_cursor = FlexRegionRenderCursor::Right;
+                } else {
+                    flex_region_render_cursor = FlexRegionRenderCursor::Left;
+                }
+                break;
             case CSS::JustifyContent::FlexEnd:
                 if (!is_direction_reverse()) {
                     flex_region_render_cursor = FlexRegionRenderCursor::Right;
@@ -2179,6 +2198,7 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
     CSSPixels main_offset = 0;
     switch (flex_container().computed_values().justify_content()) {
     case CSS::JustifyContent::Start:
+    case CSS::JustifyContent::Left:
         pack_from_end = false;
         break;
     case CSS::JustifyContent::Stretch:
@@ -2190,6 +2210,9 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
     case CSS::JustifyContent::End:
         pack_from_end = true;
         break;
+    case CSS::JustifyContent::Right:
+        pack_from_end = is_row_layout();
+        break;
     case CSS::JustifyContent::FlexEnd:
         pack_from_end = !is_direction_reverse();
         break;

diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
@@ -1426,6 +1426,10 @@ CSS::JustifyItems GridFormattingContext::justification_for_item(Box const& box)
         return CSS::JustifyItems::Safe;
     case CSS::JustifySelf::Unsafe:
         return CSS::JustifyItems::Unsafe;
+    case CSS::JustifySelf::Left:
+        return CSS::JustifyItems::Left;
+    case CSS::JustifySelf::Right:
+        return CSS::JustifyItems::Right;
     default:
         VERIFY_NOT_REACHED();
     }
@@ -1516,11 +1520,13 @@ void GridFormattingContext::resolve_grid_item_widths()
                 break;
             case CSS::JustifyItems::Start:
             case CSS::JustifyItems::FlexStart:
+            case CSS::JustifyItems::Left:
                 result.margin_right += free_space_left_for_alignment;
                 result.width = a_width;
                 break;
             case CSS::JustifyItems::End:
             case CSS::JustifyItems::FlexEnd:
+            case CSS::JustifyItems::Right:
                 result.margin_left += free_space_left_for_alignment;
                 result.width = a_width;
                 break;
@@ -1744,7 +1750,7 @@ CSSPixelRect GridFormattingContext::get_grid_area_rect(GridItem const& grid_item
         auto free_space = grid_container_width - sum_base_size_of_columns;
         x_start = free_space / 2;
         x_end = free_space / 2;
-    } else if (justify_content == CSS::JustifyContent::End) {
+    } else if (justify_content == CSS::JustifyContent::End || justify_content == CSS::JustifyContent::Right) {
         auto free_space = grid_container_width - sum_base_size_of_columns;
         x_start = free_space;
         x_end = free_space;
@@ -1921,10 +1927,12 @@ void GridFormattingContext::layout_absolutely_positioned_element(Box const& box,
             break;
         case CSS::JustifyItems::Start:
         case CSS::JustifyItems::FlexStart:
+        case CSS::JustifyItems::Left:
             box_state.inset_right = width_left_for_alignment;
             break;
         case CSS::JustifyItems::End:
         case CSS::JustifyItems::FlexEnd:
+        case CSS::JustifyItems::Right:
             box_state.inset_left = width_left_for_alignment;
             break;
         default: