Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-10-31 05:10:57 +00:00
Code Issues Projects Releases Packages Wiki Activity
ladybird/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp

256 lines
10 KiB
C++
Raw Normal View History

LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
/*
* Copyright (c) 2022, Andreas Kling <kling@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <LibWeb/Layout/LineBuilder.h>
#include <LibWeb/Layout/TextNode.h>
namespace Web::Layout {
LibWeb: Make LineBuilder aware of the current LayoutMode This will allow us to override the available space correctly when doing intrinsic sizing.
2022-03-18 14:39:07 +01:00
LineBuilder::LineBuilder(InlineFormattingContext& context, FormattingState& formatting_state, LayoutMode layout_mode)
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
: m_context(context)
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
, m_formatting_state(formatting_state)
LibWeb: Rename FormattingState::ensure() -> get_mutable() This makes it much more obvious what the difference between get() and get_mutable() is.
2022-02-21 17:42:09 +01:00
, m_containing_block_state(formatting_state.get_mutable(context.containing_block()))
LibWeb: Make LineBuilder aware of the current LayoutMode This will allow us to override the available space correctly when doing intrinsic sizing.
2022-03-18 14:39:07 +01:00
, m_layout_mode(layout_mode)
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
{
LibWeb: Make LineBuilder assign height to empty line boxes This ensures that <br> produces empty line boxes with the line-height property as their height.
2022-01-23 01:34:26 +01:00
begin_new_line(false);
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
}
LineBuilder::~LineBuilder()
{
LibWeb: Don't do horizontal inline line layout twice for last line After pruning empty last line boxes, we now avoid re-running the horizontal fragment positioning step, since that would be wasted work.
2022-01-22 10:32:49 +01:00
if (m_last_line_needs_update)
update_last_line();
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
}
void LineBuilder::break_line()
{
update_last_line();
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
m_containing_block_state.line_boxes.append(LineBox());
LibWeb: Make LineBuilder assign height to empty line boxes This ensures that <br> produces empty line boxes with the line-height property as their height.
2022-01-23 01:34:26 +01:00
begin_new_line(true);
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
}
LibWeb: Make LineBuilder assign height to empty line boxes This ensures that <br> produces empty line boxes with the line-height property as their height.
2022-01-23 01:34:26 +01:00
void LineBuilder::begin_new_line(bool increment_y)
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
{
LibWeb: Make LineBuilder assign height to empty line boxes This ensures that <br> produces empty line boxes with the line-height property as their height.
2022-01-23 01:34:26 +01:00
if (increment_y)
m_current_y += max(m_max_height_on_current_line, m_context.containing_block().line_height());
LibWeb: Rewrite CSS float implementation to use offset-from-edge The previous implementation used relative X offsets for both left and right-side floats. This made right-side floats super awkward, since we could only determine their X position once the width of the BFC root was known, and for BFC roots with automatic width, this was not even working at all most of the time. This patch changes the way we deal with floats so that BFC keeps track of the offset-from-edge for each float. The offset is the distance from the BFC root edge (left or right, depending on float direction) to the "innermost" margin edge of the floating box. Floating box are now laid out in two passes: while going through the normal flow layout, we put floats in their *static* position (i.e the position they would have occupied if they weren't floating) and then update the Y position value to the final one. The second pass occurs later on, when the BFC root has had its width assigned by the parent context. Once we know the root width, we can set the X position value of floating boxes. (Because the X position of right-side floats is relative to the right edge of the BFC root.)
2022-03-18 14:44:36 +01:00
switch (m_layout_mode) {
LibWeb: Rename the LayoutMode enum values and explain them The old mode names, while mechanically accurate, didn't really reflect their relationship to the CSS specifications. This patch renames them as follows: Default => Normal AllPossibleLineBreaks => MinContent OnlyRequiredLineBreaks => MaxContent There's also now an explainer comment with the LayoutMode enum about the specific implications of layout in each mode.
2022-03-19 15:44:02 +01:00
case LayoutMode::Normal:
LibWeb: Rewrite CSS float implementation to use offset-from-edge The previous implementation used relative X offsets for both left and right-side floats. This made right-side floats super awkward, since we could only determine their X position once the width of the BFC root was known, and for BFC roots with automatic width, this was not even working at all most of the time. This patch changes the way we deal with floats so that BFC keeps track of the offset-from-edge for each float. The offset is the distance from the BFC root edge (left or right, depending on float direction) to the "innermost" margin edge of the floating box. Floating box are now laid out in two passes: while going through the normal flow layout, we put floats in their *static* position (i.e the position they would have occupied if they weren't floating) and then update the Y position value to the final one. The second pass occurs later on, when the BFC root has had its width assigned by the parent context. Once we know the root width, we can set the X position value of floating boxes. (Because the X position of right-side floats is relative to the right edge of the BFC root.)
2022-03-18 14:44:36 +01:00
m_available_width_for_current_line = m_context.available_space_for_line(m_current_y);
break;
LibWeb: Rename the LayoutMode enum values and explain them The old mode names, while mechanically accurate, didn't really reflect their relationship to the CSS specifications. This patch renames them as follows: Default => Normal AllPossibleLineBreaks => MinContent OnlyRequiredLineBreaks => MaxContent There's also now an explainer comment with the LayoutMode enum about the specific implications of layout in each mode.
2022-03-19 15:44:02 +01:00
case LayoutMode::MinContent:
LibWeb: Rewrite CSS float implementation to use offset-from-edge The previous implementation used relative X offsets for both left and right-side floats. This made right-side floats super awkward, since we could only determine their X position once the width of the BFC root was known, and for BFC roots with automatic width, this was not even working at all most of the time. This patch changes the way we deal with floats so that BFC keeps track of the offset-from-edge for each float. The offset is the distance from the BFC root edge (left or right, depending on float direction) to the "innermost" margin edge of the floating box. Floating box are now laid out in two passes: while going through the normal flow layout, we put floats in their *static* position (i.e the position they would have occupied if they weren't floating) and then update the Y position value to the final one. The second pass occurs later on, when the BFC root has had its width assigned by the parent context. Once we know the root width, we can set the X position value of floating boxes. (Because the X position of right-side floats is relative to the right edge of the BFC root.)
2022-03-18 14:44:36 +01:00
m_available_width_for_current_line = 0;
break;
LibWeb: Rename the LayoutMode enum values and explain them The old mode names, while mechanically accurate, didn't really reflect their relationship to the CSS specifications. This patch renames them as follows: Default => Normal AllPossibleLineBreaks => MinContent OnlyRequiredLineBreaks => MaxContent There's also now an explainer comment with the LayoutMode enum about the specific implications of layout in each mode.
2022-03-19 15:44:02 +01:00
case LayoutMode::MaxContent:
LibWeb: Rewrite CSS float implementation to use offset-from-edge The previous implementation used relative X offsets for both left and right-side floats. This made right-side floats super awkward, since we could only determine their X position once the width of the BFC root was known, and for BFC roots with automatic width, this was not even working at all most of the time. This patch changes the way we deal with floats so that BFC keeps track of the offset-from-edge for each float. The offset is the distance from the BFC root edge (left or right, depending on float direction) to the "innermost" margin edge of the floating box. Floating box are now laid out in two passes: while going through the normal flow layout, we put floats in their *static* position (i.e the position they would have occupied if they weren't floating) and then update the Y position value to the final one. The second pass occurs later on, when the BFC root has had its width assigned by the parent context. Once we know the root width, we can set the X position value of floating boxes. (Because the X position of right-side floats is relative to the right edge of the BFC root.)
2022-03-18 14:44:36 +01:00
m_available_width_for_current_line = INFINITY;
break;
}
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
m_max_height_on_current_line = 0;
LibWeb: Don't do horizontal inline line layout twice for last line After pruning empty last line boxes, we now avoid re-running the horizontal fragment positioning step, since that would be wasted work.
2022-01-22 10:32:49 +01:00
m_last_line_needs_update = true;
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
}
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
LineBox& LineBuilder::ensure_last_line_box()
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
{
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
auto& line_boxes = m_containing_block_state.line_boxes;
if (line_boxes.is_empty())
line_boxes.append(LineBox {});
return line_boxes.last();
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
}
LibWeb: Respect inline-axis margins between line box fragments :^) This makes the buckets on ACID3 space out nicely.
2022-03-09 18:46:07 +01:00
void LineBuilder::append_box(Box const& box, float leading_size, float trailing_size, float leading_margin, float trailing_margin)
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
{
LibWeb: Store box's containing line box fragment in FormattingState Layout should not change any properties of a box until the moment a FormattingState is committed.
2022-02-28 12:41:23 +01:00
auto& box_state = m_formatting_state.get_mutable(box);
LibWeb: Use coordinate instead of WeakPtr for box->fragment connection Using WeakPtr to remember which LineBoxFragment owns which Box was imposing some annoying constraints on the layout code. Importantly, it was forcing us to heap-allocate fragments, which makes it much harder to clone a FormattingState. This patch replaces the WeakPtr with a coordinate system instead. Fragments are referred to by their line box index + fragment index within the line box.
2022-02-27 10:26:38 +01:00
auto& line_box = ensure_last_line_box();
LibWeb: Respect inline-axis margins between line box fragments :^) This makes the buckets on ACID3 space out nicely.
2022-03-09 18:46:07 +01:00
line_box.add_fragment(box, 0, 0, leading_size, trailing_size, leading_margin, trailing_margin, box_state.content_width, box_state.content_height, box_state.border_box_top(), box_state.border_box_bottom());
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
m_max_height_on_current_line = max(m_max_height_on_current_line, box_state.border_box_height());
LibWeb: Use coordinate instead of WeakPtr for box->fragment connection Using WeakPtr to remember which LineBoxFragment owns which Box was imposing some annoying constraints on the layout code. Importantly, it was forcing us to heap-allocate fragments, which makes it much harder to clone a FormattingState. This patch replaces the WeakPtr with a coordinate system instead. Fragments are referred to by their line box index + fragment index within the line box.
2022-02-27 10:26:38 +01:00
LibWeb: Store box's containing line box fragment in FormattingState Layout should not change any properties of a box until the moment a FormattingState is committed.
2022-02-28 12:41:23 +01:00
box_state.containing_line_box_fragment = LineBoxFragmentCoordinate {
LibWeb: Use coordinate instead of WeakPtr for box->fragment connection Using WeakPtr to remember which LineBoxFragment owns which Box was imposing some annoying constraints on the layout code. Importantly, it was forcing us to heap-allocate fragments, which makes it much harder to clone a FormattingState. This patch replaces the WeakPtr with a coordinate system instead. Fragments are referred to by their line box index + fragment index within the line box.
2022-02-27 10:26:38 +01:00
.line_box_index = m_containing_block_state.line_boxes.size() - 1,
.fragment_index = line_box.fragments().size() - 1,
LibWeb: Store box's containing line box fragment in FormattingState Layout should not change any properties of a box until the moment a FormattingState is committed.
2022-02-28 12:41:23 +01:00
};
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
}
LibWeb: Respect inline-axis margins between line box fragments :^) This makes the buckets on ACID3 space out nicely.
2022-03-09 18:46:07 +01:00
void LineBuilder::append_text_chunk(TextNode const& text_node, size_t offset_in_node, size_t length_in_node, float leading_size, float trailing_size, float leading_margin, float trailing_margin, float content_width, float content_height)
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
{
LibWeb: Respect inline-axis margins between line box fragments :^) This makes the buckets on ACID3 space out nicely.
2022-03-09 18:46:07 +01:00
ensure_last_line_box().add_fragment(text_node, offset_in_node, length_in_node, leading_size, trailing_size, leading_margin, trailing_margin, content_width, content_height, 0, 0);
LibWeb: Support inline-level padding and border properly Here's roughly how this works: - InlineLevelIterator keeps a nesting stack of inline-level nodes with box model metrics. - When entering a node with box model metrics, we add them to the current "leading metrics". - When exiting a node with box model metrics, we add them to the current "trailing metrics". - Pending leading metrics are consumed by the first fragment added to the line. - Pending trailing metrics are consumed by the last fragment added to the line. Like before, the position of a line box fragment is the top left of its content box. However, fragments are placed horizontally along the line with space inserted for padding and border. InlineNode::paint() now expands the content rect as appropriate when painting background and borders. Note that margins and margin collapsing is not yet implemented. This makes the eyes on ACID2 horizontally centered. :^)
2022-02-14 15:52:29 +01:00
m_max_height_on_current_line = max(m_max_height_on_current_line, content_height);
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
}
LibWeb: Make text newlines in "pre" mode emit a ForcedBreak item Instead of emitting a Text item with the "should_force_break" flag set to true, newlines in newline-preserving text content now timply turn into ForcedBreak items. This makes the <pre> element work again.
2022-03-26 18:59:54 +01:00
bool LineBuilder::should_break(LayoutMode layout_mode, float next_item_width)
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
{
LibWeb: Rename the LayoutMode enum values and explain them The old mode names, while mechanically accurate, didn't really reflect their relationship to the CSS specifications. This patch renames them as follows: Default => Normal AllPossibleLineBreaks => MinContent OnlyRequiredLineBreaks => MaxContent There's also now an explainer comment with the LayoutMode enum about the specific implications of layout in each mode.
2022-03-19 15:44:02 +01:00
if (layout_mode == LayoutMode::MinContent)
LibWeb: Make LineBuilder respect LayoutMode::OnlyRequiredLineBreaks In this layout mode, we should only break when forced (e.g by an explicit <br> tag.) This is used when determining intrinsic sizes.)
2022-01-20 16:19:05 +01:00
return true;
LibWeb: Rename the LayoutMode enum values and explain them The old mode names, while mechanically accurate, didn't really reflect their relationship to the CSS specifications. This patch renames them as follows: Default => Normal AllPossibleLineBreaks => MinContent OnlyRequiredLineBreaks => MaxContent There's also now an explainer comment with the LayoutMode enum about the specific implications of layout in each mode.
2022-03-19 15:44:02 +01:00
if (layout_mode == LayoutMode::MaxContent)
LibWeb: Make LineBuilder respect LayoutMode::OnlyRequiredLineBreaks In this layout mode, we should only break when forced (e.g by an explicit <br> tag.) This is used when determining intrinsic sizes.)
2022-01-20 16:19:05 +01:00
return false;
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
auto const& line_boxes = m_containing_block_state.line_boxes;
LibWeb: Don't do horizontal inline line layout twice for last line After pruning empty last line boxes, we now avoid re-running the horizontal fragment positioning step, since that would be wasted work.
2022-01-22 10:32:49 +01:00
if (line_boxes.is_empty() || line_boxes.last().is_empty())
return false;
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
auto current_line_width = line_boxes.last().width();
LibWeb: Make LineBuilder respect LayoutMode::OnlyRequiredLineBreaks In this layout mode, we should only break when forced (e.g by an explicit <br> tag.) This is used when determining intrinsic sizes.)
2022-01-20 16:19:05 +01:00
return (current_line_width + next_item_width) > m_available_width_for_current_line;
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
}
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
static float box_baseline(FormattingState const& state, Box const& box)
{
auto const& box_state = state.get(box);
LibWeb: Support CSS vertical-align values "top" and "bottom"
2022-03-24 22:56:06 +01:00
auto const& vertical_align = box.computed_values().vertical_align();
if (vertical_align.has<CSS::VerticalAlign>()) {
switch (vertical_align.get<CSS::VerticalAlign>()) {
case CSS::VerticalAlign::Top:
return box_state.border_box_top();
case CSS::VerticalAlign::Bottom:
return box_state.content_height + box_state.border_box_bottom();
default:
break;
}
}
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
if (!box_state.line_boxes.is_empty())
LibWeb: Align baseline of inline-block with non-zero top border/padding We were not adjusting the fragment baseline for inline-blocks that had some border and/or padding size up top.
2022-03-24 12:36:16 +01:00
return box_state.border_box_top() + box_state.offset.y() + box_state.line_boxes.last().baseline();
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
if (box.has_children() && !box.children_are_inline()) {
auto const* child_box = box.last_child_of_type<Box>();
VERIFY(child_box);
return box_baseline(state, *child_box);
}
return box_state.border_box_height();
}
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
void LineBuilder::update_last_line()
{
LibWeb: Don't do horizontal inline line layout twice for last line After pruning empty last line boxes, we now avoid re-running the horizontal fragment positioning step, since that would be wasted work.
2022-01-22 10:32:49 +01:00
m_last_line_needs_update = false;
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
auto& line_boxes = m_containing_block_state.line_boxes;
LibWeb: Don't do horizontal inline line layout twice for last line After pruning empty last line boxes, we now avoid re-running the horizontal fragment positioning step, since that would be wasted work.
2022-01-22 10:32:49 +01:00
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
if (line_boxes.is_empty())
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
return;
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
auto& line_box = line_boxes.last();
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
auto text_align = m_context.containing_block().computed_values().text_align();
LibWeb: Rewrite CSS float implementation to use offset-from-edge The previous implementation used relative X offsets for both left and right-side floats. This made right-side floats super awkward, since we could only determine their X position once the width of the BFC root was known, and for BFC roots with automatic width, this was not even working at all most of the time. This patch changes the way we deal with floats so that BFC keeps track of the offset-from-edge for each float. The offset is the distance from the BFC root edge (left or right, depending on float direction) to the "innermost" margin edge of the floating box. Floating box are now laid out in two passes: while going through the normal flow layout, we put floats in their *static* position (i.e the position they would have occupied if they weren't floating) and then update the Y position value to the final one. The second pass occurs later on, when the BFC root has had its width assigned by the parent context. Once we know the root width, we can set the X position value of floating boxes. (Because the X position of right-side floats is relative to the right edge of the BFC root.)
2022-03-18 14:44:36 +01:00
float x_offset = m_context.leftmost_x_offset_at(m_current_y);
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
float excess_horizontal_space = m_containing_block_state.content_width - line_box.width();
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
switch (text_align) {
case CSS::TextAlign::Center:
case CSS::TextAlign::LibwebCenter:
x_offset += excess_horizontal_space / 2;
break;
case CSS::TextAlign::Right:
x_offset += excess_horizontal_space;
break;
case CSS::TextAlign::Left:
case CSS::TextAlign::Justify:
default:
break;
}
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
auto fragment_baseline = [&](auto const& fragment) -> float {
LibWeb: Bring CSS line-height implementation closer to spec We now distribute the line-height evenly between the space above and below inline-level boxes. This noticeably improves our baseline alignment in many cases. Note that the "vertical-align: <length>" case is quite awkward, as the extra height added by the offset baseline must count towards the line box height. There's a lot of room for improvement here, but this makes the buckets container on Acid3 show up in the right place, with the right size.
2022-03-24 22:45:51 +01:00
float fragment_baseline = 0;
if (fragment.layout_node().is_text_node()) {
fragment_baseline = fragment.layout_node().font().baseline();
} else {
auto const& box = verify_cast<Layout::Box>(fragment.layout_node());
fragment_baseline = box_baseline(m_formatting_state, box);
}
return fragment_baseline;
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
};
LibWeb: Very basic support for CSS vertical-align: <length> If vertical-align is a length value, we lift each line box fragment that far from the baseline of the line box. This is rather messy, and we'll have to improve factoring as we add support for more alignment types.
2022-02-26 09:29:51 +01:00
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
auto line_box_baseline = [&] {
float line_box_baseline = 0;
for (auto const& fragment : line_box.fragments()) {
auto baseline = fragment_baseline(fragment);
LibWeb: Bring CSS line-height implementation closer to spec We now distribute the line-height evenly between the space above and below inline-level boxes. This noticeably improves our baseline alignment in many cases. Note that the "vertical-align: <length>" case is quite awkward, as the extra height added by the offset baseline must count towards the line box height. There's a lot of room for improvement here, but this makes the buckets container on Acid3 show up in the right place, with the right size.
2022-03-24 22:45:51 +01:00
if (fragment.height() < m_context.containing_block().line_height())
baseline += (m_context.containing_block().line_height() - fragment.height()) / 2;
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
// NOTE: For fragments with a <length> vertical-align, shift the fragment baseline down by the length.
// This ensures that we make enough vertical space on the line for any manually-aligned fragments.
LibWeb: Bring CSS line-height implementation closer to spec We now distribute the line-height evenly between the space above and below inline-level boxes. This noticeably improves our baseline alignment in many cases. Note that the "vertical-align: <length>" case is quite awkward, as the extra height added by the offset baseline must count towards the line box height. There's a lot of room for improvement here, but this makes the buckets container on Acid3 show up in the right place, with the right size.
2022-03-24 22:45:51 +01:00
if (auto length_percentage = fragment.layout_node().computed_values().vertical_align().template get_pointer<CSS::LengthPercentage>(); length_percentage && length_percentage->is_length())
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
baseline += length_percentage->length().to_px(fragment.layout_node());
LibWeb: Bring CSS line-height implementation closer to spec We now distribute the line-height evenly between the space above and below inline-level boxes. This noticeably improves our baseline alignment in many cases. Note that the "vertical-align: <length>" case is quite awkward, as the extra height added by the offset baseline must count towards the line box height. There's a lot of room for improvement here, but this makes the buckets container on Acid3 show up in the right place, with the right size.
2022-03-24 22:45:51 +01:00
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
line_box_baseline = max(line_box_baseline, baseline);
LibWeb: Very basic support for CSS vertical-align: <length> If vertical-align is a length value, we lift each line box fragment that far from the baseline of the line box. This is rather messy, and we'll have to improve factoring as we add support for more alignment types.
2022-02-26 09:29:51 +01:00
}
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
return line_box_baseline;
}();
LibWeb: Align inline-level boxes to the baseline of the line box Vertical inline alignment is still very unsophisticated, but let's at least put everything within each line on the same baseline.
2022-01-21 13:19:20 +01:00
LibWeb: Bring CSS line-height implementation closer to spec We now distribute the line-height evenly between the space above and below inline-level boxes. This noticeably improves our baseline alignment in many cases. Note that the "vertical-align: <length>" case is quite awkward, as the extra height added by the offset baseline must count towards the line box height. There's a lot of room for improvement here, but this makes the buckets container on Acid3 show up in the right place, with the right size.
2022-03-24 22:45:51 +01:00
// Start with the "strut", an imaginary zero-width box at the start of each line box.
auto strut_top = m_current_y;
auto strut_bottom = m_current_y + m_context.containing_block().line_height();
float uppermost_box_top = strut_top;
float lowermost_box_bottom = strut_bottom;
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
for (size_t i = 0; i < line_box.fragments().size(); ++i) {
auto& fragment = line_box.fragments()[i];
LibWeb: Fix rounding errors in calculation of final line box width Instead of re-measuring the distance between the left and right edges of a line box, we now simply adjust the final width based on how much the rightmost fragment moved during the alignment process.
2022-02-25 11:34:11 +01:00
float new_fragment_x = roundf(x_offset + fragment.offset().x());
LibWeb: Very basic support for CSS vertical-align: <length> If vertical-align is a length value, we lift each line box fragment that far from the baseline of the line box. This is rather messy, and we'll have to improve factoring as we add support for more alignment types.
2022-02-26 09:29:51 +01:00
float new_fragment_y = 0;
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
auto y_value_for_alignment = [&](CSS::VerticalAlign vertical_align) {
switch (vertical_align) {
case CSS::VerticalAlign::Baseline:
LibWeb: Support CSS vertical-align values "top" and "bottom"
2022-03-24 22:56:06 +01:00
return m_current_y + line_box_baseline - fragment_baseline(fragment) + fragment.border_box_top();
case CSS::VerticalAlign::Top:
return m_current_y + fragment.border_box_top();
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
case CSS::VerticalAlign::Middle:
LibWeb: Support CSS vertical-align values "top" and "bottom"
2022-03-24 22:56:06 +01:00
case CSS::VerticalAlign::Bottom:
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
case CSS::VerticalAlign::Sub:
case CSS::VerticalAlign::Super:
case CSS::VerticalAlign::TextBottom:
case CSS::VerticalAlign::TextTop:
// FIXME: These are all 'baseline'
return m_current_y + line_box_baseline - fragment_baseline(fragment) + fragment.border_box_top();
}
VERIFY_NOT_REACHED();
};
auto const& vertical_align = fragment.layout_node().computed_values().vertical_align();
if (vertical_align.has<CSS::VerticalAlign>()) {
new_fragment_y = y_value_for_alignment(vertical_align.get<CSS::VerticalAlign>());
LibWeb: Very basic support for CSS vertical-align: <length> If vertical-align is a length value, we lift each line box fragment that far from the baseline of the line box. This is rather messy, and we'll have to improve factoring as we add support for more alignment types.
2022-02-26 09:29:51 +01:00
} else {
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
if (auto length_percentage = vertical_align.get_pointer<CSS::LengthPercentage>(); length_percentage && length_percentage->is_length()) {
auto vertical_align_amount = length_percentage->length().to_px(fragment.layout_node());
new_fragment_y = y_value_for_alignment(CSS::VerticalAlign::Baseline) - vertical_align_amount;
}
LibWeb: Very basic support for CSS vertical-align: <length> If vertical-align is a length value, we lift each line box fragment that far from the baseline of the line box. This is rather messy, and we'll have to improve factoring as we add support for more alignment types.
2022-02-26 09:29:51 +01:00
}
LibWeb: Fix rounding errors in calculation of final line box width Instead of re-measuring the distance between the left and right edges of a line box, we now simply adjust the final width based on how much the rightmost fragment moved during the alignment process.
2022-02-25 11:34:11 +01:00
fragment.set_offset({ new_fragment_x, new_fragment_y });
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
LibWeb: Bring CSS line-height implementation closer to spec We now distribute the line-height evenly between the space above and below inline-level boxes. This noticeably improves our baseline alignment in many cases. Note that the "vertical-align: <length>" case is quite awkward, as the extra height added by the offset baseline must count towards the line box height. There's a lot of room for improvement here, but this makes the buckets container on Acid3 show up in the right place, with the right size.
2022-03-24 22:45:51 +01:00
uppermost_box_top = min(uppermost_box_top, fragment.top_of_inline_level_box(m_formatting_state));
lowermost_box_bottom = max(lowermost_box_bottom, fragment.bottom_of_inline_level_box(m_formatting_state));
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
}
LibWeb: Bring CSS line-height implementation closer to spec We now distribute the line-height evenly between the space above and below inline-level boxes. This noticeably improves our baseline alignment in many cases. Note that the "vertical-align: <length>" case is quite awkward, as the extra height added by the offset baseline must count towards the line box height. There's a lot of room for improvement here, but this makes the buckets container on Acid3 show up in the right place, with the right size.
2022-03-24 22:45:51 +01:00
// 3. The line box height is the distance between the uppermost box top and the lowermost box bottom.
line_box.m_height = max(m_context.containing_block().line_height(), lowermost_box_bottom - uppermost_box_top);
line_box.m_bottom = m_current_y + line_box.m_height;
LibWeb: Align actual baselines, not just bottoms Until now, we've been treating the bottom of every line box fragment as its baseline, and just aligning all the bottoms to the bottom of the line box. That gave decent results in many cases, but was not correct. This patch starts moving towards actual baseline calculations as specified by CSS2. Note that once layout is finished with a line box, we also store the baseline of the line box in LineBox::m_baseline. This allows us to align the real baseline of display:inline-block elements with other inline content on the same line.
2022-03-03 10:09:10 +01:00
line_box.m_baseline = line_box_baseline;
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
}
LibWeb: Don't do horizontal inline line layout twice for last line After pruning empty last line boxes, we now avoid re-running the horizontal fragment positioning step, since that would be wasted work.
2022-01-22 10:32:49 +01:00
void LineBuilder::remove_last_line_if_empty()
{
// If there's an empty line box at the bottom, just remove it instead of giving it height.
LibWeb: Start making our layout system "transactional" This patch adds a map of Layout::Node to FormattingState::NodeState. Instead of updating layout nodes incrementally as layout progresses through the formatting contexts, all updates are now written to the corresponding NodeState instead. At the end of layout, FormattingState::commit() is called, which transfers all the values from the NodeState objects to the Node. This will soon allow us to perform completely non-destructive layouts which don't affect the tree. Note that there are many imperfections here, and still many places where we assign to the NodeState, but later read directly from the Node instead. I'm just committing at this stage to make subsequent diffs easier to understand.
2022-02-20 15:51:24 +01:00
auto& line_boxes = m_containing_block_state.line_boxes;
LibWeb: Don't do horizontal inline line layout twice for last line After pruning empty last line boxes, we now avoid re-running the horizontal fragment positioning step, since that would be wasted work.
2022-01-22 10:32:49 +01:00
if (!line_boxes.is_empty() && line_boxes.last().fragments().is_empty()) {
line_boxes.take_last();
m_last_line_needs_update = false;
}
}
LibWeb: Support CSS floats in inline flow CSS floats are now emitted by the InlineLevelIterator. When this happens, IFC coordinates with the parent BFC to float the box to the side, using the current LineBuilder state for vertical placement. This makes the "instructions" text on Acid3 render as a single contiguous flow of inline content.
2022-03-22 19:18:05 +01:00
void LineBuilder::adjust_last_line_after_inserting_floating_box(Badge<BlockFormattingContext>, CSS::Float float_, float space_used_by_float)
{
// NOTE: LineBuilder generates lines from left-to-right, so if we've just added a left-side float,
// that means every fragment already on this line has to move towards the right.
if (float_ == CSS::Float::Left && !m_containing_block_state.line_boxes.is_empty()) {
for (auto& fragment : m_containing_block_state.line_boxes.last().fragments())
fragment.set_offset(fragment.offset().translated(space_used_by_float, 0));
m_containing_block_state.line_boxes.last().m_width += space_used_by_float;
}
m_available_width_for_current_line -= space_used_by_float;
if (m_available_width_for_current_line < 0)
m_available_width_for_current_line = 0;
}
LibWeb: Add Layout::LineBuilder class for incremental line box layout This class will be used to place items on lines incrementally instead of the current two-phase approach.
2022-01-19 11:57:58 +01:00
}
Reference in a new issue Copy permalink