diff --git a/Userland/Libraries/LibWeb/CSS/Enums.json b/Userland/Libraries/LibWeb/CSS/Enums.json index a43302b962cd21..68215dcbbc5a3b 100644 --- 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 index 97a4cb1194af32..4f52f180819b6a 100644 --- 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 index 130ab95197b9cb..837b414bc1abeb 100644 --- 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: