diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp index b74b001028..ad49d9d6f4 100644 --- a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp @@ -439,7 +439,7 @@ void BlockFormattingContext::place_block_level_element_in_normal_flow_vertically compute_vertical_box_model_metrics(child_box, containing_block); float y = box_state.border_box_top() - + box_state.offset_top; + + box_state.inset_top; Vector collapsible_margins; @@ -529,7 +529,7 @@ void BlockFormattingContext::place_block_level_element_in_normal_flow_horizontal if (containing_block.computed_values().text_align() == CSS::TextAlign::LibwebCenter) { x += (available_width_within_containing_block / 2) - box_state.content_width / 2; } else { - x += box_state.margin_box_left() + box_state.offset_left; + x += box_state.margin_box_left() + box_state.inset_left; } box_state.offset = Gfx::FloatPoint { x, box_state.offset.y() }; @@ -592,7 +592,7 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer // First we place the box normally (to get the right y coordinate.) // If we have a LineBuilder, we're in the middle of inline layout, otherwise this is block layout. if (line_builder) { - float y_offset = box_state.margin_box_top() + box_state.offset_top; + float y_offset = box_state.margin_box_top() + box_state.inset_top; line_builder->break_if_needed(layout_mode, box_state.border_box_width(), false); box_state.offset.set_y(line_builder->current_y() + y_offset); line_builder->adjust_last_line_after_inserting_floating_box({}, box.computed_values().float_(), box_state.border_box_width()); diff --git a/Userland/Libraries/LibWeb/Layout/BoxModelMetrics.h b/Userland/Libraries/LibWeb/Layout/BoxModelMetrics.h index a298a95315..88b6fa9853 100644 --- a/Userland/Libraries/LibWeb/Layout/BoxModelMetrics.h +++ b/Userland/Libraries/LibWeb/Layout/BoxModelMetrics.h @@ -22,7 +22,7 @@ public: PixelBox margin; PixelBox padding; PixelBox border; - PixelBox offset; + PixelBox inset; PixelBox margin_box() const; PixelBox padding_box() const; diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp index 2581d76b77..30292796f9 100644 --- a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp @@ -669,7 +669,7 @@ void FormattingContext::compute_height_for_absolutely_positioned_non_replaced_el else if (specified_height.is_auto() && !specified_top.is_auto() && specified_bottom.is_auto()) { specified_height = CSS::Length(compute_auto_height_for_block_level_element(m_state, box), CSS::Length::Type::Px); - box_state.offset_bottom = containing_block_state.content_height - specified_height.to_px(box) - specified_top.to_px(box) - box_state.margin_top - box_state.padding_top - box_state.border_top - box_state.margin_bottom - box_state.padding_bottom - box_state.border_bottom; + box_state.inset_bottom = containing_block_state.content_height - specified_height.to_px(box) - specified_top.to_px(box) - box_state.margin_top - box_state.padding_top - box_state.border_top - box_state.margin_bottom - box_state.padding_bottom - box_state.border_bottom; } else if (specified_height.is_auto() && !specified_top.is_auto() && !specified_bottom.is_auto()) { @@ -709,10 +709,10 @@ void FormattingContext::layout_absolutely_positioned_element(Box const& box) box_state.border_top = box.computed_values().border_top().width; box_state.border_bottom = box.computed_values().border_bottom().width; - box_state.offset_left = box.computed_values().offset().left.resolved(box, width_of_containing_block).to_px(box); - box_state.offset_top = box.computed_values().offset().top.resolved(box, height_of_containing_block).to_px(box); - box_state.offset_right = box.computed_values().offset().right.resolved(box, width_of_containing_block).to_px(box); - box_state.offset_bottom = box.computed_values().offset().bottom.resolved(box, height_of_containing_block).to_px(box); + box_state.inset_left = box.computed_values().offset().left.resolved(box, width_of_containing_block).to_px(box); + box_state.inset_top = box.computed_values().offset().top.resolved(box, height_of_containing_block).to_px(box); + box_state.inset_right = box.computed_values().offset().right.resolved(box, width_of_containing_block).to_px(box); + box_state.inset_bottom = box.computed_values().offset().bottom.resolved(box, height_of_containing_block).to_px(box); auto is_auto = [](auto const& length_percentage) { return length_percentage.is_length() && length_percentage.length().is_auto(); @@ -728,12 +728,12 @@ void FormattingContext::layout_absolutely_positioned_element(Box const& box) Gfx::FloatPoint used_offset; if (!is_auto(box.computed_values().offset().left)) { - float x_offset = box_state.offset_left + float x_offset = box_state.inset_left + box_state.border_box_left(); used_offset.set_x(x_offset + box_state.margin_left); } else if (!is_auto(box.computed_values().offset().right)) { float x_offset = 0 - - box_state.offset_right + - box_state.inset_right - box_state.border_box_right(); used_offset.set_x(containing_block_state.content_width + x_offset - box_state.content_width - box_state.margin_right); } else { @@ -742,12 +742,12 @@ void FormattingContext::layout_absolutely_positioned_element(Box const& box) } if (!is_auto(box.computed_values().offset().top)) { - float y_offset = box_state.offset_top + float y_offset = box_state.inset_top + box_state.border_box_top(); used_offset.set_y(y_offset + box_state.margin_top); } else if (!is_auto(box.computed_values().offset().bottom)) { float y_offset = 0 - - box_state.offset_bottom + - box_state.inset_bottom - box_state.border_box_bottom(); used_offset.set_y(containing_block_state.content_height + y_offset - box_state.content_height - box_state.margin_bottom); } else { @@ -786,23 +786,23 @@ void FormattingContext::compute_position(Box const& box) if (specified_left.is_auto() && specified_right.is_auto()) { // If both 'left' and 'right' are 'auto' (their initial values), the used values are '0' (i.e., the boxes stay in their original position). - box_state.offset_left = 0; - box_state.offset_right = 0; + box_state.inset_left = 0; + box_state.inset_right = 0; } else if (specified_left.is_auto()) { // If 'left' is 'auto', its used value is minus the value of 'right' (i.e., the boxes move to the left by the value of 'right'). - box_state.offset_right = specified_right.to_px(box); - box_state.offset_left = 0 - box_state.offset_right; + box_state.inset_right = specified_right.to_px(box); + box_state.inset_left = 0 - box_state.inset_right; } else if (specified_right.is_auto()) { // If 'right' is specified as 'auto', its used value is minus the value of 'left'. - box_state.offset_left = specified_left.to_px(box); - box_state.offset_right = 0 - box_state.offset_left; + box_state.inset_left = specified_left.to_px(box); + box_state.inset_right = 0 - box_state.inset_left; } else { // If neither 'left' nor 'right' is 'auto', the position is over-constrained, and one of them has to be ignored. // If the 'direction' property of the containing block is 'ltr', the value of 'left' wins and 'right' becomes -'left'. // If 'direction' of the containing block is 'rtl', 'right' wins and 'left' is ignored. // FIXME: Check direction (assuming 'ltr' for now). - box_state.offset_left = specified_left.to_px(box); - box_state.offset_right = 0 - box_state.offset_left; + box_state.inset_left = specified_left.to_px(box); + box_state.inset_right = 0 - box_state.inset_left; } } diff --git a/Userland/Libraries/LibWeb/Layout/FormattingState.cpp b/Userland/Libraries/LibWeb/Layout/FormattingState.cpp index eeb8b6d37e..8b18f5f9fd 100644 --- a/Userland/Libraries/LibWeb/Layout/FormattingState.cpp +++ b/Userland/Libraries/LibWeb/Layout/FormattingState.cpp @@ -52,7 +52,7 @@ void FormattingState::commit() auto& node_state = *it.value; // Transfer box model metrics. - node.box_model().offset = { node_state.offset_top, node_state.offset_right, node_state.offset_bottom, node_state.offset_left }; + node.box_model().inset = { node_state.inset_top, node_state.inset_right, node_state.inset_bottom, node_state.inset_left }; node.box_model().padding = { node_state.padding_top, node_state.padding_right, node_state.padding_bottom, node_state.padding_left }; node.box_model().border = { node_state.border_top, node_state.border_right, node_state.border_bottom, node_state.border_left }; node.box_model().margin = { node_state.margin_top, node_state.margin_right, node_state.margin_bottom, node_state.margin_left }; diff --git a/Userland/Libraries/LibWeb/Layout/FormattingState.h b/Userland/Libraries/LibWeb/Layout/FormattingState.h index 99789b93e1..ca330caa65 100644 --- a/Userland/Libraries/LibWeb/Layout/FormattingState.h +++ b/Userland/Libraries/LibWeb/Layout/FormattingState.h @@ -54,10 +54,10 @@ struct FormattingState { float padding_top { 0 }; float padding_bottom { 0 }; - float offset_left { 0 }; - float offset_right { 0 }; - float offset_top { 0 }; - float offset_bottom { 0 }; + float inset_left { 0 }; + float inset_right { 0 }; + float inset_top { 0 }; + float inset_bottom { 0 }; Vector line_boxes;