LibWeb: Implement justify-*: left/right

Author: https://github.com/Gingeh
Commit: 4a3a9e6ec4
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1338
Reviewed-by: https://github.com/AtkinsSJ ✅

Userland/Libraries/LibWeb/CSS/Enums.json

@@ -235,7 +235,9 @@
     "space-between",
     "space-around",
     "space-evenly",
-    "stretch"
+    "stretch",
+    "left",
+    "right"
   ],
   "justify-items": [
     "baseline",
@@ -250,7 +252,9 @@
     "self-start",
     "start",
     "stretch",
-    "unsafe"
+    "unsafe",
+    "left",
+    "right"
   ],
   "justify-self": [
     "auto",
@@ -265,7 +269,9 @@
     "self-start",
     "start",
     "stretch",
-    "unsafe"
+    "unsafe",
+    "left",
+    "right"
   ],
   "line-style": [
     "none",

Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp

@@ -1262,6 +1262,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:
@@ -1276,6 +1277,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;
@@ -1330,6 +1338,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:
@@ -1344,6 +1356,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;
@@ -2172,6 +2191,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:
@@ -2183,6 +2203,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;

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;
@@ -1938,10 +1944,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: